Verwendung von Markdown in der Webentwicklung

Derick Mosley
Wie Man

Als Webentwickler und Ersteller von Inhalten verbringen wir im Allgemeinen viel Zeit damit, Text zu schreiben, der darin verpackt ist HTML Code. Was wäre, wenn wir Ihnen sagen würden, dass es mit Markdown einen besseren Weg gibt? Eine Art und Weise, wie Sie sich auf das Schreiben und nicht auf den Code konzentrieren konnten?

Markdown ist eine einfache, leichtgewichtige Markup-Sprache, die 2004 von John Gruber und Aaron Swartz entwickelt wurde. Markdown wurde ursprünglich entwickelt, um das Schreiben von XHTML / HTML durch Konvertieren von Nur-Text-Dateien in strukturell gültiges HTML oder XHTML zu vereinfachen. Es kann für fast alle Arten des Schreibens verwendet werden: Manuskripte, Tutorials, Notizen, Webinhalte und mehr.



Obwohl Markdown relativ einfach ist, kann es beim ersten Start ein wenig einschüchternd sein. Sobald Sie den Dreh raus haben, werden Sie schnell feststellen, wie viel Zeit für die Formatierung Ihres Codes aufgewendet wurde, anstatt Ihre Inhalte einzugeben.



01. Wählen Sie einen Markdown-Editor

Wenn Sie mit Markdown für das Web arbeiten, ist es wichtig, die grundlegende Syntax und die Einschränkungen zu kennen, mit denen Sie möglicherweise konfrontiert sind. Bevor Sie beginnen, benötigen Sie einen Editor und einen Interpreter für Ihre Site. Alternativ können Sie den Markdown vor dem Veröffentlichen konvertieren.

Sie



Sie benötigen eine Art Editor, um loszulegen

Es gibt mehrere Editoren, aus denen Sie auswählen können. Inbegriff ist fantastisch, weil es eine Vielzahl von Exportoptionen bietet, einschließlich HTML und PDF. Eine weitere gute Alternative ist StackEdit - ein kostenloser Online-Markdown-Editor. Natürlich funktioniert jeder Nur-Text-Editor.

Jetpack ist praktisch für die Verwendung mit WordPress

Wie installiere ich Adobe Premiere Pro?
Jetpack ist praktisch für die Verwendung mit WordPress

Wenn Sie nicht vorhaben, Ihren Markdown in HTML zu konvertieren, können Sie ein Plugin (oder einen Unterbrecher) für Ihre Site herunterladen. Für WordPress Jetpack Markdown wird hervorragend unterstützt, sodass Sie Markdown direkt in Posts und Kommentaren verwenden können - sofern Sie diese Option aktivieren.



Wie jede Markup-Sprache hat Markdown eine eigene Syntax. Hinweis: Es gibt verschiedene Geschmacksrichtungen oder Sorten von Markdown. In diesem Artikel wird nur die gemeinsam genutzte Syntax behandelt.

02. Überschriften einrichten

In HTML gibt es sechs Überschriftenstile: h1 , h2 , h3 , h4 , h5 und h6 . Verwenden Sie eine Reihe von Hashtag-Symbolen, um diese in Markdown neu zu erstellen ( # ) - entsprechend der Überschriftennummer - gefolgt vom Überschriftentext. Zum Beispiel, um eine zu erstellen

Tag, verwenden Sie einen Hashtag # ;; für ein

Tag, verwenden Sie zwei Hashtags ## ;; und so weiter und so fort.

Markdown-Eingabe:

# Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6

HTML-Ausgabe:



Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

03. Markieren Sie Absätze

Absätze werden durch die vertreten

Markdown-Eingabe:

The quick brown fox jumps over the lazy dog. The lazy dog doesn't care, because he's a lazy dog.

HTML-Ausgabe:



The quick brown fox jumps over the lazy dog.



The lazy dog doesn't care, because he's a lazy dog.

04. Gestalten Sie die Zeilenumbrüche

Zeilenumbrüche, die in HTML mit dem dargestellt werden
Tag, werden mit einem einzelnen Zeilenumbruch mit zwei Leerzeichen am Ende der vorherigen Zeile hinzugefügt.



Markdown-Eingabe:

The quick brown fox jumps over the lazy dog.

HTML-Ausgabe:

The quick brown fox
jumps over the lazy dog.



05. Betonung markieren

Es gibt zwei Möglichkeiten, Ihren Text hervorzuheben: Kursiv ( in HTML) oder Fett ( in HTML).

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

Markdown-Eingabe:

*Italic Text* **Bold Text**

HTML-Ausgabe:

Italic Text Bold Text

Hinweis: Sie können auch fett-kursiven Text mit drei Sternchen erstellen: *** Fett und kursiv *** .

06. Erstellen Sie horizontale Regeln

So erstellen Sie eine horizontale Regel (oder

Verwenden Sie in HTML eine Reihe von drei oder mehr Bindestrichen ( --- ---. ), Sternchen ( ***. ) oder Gleichheitszeichen ( === ). Sie haben die Wahl, welche Sie bevorzugen, aber stellen Sie sicher, dass Sie oben und unten eine leere Zeile einfügen.

Markdown-Eingabe:

Learning something new is always a lot of fun. --- It sure is!

HTML-Ausgabe:

beste Digitalkamera für die Kunstfotografie

Learning something new is always a lot fun.

It sure is!

In HTML wird ein Bild mit dem hinzugefügt Tag und Links werden mit dem hinzugefügt Etikett.

In Markdown beginnen Bilder mit einem Ausrufezeichen ( ! ), 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 doppelte Anführungszeichen setzen ( '' ).

Bei Links ist es fast dasselbe, außer dass es kein Ausrufezeichen gibt.

wie man alle Fotos auf Facebook privat macht

Markdown-Eingabe:

![Alt Text](img/ 'Optional Title') [Link Text](http://example.com 'Optional Title')

Hinweis: Sie können auch Referenzlinks und Bilder verwenden, dies wird hier jedoch nicht behandelt.

HTML-Ausgabe:

Link Text

08. Listen erstellen

In HTML gibt es zwei Arten von Listen: geordnet (

    ) und ungeordnet (