Использование в Svelte

Для работы с Markdown в приложениях на Svelte библиотека Marked предоставляет удобный инструмент для конвертации текста в HTML. Установка выполняется через npm:

npm install marked

После установки библиотеку можно импортировать в компонент Svelte:

При таком подходе обеспечивается возможность конвертировать Markdown в HTML прямо внутри компонентов Svelte.

Базовое использование

Основная функция библиотеки — marked(), которая принимает Markdown-строку и возвращает HTML. В Svelte это удобно использовать с реактивными переменными:




{@html htmlContent}

Ключевые моменты:

  • Использование директивы {@html ...} обязательно для корректного рендеринга HTML в Svelte.
  • Любые изменения в переменной markdownText автоматически обновят HTML через реактивное выражение $:.

Настройка опций Marked

Marked позволяет гибко настраивать процесс парсинга. Опции передаются через объект marked.setOptions:




{@html htmlContent}

Особенности использования в Svelte:

  • Настройки применяются глобально, поэтому их нужно задавать один раз в приложении.
  • Для разных компонентов можно создавать отдельные функции с собственными опциями вместо глобальной настройки.

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

Marked поддерживает кастомизацию вывода через Renderer. Это полезно, если требуется контролировать, как формируются теги HTML.




{@html htmlContent}

Ключевые возможности кастомного рендерера:

  • Изменение всех типов элементов Markdown: заголовки, ссылки, изображения, списки, блоки кода.
  • Легкая интеграция с CSS через классы или inline-стили.
  • Возможность добавлять атрибуты и обработчики событий.

Использование с компонентами

В Svelte можно создавать отдельный компонент для отображения Markdown, чтобы повторно использовать функционал по всему приложению.

Использование компонента в приложении:

Преимущества такого подхода:

  • Централизация логики рендеринга Markdown.
  • Легкость в поддержке и обновлении стилей.
  • Возможность добавлять дополнительные функции, такие как подсветка синтаксиса для кода.

Поддержка подсветки синтаксиса

Для отображения блоков кода с подсветкой удобно использовать библиотеку highlight.js вместе с Marked:




{@html htmlContent}

Особенности интеграции:

  • Автоматическая подсветка кода в блоках ``` Markdown.
  • Поддержка множества языков.
  • Совместимость с кастомными стилями через CSS.

Обработка пользовательского ввода

При работе с Markdown, получаемым от пользователей, необходимо учитывать безопасность:

  • sanitize: true или использование библиотек вроде DOMPurify для очистки HTML.
  • Избегать прямого рендеринга пользовательского ввода без фильтрации, особенно если он содержит скрипты.
";
  $: htmlContent = DOMPurify.sanitize(marked(userInput));



{@html htmlContent}

Преимущество такого подхода:

  • Защита от XSS-атак.
  • Сохранение возможностей Markdown с безопасным HTML.
Оглавление