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 Angular verwenden, 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>
<head>...</head><body>
<md-block>
# Heading
Some *embedded* Markdown which `md-block` can convert for you!
</md-block>
</body>
</html>
Es ist eine gute Idee, Ihren eingebetteten Markdown-Code ohne führenden Einzug linksbündig 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 Teil des HTML-Standards ist, ist dies 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:
<style>md-block { white-space: pre; font-family: 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:
<script type="module" src="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 install md-blockMarkdown-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>An HTML paragraph containing <md-span>*italic*</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>
<body>
<md-block>
```javascript
function square(number) {
return number * number;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>Sie sehen schön formatierten Code mit syntaktisch bewusster Hervorhebung:
Ihre Optionen 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.
