Перейти до основного вмісту
LibraTool logoLibraTool

Конвертер Markdown у HTML — безкоштовно

Конвертуйте Markdown у чистий HTML із живим попереднім переглядом. Використовуйте вихідний вигляд для копіювання готового HTML для блогів, CMS або шаблонів електронної пошти.

Працює офлайн після завантаження
HTML-виведення з'явиться тут…

Типові застосування

  • Опублікуйте Markdown у CMSПеретворіть записи Markdown на HTML, щоб вставити в CMS, які приймають тільки HTML.
  • Створіть вміст електронної пошти HTMLПеретворіть Markdown на HTML для трансакційних листів та розсилок.
  • Попередній перегляд файлів README локальноВставте ваш README.md, щоб побачити, як він буде відображатися на GitHub, GitLab чи npm.
  • Генеруйте вміст сторінок для статичних сайтівПеретворіть вміст Markdown на HTML для вручну побудованих статичних сайтів або одноразових сторінок.
  • Побудуйте документацію HTMLПеретворіть внутрішні документи Markdown на HTML для вбудовування в програми, центри підтримки або бази знань.

Як це працює

Конвертацію повністю виконує у вашому браузері власноруч написаний парсер Markdown — без сторонніх бібліотек і запитів до сервера. Парсер проходить текст рядок за рядком, застосовуючи правила блокового рівня (заголовки, списки, таблиці, огороджений код), а потім другим проходом — рядкові шаблони регулярних виразів для жирного, курсиву, посилань, зображень і рядкового коду.

  1. 1
    Спершу розбирається блокова структура
    Парсер читає сирий Markdown рядок за рядком, визначаючи блокові конструкції: огороджені блоки коду (з необов’язковим класом мови), заголовки ATX (від # до ######), цитати, нумеровані й маркеровані списки з прапорцями списків завдань GFM, таблиці GFM з вирівнюванням стовпців, горизонтальні лінії та абзаци, що правильно об’єднують м’яко перенесені рядки.
  2. 2
    Рядкові шаблони застосовуються всередині кожного блоку
    Після HTML-екранування тексту кожного блоку ланцюжок регулярних виразів у parseInline() перетворює рядковий синтаксис: зображення й посилання (з білим списком схем URL, що прибирає посилання javascript: і data:), **жирний**, *курсив*, ~~закреслення~~ і рядковий код — саме в такому порядку пріоритету.
  3. 3
    Живий HTML-результат із перемикачем перегляду
    Рядок HTML переобчислюється через useMemo з кожним натисканням, тож права панель оновлюється миттєво. Перемикач змінює вигляд між сирим HTML-кодом і відрендереним переглядом через власний рушій компонування браузера.
  4. 4
    Три варіанти результату, включно з копіюванням форматованого тексту
    Можна скопіювати сиру HTML-розмітку, завантажити повний автономний файл .html з DOCTYPE і мета-тегом charset або скористатися «Копіювати форматований текст», що записує в буфер обміну обидва типи MIME text/html і text/plain через ClipboardItem з Clipboard API, тож відформатований результат вставляється прямо в Gmail, Google Docs чи Word без зайвих кроків.

Схожі інструменти

Часті запитання