Простой синтаксис Markdown делает его отличной альтернативой HTML. Язык всегда поддерживал встраивание HTML, но теперь можно пойти другим путем и встроить Markdown в HTML.

Используя простую библиотеку, вы можете размещать встроенный Markdown на своих веб-страницах и на лету преобразовывать его в правильный HTML.

Что делает md-block?

Ваш текущий процесс может включать создание файлов Markdown вручную, а затем преобразование их в HTML. Так работают многие современные CMS-приложения. Или вы можете использовать структуру, например Angular для отображения Markdown на страницах.

Библиотека md-block не является строго альтернативой; вместо этого он выполняет немного другой вариант использования. Он преобразует встроенный Markdown в его эквивалент HTML. Вы можете встроить Markdown в свои HTML-файлы и отображать их на клиенте во время запроса.

Вот как это может выглядеть:

<HTML>
<глава>...</head>
<тело>
<md-блок>
# Заголовок
Некоторый *встроенный* Markdown, который `md-block` может преобразовать для вас!
</md-block>
</body>
</html>
instagram viewer

Рекомендуется выровнять встроенный код Markdown по левому краю без начального отступа. Это связано с тем, что начальные пробелы могут быть значительными в Markdown, в отличие от HTML.

Библиотека вводит свой собственный пользовательский элемент HTML, md-блок. Хотя этот элемент не часть стандарта HTML, это действующий метод. Стандарт веб-компонентов (МДН) включает в себя API под названием Custom Elements. Этот API поддерживает динамическую регистрацию пользовательских элементов с помощью JavaScript.

Перед загрузкой библиотеки md-block эта страница будет отображаться знакомым образом:

Конечно, вы можете стилизовать элемент md-block так, чтобы он больше походил на текстовый редактор. С предварительно отформатированными пробелами и моноширинным шрифтом читать как минимум немного легче:

<стиль>md-block { пробел: pre; семейство шрифтов: моноширинный; }</style>

Вам может понадобиться такой вывод, если вы пишете учебник по Markdown. Это позволяет вам объяснить синтаксис Markdown, позволяя легко редактировать образец Markdown:

Но хитрость md-block заключается в том, чтобы преобразовать этот Markdown в окончательный HTML.

Даже со стилями браузера по умолчанию контент теперь отображается так же, как ваш обычный HTML, даже если вы отправили его в браузер как Markdown:

Как использовать md-блок

После того, как вы добавили библиотеку md-block на свою страницу, вы можете написать свой Markdown в md-блок элементы. Затем библиотека автоматически отформатирует ваш Markdown, и вы сможете продолжить встраивание Markdown по своему усмотрению.

Однако есть несколько вариаций этого процесса.

Получите сценарий удаленно или установите его самостоятельно

Самый простой способ начать работу — обратиться к библиотеке с официального сайта md-block:

<тип скрипта="модуль" источник="https://md-block.verou.me/md-block.js"></script>

Возможно, это не самый эффективный подход, но определенно самый быстрый. Просто добавьте этот код в свой глава и ваша страница будет автоматически отображать что-либо в элементе md-block в HTML:

Конечно, вы можете загрузить этот файл JavaScript и разместить его на своем сайте. Или вы можете установить его через npm:

нпм установить md-блокировать

Блоки уценки vs. Встроенная уценка

Элемент по умолчанию, названный в честь самой библиотеки, md-блок. Но вы также можете использовать md-span элемент для встроенного Markdown, например текст в середине предложения:

Вариант использования встроенного Markdown, вероятно, менее распространен, но тем не менее вы можете его использовать:

<п>Абзац HTML, содержащий <md-span>*курсив*</md-span> текст.</п>

Как выделить синтаксис блоков кода Markdown с помощью Prism

призма — это подсветка синтаксиса, которую создала Леа Веру, создательница md-block. Вы можете использовать его для выделения предварительно отформатированных блоков кода на веб-странице, включая те, которые генерирует md-block.

Итак, с этим HTML:

<HTML>
<тело>
<md-блок>
```javascript
функцияплощадь(количество) {
возвращаться номер * номер;
}
```
</md-block>
<источник сценария ="prism.js"></script>
</body>
</html>

Вы увидите хорошо отформатированный код с подсветкой с учетом синтаксиса:

Ваши возможности для написания онлайн только что увеличились

То, как вы используете md-block, зависит от вас, но есть много возможностей для изобретательных решений с его использованием. Вы можете использовать его для запуска очень легкой CMS для писателей, которые уверенно используют Markdown, но не HTML.

Markdown — идеальный язык для широкой аудитории. Его принятие такими инструментами, как Slack, скорее всего, еще больше увеличит его использование.