Простият синтаксис на 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, това е валидна техника. Стандартът за уеб компоненти (MDN) включва API, наречен Custom Elements. Този API поддържа динамична регистрация на персонализирани елементи с помощта на JavaScript.

Преди да заредите библиотеката md-block, тази страница ще се визуализира по познат начин:

Разбира се, можете да стилизирате елемента md-block, така че да изглежда по-скоро като в текстов редактор. С предварително форматирани бели интервали и шрифт с едно пространство е поне малко по-лесно за четене:

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

Може да искате този вид изход, ако пишете урок за Markdown. Позволява ви да обясните синтаксиса на Markdown, като същевременно ви позволява лесно да редактирате своя примерен Markdown:

Но парти трикът на md-block е да преобразува този Markdown в окончателен HTML.

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

Как да използвате md-block

След като добавите библиотеката md-block към страницата си, можете да напишете своя Markdown md-блок елементи. След това библиотеката автоматично ще форматира вашия Markdown и можете да продължите да вграждате Markdown, както желаете.

Има обаче няколко вариации на този процес.

Извлечете скрипта от разстояние или го инсталирайте сами

Най-лесният начин да започнете е да посочите библиотеката от официалния уебсайт на md-block:

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

Това може да не е най-ефективният подход, но определено е най-бързият. Просто добавете този код към вашия глава и вашата страница автоматично ще изобрази всичко в md-block елемент в HTML:

Можете, разбира се, да изтеглите този JavaScript файл и да го хоствате на собствения си сайт. Или можете да го инсталирате чрез npm:

npm Инсталирай MD-блок

Markdown Blocks vs. Inline Markdown

Елементът по подразбиране, наречен на самата библиотека, е md-блок. Но можете също да използвате md-обхват елемент за вграден Markdown, като текст в средата на изречението:

Случаят на използване на inline Markdown вероятно е по-рядко срещан, но все пак можете да го използвате:

<стр>HTML параграф, съдържащ <md-обхват>*курсив*</md-span> текст.</стр>

Как да маркирате синтаксис на Markdown кодови блокове с Prism

Призма е инструмент за открояване на синтаксис, който Lea Verou, създател на md-block, е създал. Можете да го използвате, за да маркирате предварително форматирани кодови блокове в уеб страница, включително тези, които md-block генерира.

И така, с този HTML:

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

Ще видите добре форматиран код със синтактично осъзнато подчертаване:

Вашите възможности за писане онлайн току-що се увеличиха

Как ще използвате md-block зависи от вас, но има много потенциал за изобретателни решения, които го използват. Можете да го използвате, за да стартирате много лека CMS за писатели, които уверено използват Markdown, но не и HTML.

Markdown е перфектен език за широка аудитория. Възприемането му от инструменти като Slack най-вероятно ще увеличи използването още повече.