Prosta składnia Markdowna czyni go doskonałą alternatywą dla HTML. Język zawsze wspierał osadzanie HTML, ale teraz możesz pójść w drugą stronę i osadzić Markdown w HTML.

Korzystając z prostej biblioteki, możesz hostować osadzony Markdown na swoich stronach internetowych i konwertować go na właściwy kod HTML w locie.

Co robi md-block?

Twój obecny proces może obejmować ręczne tworzenie plików Markdown, a następnie konwertowanie ich na HTML. Tak działa wiele nowoczesnych aplikacji CMS. Lub możesz użyć frameworka, takiego jak Angular, aby renderować Markdown na stronach.

Biblioteka md-block nie jest ściśle alternatywą; zamiast tego spełnia nieco inny przypadek użycia. Konwertuje wbudowany Markdown na odpowiednik HTML. Możesz osadzić Markdown w swoich plikach HTML i wyrenderować go na kliencie w czasie żądania.

Oto jak to może wyglądać:

<html>
<głowa>...</head>
<ciało>
<md-blok>
# Nagłówek
Niektóre *wbudowane* Markdowny, które `md-block` może dla Ciebie przekonwertować!
</md-block>
</body>
</html>

Dobrym pomysłem jest wyrównanie do lewej osadzonego kodu Markdown bez żadnych wcięć wiodących. Dzieje się tak, ponieważ wiodące białe znaki mogą być znaczące w Markdown, w przeciwieństwie do HTML.

instagram viewer

Biblioteka wprowadza własny niestandardowy element HTML, md-blok. Chociaż ten element nie jest część standardu HTML, jest to prawidłowa technika. Standard komponentów internetowych (MDN) zawiera interfejs API o nazwie Elementy niestandardowe. Ten interfejs API obsługuje dynamiczną rejestrację elementów niestandardowych za pomocą JavaScript.

Przed załadowaniem biblioteki md-block ta strona będzie renderowana w znany sposób:

Oczywiście możesz nadać styl elementowi md-block, aby wyglądał bardziej jak w edytorze tekstu. Dzięki wstępnie sformatowanym białym znakom i czcionce o stałej szerokości, czytanie jest przynajmniej trochę łatwiejsze:

<styl>md-block { spacja: pre; rodzina czcionek: monospace; }</style>

Możesz chcieć tego rodzaju danych wyjściowych, jeśli piszesz samouczek na temat Markdown. Pozwala wyjaśnić składnię Markdown, jednocześnie umożliwiając łatwą edycję przykładowego Markdowna:

Ale sztuczka md-block polega na przekonwertowaniu tego Markdowna na ostateczny kod HTML.

Nawet przy domyślnych stylach przeglądarki treść jest teraz wyświetlana tak jak zwykły kod HTML, nawet jeśli wysłałeś ją do przeglądarki jako Markdown:

Jak korzystać z md-block

Po dodaniu biblioteki md-block do swojej strony możesz napisać swoją Markdown w md-blok elementy. Biblioteka automatycznie sformatuje Twój Markdown i będziesz mógł kontynuować osadzanie Markdown zgodnie z potrzebami.

Istnieje jednak kilka wariantów tego procesu.

Pobierz skrypt zdalnie lub zainstaluj go samodzielnie

Najłatwiejszym sposobem na rozpoczęcie jest odwołanie się do biblioteki z oficjalnej strony md-block:

<typ skryptu="moduł" src="https://md-block.verou.me/md-block.js"></script>

To może nie jest najskuteczniejsze podejście, ale zdecydowanie najszybsze. Po prostu dodaj ten kod do swojego głowa a Twoja strona automatycznie wyrenderuje wszystko w elemencie md-block do HTML:

Możesz oczywiście pobrać ten plik JavaScript i umieścić go we własnej witrynie. Lub możesz zainstalować go przez npm:

npm zainstalować md-blok

Bloki przeceny a Wbudowana przecena

Domyślnym elementem, nazwanym tak jak sama biblioteka, jest md-blok. Ale możesz również użyć md-span element do wbudowanego Markdowna, taki jak tekst w środku zdania:

Przypadek użycia wbudowanego Markdowna jest prawdopodobnie mniej powszechny, ale mimo to możesz go użyć:

<p>Akapit HTML zawierający <md-span>*italski*</md-span> tekst.</p>

Jak podświetlić składnię bloków kodu Markdown za pomocą pryzmatu?

Pryzmat to wyróżnienie składni, które współtworzyła Lea Verou, twórca md-block. Możesz go użyć do podświetlenia wstępnie sformatowanych bloków kodu na stronie internetowej, w tym tych, które generuje md-block.

Tak więc za pomocą tego kodu HTML:

<html>
<ciało>
<md-blok>
``skrypt java
funkcjonowaćkwadrat(numer) {
zwrócić liczba * liczba;
}
```
</md-block>
<źródło skryptu="prism.js"></script>
</body>
</html>

Zobaczysz ładnie sformatowany kod z wyróżnianiem składniowym:

Twoje możliwości pisania online właśnie wzrosły

Sposób korzystania z md-block zależy od Ciebie, ale istnieje wiele możliwości wykorzystania innowacyjnych rozwiązań. Możesz go użyć do uruchomienia bardzo lekkiego CMS dla pisarzy, którzy pewnie używają języka Markdown, ale nie HTML.

Markdown to idealny język dla szerokiej publiczności. Jego przyjęcie przez narzędzia takie jak Slack najprawdopodobniej jeszcze bardziej zwiększy użycie.