Зачеркивание текста

Зачеркивание текста (strikethrough) в Markdown используется для визуального обозначения удалённого или устаревшего содержимого. В синтаксисе Markdown это достигается с помощью двойного тильда ~~, обрамляющего текст, который требуется зачеркнуть. Библиотека Marked корректно обрабатывает этот синтаксис, преобразуя его в HTML с использованием тега <del>.

~~Этот текст будет зачеркнут~~

При рендеринге через Marked результат будет следующим:

<p><del>Этот текст будет зачеркнут</del></p>

Включение и настройка зачёркивания

По умолчанию Marked поддерживает стандартный синтаксис GitHub-flavored Markdown (GFM), где зачёркивание включено. Для явного контроля можно настроить параметры gfm и breaks при инициализации:

const marked = require('marked');

marked.setOptions({
  gfm: true,
  breaks: false
});

Параметр gfm: true активирует расширенные возможности Markdown, включая зачёркивание, таблицы, автолинк и другие элементы.

Разбор текста с зачёркиванием

При использовании Marked текст с двойными тильдами парсится как inline token типа del. Пример с разбором токенов:

const lexer = new marked.Lexer();
const tokens = lexer.lex("~~Удалённый текст~~ и обычный текст");
console.log(tokens);

Вывод:

[
  {
    "type": "paragraph",
    "text": "<del>Удалённый текст</del> и обычный текст"
  }
]

Это демонстрирует, что Marked сразу преобразует синтаксис зачёркивания в соответствующий HTML-тег.

Комбинирование с другими форматами

Зачёркивание можно использовать вместе с другими Markdown-форматами, такими как жирный и курсив. Marked корректно обрабатывает вложенные стили, сохраняя порядок вложенности.

~~Этот текст **жирный** и зачёркнут~~

Рендеринг через Marked:

<p><del>Этот текст <strong>жирный</strong> и зачёркнут</del></p>

Важно: при вложении нескольких стилей соблюдается последовательность тегов. Marked соблюдает порядок открытия и закрытия тэгов для корректного отображения.

Применение через кастомные рендереры

Marked поддерживает возможность переопределения рендеринга через Renderer. Это удобно, если требуется изменить стандартное поведение зачёркивания:

const renderer = new marked.Renderer();

renderer.del = function(text) {
  return `<span style="text-decoration: line-through; color: red;">${text}</span>`;
};

const markdown = "~~Текст с кастомным зачёркиванием~~";
console.log(marked(markdown, { renderer }));

Результат:

<p><span style="text-decoration: line-through; color: red;">Текст с кастомным зачёркиванием</span></p>

Такой подход позволяет задавать собственный стиль, цвет, шрифт и другие CSS-свойства для элементов <del>.

Частые ошибки при использовании

  1. Одинарная тильда ~ не работает для зачёркивания. Нужно обязательно использовать двойные.
  2. Пробелы вокруг текста не обязательны, но иногда могут нарушать корректный разбор в сложных конструкциях, например:
~~ пробел в начале и конце ~~

В этом случае часть парсера может трактовать тильду как обычный символ. Рекомендуется писать без пробелов: ~~текст~~.

  1. Вложенные тильды: Marked не поддерживает вложенные зачёркивания, например ~~текст ~~внутри~~ текст~~. Это может привести к неожиданному HTML-рендерингу.

Практические примеры

  • Обновлённые задачи:
- ~~Старое задание~~
- Новое задание

HTML-вывод:

<ul>
  <li><del>Старое задание</del></li>
  <li>Новое задание</li>
</ul>
  • Смешанные стили:
~~Курсив и **жирный** в зачёркивании~~

HTML-вывод:

<p><del>Курсив и <strong>жирный</strong> в зачёркивании</del></p>
  • С кастомизацией через Renderer для цветного зачёркивания и увеличенного шрифта:
renderer.del = (text) => `<del style="color: gray; font-size: 1.2em;">${text}</del>`;

Использование таких методов позволяет полностью контролировать визуальное оформление текста с зачёркиванием при рендеринге Markdown с Marked.

Оглавление