Как создать двойной отступ в стиле КУМИРа в Markdown

Содержимое статьи:

• Использование пробелов и точек
• Использование HTML-тегов
• Использование Unicode-символов
• Использование CSS (если применимо)
• Использование таблиц

В КУМИРе часто используется визуальное представление вложенности с помощью двойного отступа, обозначаемого символами "• •". В Markdown нет встроенного способа напрямую создать такой эффект, но его можно имитировать различными способами. Рассмотрим некоторые из них:

Использование пробелов и точек

Самый простой способ имитировать двойной отступ - использовать пробелы и символ точки вручную.

• Просто добавьте несколько пробелов и символы "• •" перед текстом:
  

  •  Первый уровень
  
  •  • Второй уровень
  
  •  •  • Третий уровень

  Результат (при рендеринге Markdown):
  • Первый уровень
  • • Второй уровень
  • • • Третий уровень
  Минусы:

• Требует ручной настройки пробелов.
• Визуально не всегда идеально ровно.
• Не масштабируется хорошо для больших документов.
  

  Использование HTML-тегов

  Можно использовать HTML-теги для более точного контроля над отступами.

• Пример с использованием   (неразрывный пробел):
  

      • • Второй уровень
  
          • • Третий уровень

  Результат (при рендеринге HTML):
      • • Второй уровень
          • • Третий уровень
  Минусы:

• Требует знания HTML.
• Сложно читается в исходном Markdown-файле.
• Зависит от поддержки HTML в рендерере Markdown.
  

  Использование Unicode-символов

  Можно использовать Unicode-символ для точки с пробелом.

• Пример с символом U+2003 (Em Space):
  

    • • Второй уровень
  
      • • Третий уровень

  Результат (при рендеринге):
    • • Второй уровень
      • • Третий уровень
  Минусы:

• Нужно знать Unicode-символы.
• Визуализация может отличаться в разных шрифтах.
  

  Использование CSS (если применимо)

  Если вы рендерите Markdown в HTML и можете контролировать CSS, это наиболее гибкий вариант.

• Пример CSS:
  

  .kumir-indent {
  
  text-indent: 2em; /* или любое другое значение */
  
  margin-left: 1em; /* Дополнительный отступ слева */
  
  }
  
  .kumir-indent:before {
  
  content: "• • ";
  
  }

• Пример Markdown с использованием классов HTML:
  

  <div class="kumir-indent">Второй уровень</div>
  
  <div class="kumir-indent">Третий уровень</div>

  Плюсы:

• Наиболее контролируемый и стандартизированный способ.
• Легко изменить внешний вид глобально.
  Минусы:
• Требует знания CSS.
• Работает только при рендеринге в HTML с поддержкой CSS.
  

  Использование таблиц

  Хотя и не совсем элегантно, можно использовать таблицы для имитации отступов.

• Пример:
  

  |   |  • • Второй уровень |
  
  |---|---|
  
  |   |   | • • • Третий уровень |

  Минусы:

• Сложно форматировать.
• Не лучший вариант для длинных текстов.
  Выбор метода зависит от ваших потребностей и возможностей рендеринга Markdown.