Die einfache Syntax von Markdown macht es zu einer hervorragenden Alternative zu HTML. Die Sprache hat schon immer das Einbetten von HTML unterstützt, aber jetzt können Sie den anderen Weg gehen und Markdown in HTML einbetten.

Mit einer einfachen Bibliothek können Sie eingebettetes Markdown in Ihren Webseiten hosten und es im Handumdrehen in richtiges HTML konvertieren lassen.

Was macht md-block?

Ihr aktueller Prozess umfasst möglicherweise das manuelle Erstellen von Markdown-Dateien und das anschließende Konvertieren in HTML. So funktionieren viele moderne CMS-Anwendungen. Oder Sie können ein Framework wie verwenden Angular, um Markdown in Seiten zu rendern.

Die md-block-Bibliothek ist nicht unbedingt eine Alternative; Stattdessen erfüllt es einen etwas anderen Anwendungsfall. Es konvertiert Inline-Markdown in sein entsprechendes HTML. Sie können Markdown in Ihre HTML-Dateien einbetten und auf Anfrage auf dem Client rendern.

So könnte das aussehen:

<html>
<Kopf>...</head>
<Karosserie>
<md-block

>
# Überschrift
Einige *eingebettete* Markdowns, die `md-block` für Sie umwandeln kann!
</md-block>
</body>
</html>

Es ist eine gute Idee, Ihren eingebetteten Markdown-Code ohne führende Einrückung links auszurichten. Dies liegt daran, dass führende Leerzeichen in Markdown im Gegensatz zu HTML von Bedeutung sein können.

Die Bibliothek führt ein eigenes benutzerdefiniertes HTML-Element ein, md-block. Obwohl dieses Element nicht ist Teil des HTML-Standards, dies ist eine gültige Technik. Der Webkomponenten-Standard (MDN) enthält eine API namens Custom Elements. Diese API unterstützt die dynamische Registrierung benutzerdefinierter Elemente mit JavaScript.

Vor dem Laden der md-block-Bibliothek wird diese Seite auf vertraute Weise gerendert:

Natürlich können Sie das md-block-Element so gestalten, dass es eher wie in einem Texteditor aussieht. Mit vorformatierten Leerzeichen und einer Monospace-Schriftart ist es zumindest etwas einfacher zu lesen:

<Stil>md-block {Leerzeichen: pre; Schriftfamilie: Monospace; }</style>

Möglicherweise möchten Sie diese Art von Ausgabe, wenn Sie ein Tutorial zu Markdown schreiben. Es ermöglicht Ihnen, die Markdown-Syntax zu erklären und gleichzeitig Ihr Beispiel-Markdown einfach zu bearbeiten:

Aber der Partytrick von md-block besteht darin, diesen Markdown in endgültiges HTML umzuwandeln.

Selbst mit Standard-Browserstilen wird der Inhalt jetzt wie Ihr reguläres HTML angezeigt, obwohl Sie ihn als Markdown an den Browser gesendet haben:

So verwenden Sie md-block

Sobald Sie die md-Block-Bibliothek zu Ihrer Seite hinzugefügt haben, können Sie Ihren Markdown hineinschreiben md-block Elemente. Die Bibliothek formatiert Ihren Markdown dann automatisch, und Sie können Markdown nach Bedarf einbetten.

Es gibt jedoch einige Variationen dieses Prozesses.

Beziehen Sie das Skript aus der Ferne oder installieren Sie es selbst

Der einfachste Weg, um loszulegen, besteht darin, auf die Bibliothek von der offiziellen md-block-Website zu verweisen:

<Skripttyp="Modul" Quelle="https://md-block.verou.me/md-block.js"></script>

Dies ist vielleicht nicht der effizienteste Ansatz, aber definitiv der schnellste. Fügen Sie einfach diesen Code zu Ihrem hinzu Kopf und Ihre Seite rendert automatisch alles in einem md-block-Element in HTML:

Sie können diese JavaScript-Datei natürlich herunterladen und auf Ihrer eigenen Website hosten. Oder Sie können es über npm installieren:

npm Installieren md-Block

Markdown-Blöcke vs. Inline-Markdown

Das nach der Bibliothek selbst benannte Standardelement ist md-block. Sie können aber auch eine verwenden md-span Element für Inline-Markdown, z. B. Text in der Mitte eines Satzes:

Der Anwendungsfall für Inline-Markdown ist wahrscheinlich weniger verbreitet, aber Sie können ihn trotzdem verwenden:

<p>Ein HTML-Absatz mit <md-span>*kursiv*</md-span> Text.</p>

So markieren Sie Markdown-Code-Blöcke mit Prism syntaktisch

Prisma ist ein Syntax-Highlighter, den Lea Verou, Schöpferin von md-block, mitentwickelt hat. Sie können es verwenden, um vorformatierte Codeblöcke auf einer Webseite hervorzuheben, einschließlich derer, die md-block generiert.

Also mit diesem HTML:

<html>
<Karosserie>
<md-block>
```Javascript
FunktionQuadrat(Nummer) {
Rückkehr Zahl * Zahl;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>

Sie sehen schön formatierten Code mit syntaktisch bewusster Hervorhebung:

Ihre Möglichkeiten zum Online-Schreiben haben sich gerade erhöht

Wie Sie md-block verwenden, liegt ganz bei Ihnen, aber es gibt viel Potenzial für erfinderische Lösungen, die es verwenden. Sie könnten es verwenden, um ein sehr leichtes CMS für Autoren auszuführen, die mit Markdown vertraut sind, aber nicht mit HTML.

Markdown ist eine perfekte Sprache für ein allgemeines Publikum. Die Übernahme durch Tools wie Slack wird die Nutzung höchstwahrscheinlich noch weiter steigern.