Маркдовнова једноставна синтакса чини га одличном алтернативом ХТМЛ-у. Језик је одувек подржавао уграђивање ХТМЛ-а, али сада можете ићи другим путем и уградити Маркдовн у ХТМЛ.

Користећи једноставну библиотеку, можете да угостите уграђени Маркдовн на својим веб страницама и да га у ходу конвертујете у одговарајући ХТМЛ.

Шта ради мд-блоцк?

Ваш тренутни процес може укључивати ручно креирање Маркдовн датотека, а затим њихово претварање у ХТМЛ. Овако функционишу многе модерне ЦМС апликације. Или можете користити оквир попут Ангулар за приказивање Маркдовна у странице.

мд-блоцк библиотека није стриктно алтернатива; уместо тога, испуњава мало другачији случај употребе. Конвертује инлине Маркдовн у његов еквивалентни ХТМЛ. Можете уградити Маркдовн у своје ХТМЛ датотеке и приказати га на клијенту, у време захтева.

Ево како би то могло да изгледа:

<хтмл>
<глава>...</head>
<тело>
<мд-блоцк>
# Наслов
Неки *уграђени* Маркдовн који `мд-блоцк` може претворити за вас!
</md-block>
</body>
</html>

Добра је идеја да свој уграђени Маркдовн код поравнате лево, без икаквог уводног увлачења. То је зато што водећи размак може бити значајан у Маркдовну, за разлику од ХТМЛ-а.

instagram viewer

Библиотека уводи сопствени прилагођени ХТМЛ елемент, мд-блоцк. Иако овај елемент није део ХТМЛ стандарда, ово је валидна техника. Стандард веб компоненти (МДН) укључује АПИ под називом Прилагођени елементи. Овај АПИ подржава динамичку регистрацију прилагођених елемената користећи ЈаваСцрипт.

Пре учитавања библиотеке мд-блоцк, ова страница ће се приказати на познат начин:

Наравно, можете стилизовати елемент мд-блоцк тако да изгледа више као у уређивачу текста. Са унапред форматираним размаком и једноразредним фонтом, бар је мало лакше за читање:

<стил>мд-блоцк { вхите-спаце: пре; фонт-фамили: моноспаце; }</style>

Можда бисте желели ову врсту излаза ако пишете водич о Маркдовну. Омогућава вам да објасните Маркдовн синтаксу док вам омогућава да лако уредите свој узорак Маркдовн:

Али трик за забаву мд-блоцк-а је да претвори тај Маркдовн у коначни ХТМЛ.

Чак и са подразумеваним стиловима претраживача, садржај се сада приказује баш као ваш обичан ХТМЛ, иако сте га послали у прегледач као Маркдовн:

Како користити мд-блоцк

Када додате мд-блоцк библиотеку на своју страницу, можете уписати свој Маркдовн мд-блоцк елемената. Библиотека ће тада аутоматски форматирати ваш Маркдовн, а ви можете наставити да уграђујете Маркдовн по потреби.

Међутим, постоји неколико варијација овог процеса.

Извор скрипте на даљину или је сами инсталирајте

Најлакши начин да започнете је да упутите на библиотеку са званичне веб странице мд-блоцк:

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

Ово можда није најефикаснији приступ, али је дефинитивно најбржи. Само додајте овај код у свој глава и ваша страница ће аутоматски приказати било шта у елементу мд-блоцк у ХТМЛ:

Можете, наравно, преузети ту ЈаваСцрипт датотеку и хостовати је на својој веб локацији. Или га можете инсталирати преко нпм-а:

нпм инсталирај доктор медицине-блокирати

Маркдовн Блоцкс вс. Инлине Маркдовн

Подразумевани елемент, назван по самој библиотеци, је мд-блоцк. Али можете користити и мд-спан елемент за инлине Маркдовн, као што је текст у средини реченице:

Случај употребе за инлине Маркдовн је вероватно мање уобичајен, али га и даље можете користити:

<стр>ХТМЛ параграф који садржи <мд-спан>*курзив*</md-span> текст.</п>

Како синтаксирати маркдовн блокове кода помоћу Призма

Призма је маркер синтаксе који је заједно креирала Леа Вероу, креаторка мд-блоцк-а. Можете га користити за истицање унапред форматираних блокова кода на веб страници, укључујући оне које генерише мд-блоцк.

Дакле, са овим ХТМЛ-ом:

<хтмл>
<тело>
<мд-блоцк>
```јавасцрипт
функцијаквадрат(број) {
повратак број * број;
}
```
</md-block>
<скрипт срц="призма.јс"></script>
</body>
</html>

Видећете лепо форматиран код са синтактички свесним истицањем:

Ваше могућности за писање на мрежи су се управо повећале

Како ћете користити мд-блоцк зависи од вас, али постоји много потенцијала за инвентивна решења која га користе. Можете га користити за покретање веома лаганог ЦМС-а за писце који самоуверено користе Маркдовн, али не и ХТМЛ.

Маркдовн је савршен језик за широку публику. Његово усвајање од стране алата као што је Слацк ће највероватније још више повећати употребу.