Практичний приклад
Перегляньте разом заголовки, таблиці, блоки коду, вкладені списки та посилання: саме тут найчастіше відрізняються діалекти Markdown.
Перегляд Markdown
Налаштування
Символів
Слів
Рядків
Що таке Markdown Preview?
Markdown Preview дозволяє писати Markdown і одразу бачити, як він виглядатиме після рендерингу в HTML.
Це корисно для нотаток, документації, README-файлів, чернеток статей, коментарів і будь-якого контенту з Markdown-форматуванням.
Як користуватися Markdown Preview
- Встав або напиши Markdown у поле вводу.
- Увімкни автоматичний рендеринг, якщо хочеш бачити прев’ю під час введення.
- Переглянь результат у блоці прев’ю та, за потреби, HTML-вивід.
- Скопіюй HTML або сам Markdown, якщо це потрібно.
Поради
- Використовуй заголовки, списки, посилання, цитати й блоки коду, щоб структурувати текст.
- Екрануй сирий HTML, якщо хочеш безпечніше прев’ю.
- Копіюй HTML-вивід, коли потрібна готова розмітка.
- Markdown Preview особливо зручний для README і чернеток контенту.
Перевірки Markdown перед публікацією відрендереного контенту
Перевіряйте вигляд і згенеровану структуру, адже діалекти Markdown, sanitizers і платформи по-різному обробляють можливості формату.
Структура заголовків
Використовуйте один зрозумілий title і логічну ієрархію headings для навігації, accessibility та автоматичного змісту.
Посилання й медіа
Перевірте відносні шляхи, anchors, alt-текст зображень, зовнішні адреси та ресурси, що можуть вимагати авторизації.
Сумісність діалекту
Тестуйте таблиці, task lists, footnotes, fenced code та inline HTML саме на платформі, де документ буде показаний.
Недовірений HTML
Санітизуйте Markdown від користувачів і обмежуйте embedded HTML, scripts, небезпечні URL та віддалений вміст у production.
Практичний приклад, крайовий випадок і примітка автора
Крайовий випадок
Сирий HTML і javascript:-посилання можуть спричинити XSS, якщо production-рендерер дозволяє небезпечну розмітку.
Примітка автора
Перед публікацією документації я порівнюю preview з тим самим рендерером, який використовує цільова платформа.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
Кодування / Декодування HTML-сутностей
Кодуй і декодуй HTML entities миттєво у браузері.
Кодування та безпека
›
Генератор Lorem Ipsum
Генератор тексту-заповнювача для дизайну, UI і контентних макетів.
Текст та контент
›
Генератор Slug
Перетворюй текст у чистий URL-слаг.
Текст та контент
›
Перегляд мета-тегів / Open Graph
Перегляд Google та Open Graph snippet і генерація meta tags.
SEO та вебмайстер
›
FAQ про Markdown Preview
Чи можна переглядати Markdown у реальному часі?
Так. Увімкни автоматичний рендеринг, щоб бачити прев’ю під час введення.
Чи можна скопіювати згенерований HTML?
Так. Для цього є кнопка копіювання HTML.
Чи підтримуються заголовки, списки, таблиці, checklist-и, посилання та блоки коду?
Так. Підтримуються основні елементи Markdown: заголовки, марковані й нумеровані списки, checklist-и, цитати, посилання, таблиці, inline code, горизонтальні лінії та fenced code blocks.
Чи зберігається мій Markdown?
Ні. Markdown рендериться в HTML на самій сторінці — неопубліковані нотатки й документи лишаються на вашому пристрої.