Надстрочный и подстрочный текст

Библиотека Markdown-it в JavaScript предоставляет расширяемый парсер Markdown, который поддерживает не только стандартный синтаксис, но и различные плагины для расширенной разметки. Одним из часто используемых приёмов является работа с надстрочным (superscript) и подстрочным (subscript) текстом. Это особенно важно для научных, технических и математических текстов.

Подключение Markdown-it и плагинов

Для использования надстрочного и подстрочного текста требуется основной пакет markdown-it и соответствующие плагины:

const MarkdownIt = require('markdown-it');
const markdownItSup = require('markdown-it-sup');
const markdownItSub = require('markdown-it-sub');

const md = new MarkdownIt();
md.use(markdownItSup);
md.use(markdownItSub);

Здесь markdown-it-sup отвечает за синтаксис надстрочного текста, а markdown-it-sub — за подстрочный. Плагины добавляют новые правила разметки, которые не входят в стандарт Markdown.

Синтаксис надстрочного текста

Надстрочный текст обозначается с помощью символа ^:

H^2^O

После обработки Markdown-it с подключённым плагином, этот код преобразуется в HTML:

H<sup>2</sup>O

Особенности синтаксиса:

  • Символ ^ должен окружать текст без пробелов с обеих сторон: x^2^ корректно, а x^ 2 ^ — нет.
  • Поддерживается вложенный текст и комбинация с другими элементами Markdown, например: E = mc^2^.

Синтаксис подстрочного текста

Подстрочный текст обозначается с помощью символа ~:

CO~2~

Результат преобразования в HTML:

CO<sub>2</sub>

Особенности синтаксиса:

  • Так же, как и с надстрочным текстом, нельзя оставлять пробелы между символами: H~2~O правильно, а H~ 2 ~O — нет.
  • Подстрочный текст часто используется для химических формул, индексов и математических обозначений.

Комбинирование надстрочного и подстрочного текста

Markdown-it позволяет комбинировать оба типа разметки в одном выражении:

X~i~^2^

Результат в HTML:

X<sub>i</sub><sup>2</sup>

При этом важно правильно закрывать каждую разметку, чтобы парсер корректно создавал соответствующие теги <sub> и <sup>.

Настройки и опции плагинов

Некоторые плагины позволяют настраивать поведение:

  • Маркер разметки: можно изменить символ ^ или ~ на другой, если это необходимо для проекта.
  • Поддержка вложенности: по умолчанию Markdown-it корректно обрабатывает вложенные над- и подстрочные элементы, но при необходимости можно ограничить глубину вложенности.

Пример изменения маркера надстрочного текста:

md.use(require('markdown-it-sup'), { marker: '˄' });

Теперь надстрочный текст будет обозначаться как x˄2˄.

Взаимодействие с другими элементами Markdown

Надстрочный и подстрочный текст корректно работают с:

  • Жирным и курсивом: **H^2^O** → <strong>H<sup>2</sup>O</strong>
  • Списками и таблицами: разметка внутри ячеек таблиц и элементов списка обрабатывается корректно.
  • Ссылками и кодом: внутри ссылок или инлайнового кода символы ^ и ~ не интерпретируются как над- или подстрочный текст.

Рекомендации по использованию

  • Для технической документации и научных текстов подключение над- и подстрочных плагинов повышает читаемость формул и форматов.
  • В Markdown-файлах рекомендуется единообразно использовать стандартные символы (^ и ~) для над- и подстрочного текста.
  • Следить за корректным закрытием маркеров, чтобы избежать некорректного рендеринга HTML.

Markdown-it с плагинами markdown-it-sup и markdown-it-sub позволяет легко внедрять сложную разметку для над- и подстрочного текста, обеспечивая гибкость и точность в отображении технических и научных материалов.

Оглавление