Рендеринг зачеркнутого текста

Библиотека Marked является мощным инструментом для парсинга и рендеринга Markdown в JavaScript. Она поддерживает расширенные синтаксические возможности, включая обработку зачеркнутого текста через синтаксис ~~текст~~. Понимание того, как правильно рендерить и настраивать отображение этого элемента, важно для создания полноценных Markdown-приложений.

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

В Markdown для создания зачеркнутого текста используется двойной тильд ~~ вокруг слова или фразы:

Это ~~важная~~ неважная информация.

При рендеринге через Marked данный фрагмент преобразуется в HTML-тег :

Это важная неважная информация.

Использование тега соответствует семантической разметке HTML и правильно интерпретируется браузерами и другими инструментами визуализации контента.

Включение поддержки зачеркнутого текста

По умолчанию поддержка зачеркивания может быть отключена в некоторых конфигурациях Marked. Для активации этой функции необходимо убедиться, что опция gfm установлена в true, так как синтаксис ~~text~~ является частью расширений GitHub Flavored Markdown (GFM).

Пример настройки:

import { marked } from 'marked';

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

После включения gfm библиотека корректно обрабатывает ~~текст~~ и рендерит его как .

Кастомизация рендеринга

Marked позволяет полностью контролировать процесс рендеринга через объект Renderer. Для изменения того, как отображается зачеркнутый текст, можно переопределить метод del:

const renderer = new marked.Renderer();

renderer.del = function(text) {
  return `${text}`;
};

const markdown = 'Это ~~важная~~ информация.';
const html = marked(markdown, { renderer: renderer });

console.log(html);
// Вывод: Это важная информация.

Такой подход полезен для адаптации визуального стиля к требованиям дизайна приложения, не нарушая синтаксис Markdown.

Обработка вложенных элементов

В Markdown возможны случаи, когда зачеркнутый текст содержит другие элементы, например курсив или жирный текст:

~~Это **важная** информация~~

Marked корректно обрабатывает вложенные стили, превращая их в HTML:

Это важная информация

Это позволяет создавать сложные комбинированные оформления без необходимости писать кастомные парсеры.

Предостережения и ограничения

  1. Непарные тильды: Если количество ~ нечетное, библиотека игнорирует синтаксис зачеркнутого текста и рендерит его как обычный текст.

  2. Совместимость с другими парсерами: Некоторые Markdown-редакторы могут использовать другой синтаксис для зачеркнутого текста, например -text-. При переносе контента стоит убедиться в совместимости с Marked.

  3. HTML-инъекции: При использовании пользовательского ввода необходимо включить опцию sanitize или внешние библиотеки для экранирования HTML, чтобы предотвращать XSS через встроенные теги .

Практическое применение

  • Отображение изменений: удобно использовать для показа удаленного текста или изменений в документации.
  • Списки и таблицы: Зачеркнутый текст корректно отображается внутри Markdown-таблиц и списков.
  • Редакторы и визуальные превью: При динамическом рендеринге Markdown можно применять кастомные стили для del через Renderer без вмешательства в основную разметку.

Резюме

  • Синтаксис ~~текст~~ в Marked преобразуется в .
  • Поддержка доступна через опцию gfm.
  • Рендеринг можно кастомизировать через объект Renderer.
  • Вложенные элементы и комбинированное форматирование обрабатываются корректно.
  • Необходимо учитывать безопасность и корректность парности символов.
Оглавление