Verwendung von Markdown in der Webentwicklung

Sep 13, 2025

wie man

Als Webentwickler und Content-Creatoren verbringen wir in der Regel viel Zeit damit, Text zu schreiben, der in eingewickelt ist Html. Code. Was ist, wenn wir Ihnen sagen, dass es einen besseren Weg gibt, es mit Markdown zu tun? Ein Weg, in dem Sie sich auf das Schreiben und nicht auf den Code konzentrieren konnten?

Markdown ist ein einfacher Text, leichte Markup-Sprache, das 2004 von John Gruber und Aaron Swarz entwickelt wurde. Ursprünglich erstellt, um das Schreiben von XHTML / HTML einfacher durch Umwandeln von Klartextdateien in strukturell gültiges HTML oder XHTML zu erstellen, kann Markdown für fast jede Art von Schreiben verwendet werden: Manuskripte, Tutorials, Notizen, Webinhalte und mehr.

Obwohl relativ unkompliziert, kann Markdown ein bisschen einschüchternd sein, wenn Sie zum ersten Mal beginnen. Sobald Sie den Hang davon bekommen, erkennen Sie schnell, wie viel Zeit mit dem Formatieren Ihres Codes ausgegeben wurde, anstatt Ihren Inhalt zu tippen.

01. Wählen Sie einen Markdown-Editor aus

Wenn Sie mit dem Markdown für das Web arbeiten, ist es wichtig, die grundlegende Syntax und Einschränkungen zu verstehen, die Sie konfrontieren können. Bevor Sie beginnen, benötigen Sie eine Art Editor und einen Dolmetscher für Ihre Site. Alternativ können Sie den Markdown vor der Veröffentlichung konvertieren.

You'll need some kind of editor to get started — Sie brauchen eine Art Herausgeber, um zu beginnen

Es gibt mehrere Redakteure, aus denen Sie wählen können. Inbegriff ist großartig, da es ein breites Spektrum an Exportoptionen bietet, einschließlich HTML und PDF. Eine weitere großartige Alternative ist Stackedit. - ein kostenloser, Online-Markierungsprogramm. Natürlich funktioniert jeder Klartext-Editor.

Jetpack is handy for use with WordPress — Jetpack ist praktisch für den Einsatz mit WordPress

Wenn Sie nicht planen, Ihren Markdown in HTML zu konvertieren, können Sie ein Plugin (oder einen Unterbrecher) für Ihre Website erhalten. Für WordPress, Jetpack. Hat eine hervorragende Unterstützung für Markdown, mit der Sie das Markdown direkt in Beiträgen und Kommentaren verwenden können - solange Sie diese Option aktivieren.

Wie jede Markup-Sprache verfügt Markdown über eine eigene Syntax. HINWEIS: Es gibt verschiedene Aromen oder Markdown-Sorten. In diesem Artikel decken wir nur die allgemein gemeinsam genutzte Syntax ab.

02. Rubriken einrichten

In HTML gibt es sechs Überschriftenstile: H1. , H2. , H3. , H4. , H5. und h6. . Um diese in Markdown neu zu erstellen, verwenden Sie eine Reihe von Hashtag-Symbolen ( # ) - Entsprechend der Rubrikummer - gefolgt vom Kurstext. Um beispielsweise ein zu erstellen & lt; H1 & GT; Tag, verwenden Sie einen Hashtag # ; für ein & lt; H2 & GT; Tag, verwenden Sie zwei Hashtags ## ; und so weiter und so fort.

Markdown-Eingabe:

 # Rubrik 1
## Rubrik 2.
### Rubrik 3.
#### Überschrift 4
##### Überschrift 5.
###### Rubrik 6

HTML-Ausgabe:

 & lt; H1 & GT; Position 1 & lt; / h1 & gt;
& lt; H2 & GT; Rubrik 2 & lt; / h2 & gt;
& lt; H3 & GT; Rubrik 3 & lt; / h3 & gt;
& lt; H4 & GT; Position 4 & lt; / h4 & gt;
& lt; H5 & GT; Rubrik 5 & lt; / h5 & gt;
& lt; H6 & GT; Rubrik 6 & lt; / h6 & gt;

03. Absätze markieren

Absätze werden durch die dargestellt & lt; p & gt; Tag in HTML. Im Markown sind sie durch eine oder mehrere leere Linien getrennt. Wie HTML wird Whitespace ignoriert. Wenn Sie also 20 leere Linien hinzufügen, werden Sie immer noch nur einen Absatz haben.

Markdown-Eingabe:

 Der schnelle braune Fuchs springt über den faulen Hund.
Der faule Hund ist egal, weil er ein fauler Hund ist.

HTML-Ausgabe:

 & lt; p & gt; der schnelle braune Fuchs springt über den faulen Hund. & Lt; / p & gt;
& lt; p & gt; der faule Hund ist egal, weil er ein fauler Hund ist. & lt; / p & gt;

04. Stil die Linie bricht

Zeilenumbrüche, die in HTML mit der & lt; br & gt; Tag, werden mit einem einzigen Zeilenumbruch mit zwei Leerzeichen am Ende der vorherigen Zeile hinzugefügt.

Markdown-Eingabe:

 der schnelle braune Fuchs
springt über den faulen Hund.

HTML-Ausgabe:

 & lt; P & Gt; der schnelle braune Fuchs & lt; br & gt; springt über den faulen Hund. & Lt; / p & gt;

05. Schwerpunkt markieren.

Es gibt zwei Möglichkeiten, den Schwerpunkt auf Ihren Text hinzugefügt: Italic ( & lt; em & gt; in HTML) oder fett ( & lt; stark & gt; in HTML).

In Markdown erfüllen Sie dies mit einem oder zwei Sternchen ( * ). Sie können auch Unterstriche (_) verwenden, aber ich stehe bei Asterisks, da es andere Markdown-Aromen gibt, die Unterstriche für andere Dinge verwenden.

Markdown-Eingabe:

 * Italischer Text *
** Fettdruck ** **

HTML-Ausgabe:

 & lt; em & gt; italic text & lt; / em & gt;
& lt; stark & gt; mutiger text & lt; / strong & gt;

HINWEIS: Sie können auch kühnhaltigen Text mit drei Sternchen erstellen: *** Fett- und kursive Text *** .

06. Erstellen Sie horizontale Regeln

Eine horizontale Regel erstellen (oder & lt; hr & gt; In HTML) verwenden Sie eine Reihe von drei oder mehr Bindestrichen ( --- ), Sternchen ( *** ) oder gleiche Zeichen ( ===. ). Es ist Ihre Wahl, welche Sie bevorzugen, aber stellen Sie einfach sicher, dass Sie eine leere Linie oben und unten aufnehmen.

Markdown-Eingabe:

 etwas Neues lernen ist immer viel Spaß.

---

Es ist sicher!

HTML-Ausgabe:

 & lt; p & gt; etwas Neues lernt, macht immer viel Spaß. & Lt; / p & gt;
& lt; hr & gt;
& lt; p & gt; es ist sicher! & lt; / p & gt;

07. Fügen Sie Bildern und Links hinzu

In HTML wird ein Bild mit dem hinzugefügt & lt; img & gt; Tag und Links werden mit dem hinzugefügt & lt; A & gt; Etikett.

Im Markdown beginnen Bilder mit einem Ausrufezeichen ( Schnitte ), gefolgt von eckigen Klammern ( [] ) für den "Alt Text" und Klammern ( () ) für den Pfad zum Bild. Sie können auch einen optionalen Titel in Doppelzitate aufnehmen ( "" ).

Mit Links ist es fast gleich, es sei denn, es gibt keinen Ausrufezeichen.

Markdown-Eingabe:

! [Alt Text] (/ Pfad / nach bild.jpg "Optionaler Titel")
[Link Text] (http://example.com "Optionaler Titel")

Hinweis: Sie können auch Referenzlinks und Bilder verwenden, aber das ist hier nicht abgedeckt.

HTML-Ausgabe:

 & lt; img src = "/ path / to / bild.jpg" Alt = "Alt Text" Titel = "Optionaler Titel" / & gt;
& lt; a href = "http://example.com" Titel = "Optionaler Titel" & GT; Link Text & lt; / a & gt;

08. Machen Sie Listen

Es gibt zwei Arten von Listen in HTML: bestellt ( & lt; ol & gt; ) und ungeordnete ( & lt; ul & gt; ). Verwenden Sie mit Markdown Nummern für Bestelllisten und Asterisks ( * ) oder Bindestriche ( - ) für ungeordnete Listen.

Markdown-Eingabe:

 1. Gegenstand 1
2. Punkt 2.
* Erster Gegenstand
* Zweiter Punkt
- Erster Gegenstand
- Zweiter Punkt

HTML-Ausgabe:

 & lt; ol & gt;
& lt; li & gt; Artikel 1 & lt; / li & gt;
& lt; li & gt; Artikel 2 & lt; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& lt; li & gt; erster artikel & lt; / li & gt;
& lt; li & gt; zweiter Punkt & lt; / li & gt;
& lt; / ul & gt;
& lt; ul & gt;
& lt; li & gt; erster artikel & lt; / li & gt;
& lt; li & gt; zweiter Punkt & lt; / li & gt;
& lt; / ul & gt;

09. Inline-Code und Codeblöcke hinzufügen

Wenn Sie mit dem Code in HTML arbeiten, können Sie ihn entweder als Inline-Element mit der & lt; Code & GT; Stichworte; oder als vorformatierter Textblock mit der & lt; Pre & gt; & lt; Code & GT; Kombination.

Beim Markdown werden diese Elemente mit einem einzigen BackTick auf jeder Seite entschieden ( ` ); oder mit einem eingezäunten Stil, der drei Backticks über und unter dem Codeblock enthält ( ``` ).

Markdown-Eingabe:

 Die Variable "Numberofoint" enthält die Punktzahl des Spielers.
Wenn spieler.win {
NumberOfpoints + = 1
}

HTML-Ausgabe:

 Die & lt; Codes & GT; Numberofocken & lt; / codig & gt; Variable hält die Punktzahl des Spielers.
& lt; Pre & gt; & lt; Code & GT;
Wenn spieler.win {
NumberOfpoints + = 1
}
& lt; / pre & gt; & lt; / code & gt;

10. Style blockquotes

Blockquoten werden in HTML hinzugefügt, mit dem & lt; blockquote & gt; Etikett. Verwenden Sie im Markdown das größere Symbol ( & gt; ) vor der Linie.

Markdown-Eingabe:

 & gt; Das ist meine Blockqualität.
& gt;
& gt; Dies ist Teil derselben Blockqualität.
& gt; Dies ist eine neue Blockqualität.

HTML-Ausgabe:

 & lt; blockquote & gt;
& lt; p & gt; das ist meine Blockqualität. & lt; / p & gt;
& lt; br & gt;
& lt; p & gt; Dies ist ein Teil derselben Blockqualität. & lt; / p & gt;
& lt; / blockquote & gt;
& lt; blockquote & gt;
& lt; p & gt; das ist eine neue Blockqualität. & lt; / p & gt;
& lt; / blockquote & gt;

11. Inline-HTML einbetten

Es gibt Zeiten, in denen Sie ein HTML-Element erstellen müssen, das nicht unterstützt wird. Zum Beispiel brauchen Sie möglicherweise eine & lt; tabelle & gt; oder & lt; div & gt; Etikett.

Wenn dies der Fall ist, können Sie Markdown und HTML mischen, es gibt jedoch einige Einschränkungen. Beispielsweise können Sie den Markdown nicht in Block-Level-HTML-Tags enthalten.

Weiterlesen:

20 Node.js-Module, die Sie kennen müssen
12 Häufige Javascript-Fragen beantwortet
9 der besten Ressourcen zum Lernen von HTML und CSS

Verwendung von Markdown in der Webentwicklung

01. Wählen Sie einen Markdown-Editor aus

02. Rubriken einrichten

03. Absätze markieren

04. Stil die Linie bricht

05. Schwerpunkt markieren.

06. Erstellen Sie horizontale Regeln

07. Fügen Sie Bildern und Links hinzu

08. Machen Sie Listen

09. Inline-Code und Codeblöcke hinzufügen

10. Style blockquotes

11. Inline-HTML einbetten

wie man - Die beliebtesten Artikel

Verwenden Sie brain.js, um ein neuronales Netzwerk zu bauen

Chiaroscuro-Kunst: ein Schritt-für-Schritt-Guide

Beginnen Sie mit Babel 7

10 Tipps zum Moderning von Apple's Photos App

4 Tipps zur Verbesserung der Leistung Ihrer Seite

Modell Eine Alien-Piraten-Kreatur in Zbrush

So malen Sie ein atmosphärisches Porträt in Photoshop

Zeichnen Sie genaue Knochen und Muskeln

Kategorien