Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Peter Müller 16. Januar 2013

Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown

Das Sublime-Plugin MarkdownEditing

Sublime Text 2 hat sich im letz­ten Jahr zum Lieblingseditor vie­ler Webentwickler gemau­sert. Dieser Beitrag zeigt, dass Sublime nicht nur für Code, son­dern auch zum Schreiben von Webtexten geeig­net ist. Idealer Partner ist dabei das in 2004 von John Gruber ent­wi­ckel­te Markdown.

Sublime – Markdown: Zwischen Text und HTML

Markdown ver­ein­facht Autoren das Schreiben von Texten für das Web und steht zwi­schen rei­nem Text und HTML. Im Gegensatz zu rei­nem Text kann man mit Markdown Überschriften, Zitate, Links und so wei­ter aus­zeich­nen. Das geht mit HTML natür­lich auch, aber Markdown ist ein­fa­cher zu schrei­ben und vor allem bes­ser les­bar. Hier ein paar Beispiele:

  • Überschriften begin­nen mit einer Raute: # wird zu h1, ## zu h2 und so wei­ter.
  • Hervorhebungen sind von *Sternchen* umge­ben
  • Zitate haben wie in Text-Mails ein > am Anfang der Zeile

Markdown-Erfinder John Gruber hat eine Syntax-Übersicht ver­öf­fent­licht und es gibt auch eine deut­sche Übersetzung. Zum Üben der Markdown-Syntax ist übri­gens das Online-Tool Dingus echt gut: Markdown schrei­ben, per Klick in HTML kon­ver­tie­ren und direkt dar­un­ter das Ergebnis anschau­en.

In Schreibwerkzeugen wie dem iA Writer fin­det Markdown inzwi­schen eben­so Verwendung wie im Web. Online-Communities wie Google+, Github, Reddit oder Stack Overflow benut­zen zur Formatierung der Beiträge Abwandlungen von Markdown.

Und auch für Sublime Text gibt es ein paar sehr nütz­li­che Markdown-Plugins, die den Editor zu einem rich­tig guten Prosa-Schreibwerkzeug wer­den las­sen.

MarkdownEditing: Markdown in Sublime Text 2

Man kann in Sublime natür­lich wie in jedem ande­rem Text-Editor auch völ­lig ohne zusätz­li­che Werkzeuge ganz nor­ma­les Markdown schrei­ben, aber beque­mer wird die Sache mit ein paar nütz­li­chen Plugins, allen vor­an MarkdownEditing.

Am ein­fachs­ten ist die Installation über den Package Manager von Sublime. Falls das nicht funk­tio­niert, ein­fach das ZIP-Paket von Github down­loa­den, ent­pa­cken und in den Ordner /packages/ kopie­ren. Wo genau der auf Ihrer Festplatte liegt, fin­den Sie über Preferences - Browse Packages... her­aus.

Nach der Installation ist das Plugin auto­ma­tisch für alle Dateien mit der Endung .md zustän­dig und sobald Sie eine Markdown-Datei öff­nen, sieht Sublime völ­lig anders aus als vor­her:

  • der Hintergrund wird hell und der Cursor hell­blau (iA Writer lässt grü­ßen)
  • Markdown-Auszeichnungen wer­den zum Teil for­ma­tiert
  • es gibt ein Highlighting für die Markdown-Syntax
  • der Text steht in der Mitte des Editorfensters
  • Zeilen wer­den bei 70 Zeichen auto­ma­tisch umge­bro­chen.
Das Sublime-Plugin MarkdownEditing

Das Sublime-Plugin MarkdownEditing mit den Standardeinstellungen

Die genau­en Einstellungen des Plugins fin­den Sie unter Preferences - Package Settings - MarkdownEditing. Besonders im Distraction Free Mode aus dem Menü View lässt es sich so gut arbei­ten.

Aber MarkdownEditing sieht nicht nur gut aus, son­dern macht das Arbeiten mit Markdown-Dateien mit Syntax-Highlighting sehr viel beque­mer und öff­nen­de Klammern wer­den auto­ma­tisch geschlos­sen. Unter OS X wird auch die Erstellung von Links zum Kinderspiel: URL in die Zwischenablage kopie­ren, Gewünschten Linktext mar­kie­ren, URL per CMD-ALT-V aus der Zwischenablage ein­fü­gen.

Fertig ist der Markdown-Link. Eine Liste der aktu­el­len Features von MarkdownEditing fin­den Sie auf der Projektseite bei Github.

Markdown als HTML in der Zwischenablage und im Browser

Die per­fek­te Ergänzung zu MarkdownEditing sind die bei­den fol­gen­den Plugins:

  • Markdown to Clipboard fügt dem Kontextmenü im Editorfenster den Befehl Copy Markdown as HTML hin­zu. Dieses HTML kann man dann in den WordPress-Editor oder in einem ande­ren Sublime-Fenster ein­fü­gen und bei Bedarf ver­fei­nern. Das Plugin kann auch über den Package Manager instal­liert wer­den, auch wenn das in dem ver­link­ten Blogbeitrag nicht erwähnt wird.
  • OmniMarkupPreviewer schickt die geöff­ne­te Markdown-Datei als HTML an den Browser. Im Kontextmenü wird dazu der Befehl Preview Current File in Browser hin­zu­ge­fügt. Das Tastenkürzel ist auf dem MAC CMD+Alt+O (wie Oh, kei­ne Null). Unter Windows mit CTRL statt CMD.

OmnimarkupPreview - Markdown als HTML-Vorschau im Browser

HTML-Vorschau im Browser – OmnimarkupPreview in Aktion

Weitere nütz­li­che Plugins zum Schreiben von Texten in Sublime sind zum Beispiel SmartMarkdown, mit dem man Textpassagen ein­fach aus- und wie­der ein­blen­den kann, oder WordCount, das genau das tut was der Name andeu­tet.

Fazit: Sublime Text wird durch ein paar Markdown-Plugins zu einem rich­tig kom­for­ta­blen Schreibwerkzeug für Webworker. Und das ist ins­be­son­de­re auf der Windows-Plattform kei­ne Selbstverständlichkeit.

(dpe)

Peter Müller

Peter Müller

Ich bin Autor, Dozent und Webworker. Meine Spezialität ist es, komplizierte und 'trockene' Sachverhalte auf einfache und unterhaltende Weise darzustellen. Sie kennen mich vielleicht durch meine Bücher wie "Einstieg in WordPress", "Flexible Boxes" oder "Einstieg in CSS".

11 Kommentare

  1. Hallo Peter!

    Vielleicht kannst du mir wei­ter hel­fen, da ich lei­der im Netz nicht fün­dig wur­de.

    Ist es mög­lich aus ST3 her­aus eine PHP-Datei so zu öff­nen, dass die URL mit “localhost/” beginnt?

    Ich hab es schon geschafft, dass ich die Seite in den ver­schie­de­nen Browsern öff­nen kann, aber ich muß bei PHP immer hän­disch die URL ändern. Das soll­te doch zu ändern sein.

    Folgende Datei habe ich dafür geän­dert: “Side Bar.sublime-menu”

    LG
    Wolfi

  2. Hi Peter,

    der Artikel war sehr hilf­reich! Danke fürs Posten! :-)

    Kleine Anmerkung: Das Paket mark­down­to­clip­board jip­pet nit mehr … was SEHR scha­de ist! Weißt du einen brauch­ba­ren Ersatz?

  3. Der Editor sieht inter­es­sant aus. Darauf könn­te man noch biss­chen näher ein­ge­hen. Such schon lan­ge nach einer Alternative. Notepad++ kann auch nicht alles.

    • Also ganz ehr­lich, der Editor ist Hammer. Vielen Dank das ihr mich dar­auf gebracht habt. Ich hab mir mal aus­zugs­wei­se ein Tutorial Video auf Youtube ange­schaut. Das Teil kann eini­ges was ich in ande­ren Editoren noch nie so in der Form gese­hen hab.

  4. Danke für den tol­len Artikel. Die Plug-Ins machen das gan­ze viel ange­neh­mer. Sublime ist ein Traum für alle Plattformen.

  5. Du hast Recht, den Link hät­te man ein­bau­en kön­nen. Aber ich dach­te ehr­lich gesagt, dass der Artikel in ers­ter Linie für Leute inter­es­sant ist, die Sublime schon nut­zen.

    However, here it comes:

    http://www.sublimetext.com/

    Viel Spaß beim Ausprobieren. Ist übri­gens auch zum Coden wirk­lich gut ;-)

  6. den edi­tor wer­de ich mir mal anse­hen.
    was mir aber auf­ge­fal­len ist. und nicht zum ers­ten mal und nicht nur hier.
    der arti­kel geht um eine soft­ware, aber genau das ist nicht zum her­stel­ler ver­linkt.
    die addons und ande­re quel­len sind brav ver­linkt.

    ist das absicht, damit die suche benutzt wird? oder hofft ihr, dass einer der rele­van­ten arti­kel eklickt wird, weil der leser hofft, da einen link zu fin­den?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.