Boilerplates & andere Tools

Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown

16. Januar 2013

Sublime Text 2 hat sich im letzten Jahr zum Lieblingseditor vieler Webentwickler gemausert. Dieser Beitrag zeigt, dass Sublime nicht nur für Code, sondern auch zum Schreiben von Webtexten geeignet ist. Idealer Partner ist dabei das in 2004 von John Gruber entwickelte Markdown.

Sublime – Markdown: Zwischen Text und HTML

Markdown vereinfacht Autoren das Schreiben von Texten für das Web und steht zwischen reinem Text und HTML. Im Gegensatz zu reinem Text kann man mit Markdown Überschriften, Zitate, Links und so weiter auszeichnen. Das geht mit HTML natürlich auch, aber Markdown ist einfacher zu schreiben und vor allem besser lesbar. Hier ein paar Beispiele:

  • Überschriften beginnen mit einer Raute: # wird zu h1, ## zu h2 und so weiter.
  • Hervorhebungen sind von *Sternchen* umgeben
  • Zitate haben wie in Text-Mails ein > am Anfang der Zeile

Markdown-Erfinder John Gruber hat eine Syntax-Übersicht veröffentlicht und es gibt auch eine deutsche Übersetzung. Zum Üben der Markdown-Syntax ist übrigens das Online-Tool Dingus echt gut: Markdown schreiben, per Klick in HTML konvertieren und direkt darunter das Ergebnis anschauen.

In Schreibwerkzeugen wie dem iA Writer findet Markdown inzwischen ebenso Verwendung wie im Web. Online-Communities wie Google+, Github, Reddit oder Stack Overflow benutzen zur Formatierung der Beiträge Abwandlungen von Markdown.

Und auch für Sublime Text gibt es ein paar sehr nützliche Markdown-Plugins, die den Editor zu einem richtig guten Prosa-Schreibwerkzeug werden lassen.

MarkdownEditing: Markdown in Sublime Text 2

Man kann in Sublime natürlich wie in jedem anderem Text-Editor auch völlig ohne zusätzliche Werkzeuge ganz normales Markdown schreiben, aber bequemer wird die Sache mit ein paar nützlichen Plugins, allen voran MarkdownEditing.

Am einfachsten ist die Installation über den Package Manager von Sublime. Falls das nicht funktioniert, einfach das ZIP-Paket von Github downloaden, entpacken und in den Ordner /packages/ kopieren. Wo genau der auf Ihrer Festplatte liegt, finden Sie über Preferences - Browse Packages... heraus.

Nach der Installation ist das Plugin automatisch für alle Dateien mit der Endung .md zuständig und sobald Sie eine Markdown-Datei öffnen, sieht Sublime völlig anders aus als vorher:

  • der Hintergrund wird hell und der Cursor hellblau (iA Writer lässt grüßen)
  • Markdown-Auszeichnungen werden zum Teil formatiert
  • es gibt ein Highlighting für die Markdown-Syntax
  • der Text steht in der Mitte des Editorfensters
  • Zeilen werden bei 70 Zeichen automatisch umgebrochen.
Das Sublime-Plugin MarkdownEditing

Das Sublime-Plugin MarkdownEditing mit den Standardeinstellungen

Die genauen Einstellungen des Plugins finden Sie unter Preferences - Package Settings - MarkdownEditing. Besonders im Distraction Free Mode aus dem Menü View lässt es sich so gut arbeiten.

Aber MarkdownEditing sieht nicht nur gut aus, sondern macht das Arbeiten mit Markdown-Dateien mit Syntax-Highlighting sehr viel bequemer und öffnende Klammern werden automatisch geschlossen. Unter OS X wird auch die Erstellung von Links zum Kinderspiel: URL in die Zwischenablage kopieren, Gewünschten Linktext markieren, URL per CMD-ALT-V aus der Zwischenablage einfügen.

Fertig ist der Markdown-Link. Eine Liste der aktuellen Features von MarkdownEditing finden Sie auf der Projektseite bei Github.

Markdown als HTML in der Zwischenablage und im Browser

Die perfekte Ergänzung zu MarkdownEditing sind die beiden folgenden Plugins:

  • Markdown to Clipboard fügt dem Kontextmenü im Editorfenster den Befehl Copy Markdown as HTML hinzu. Dieses HTML kann man dann in den WordPress-Editor oder in einem anderen Sublime-Fenster einfügen und bei Bedarf verfeinern. Das Plugin kann auch über den Package Manager installiert werden, auch wenn das in dem verlinkten Blogbeitrag nicht erwähnt wird.
  • OmniMarkupPreviewer schickt die geöffnete Markdown-Datei als HTML an den Browser. Im Kontextmenü wird dazu der Befehl Preview Current File in Browser hinzugefügt. Das Tastenkürzel ist auf dem MAC CMD+Alt+O (wie Oh, keine Null). Unter Windows mit CTRL statt CMD.

OmnimarkupPreview - Markdown als HTML-Vorschau im Browser

HTML-Vorschau im Browser – OmnimarkupPreview in Aktion

Weitere nützliche Plugins zum Schreiben von Texten in Sublime sind zum Beispiel SmartMarkdown, mit dem man Textpassagen einfach aus- und wieder einblenden kann, oder WordCount, das genau das tut was der Name andeutet.

Fazit: Sublime Text wird durch ein paar Markdown-Plugins zu einem richtig komfortablen Schreibwerkzeug für Webworker. Und das ist insbesondere auf der Windows-Plattform keine Selbstverständlichkeit.

(dpe)

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 "Websites erstellen mit Contao 3", "Flexible Boxes" oder "Einstieg in CSS" (aka "das neue Little Boxes").

Tags: , , ,

Kommentar hinzufügen

Diese E-Mail ist schon registriert. Bitte benutzen Sie die Login-Form oder geben Sie andere ein.

Sie haben nicht korrektes Login und Passwort eingegeben

Entschuldigen, aber Sie müssen zugriffen, um das Kommentar zu schreiben.

8 Kommentare

chronologisch
nach der Bewertung zuerst neue chronologisch
1

den editor werde ich mir mal ansehen.

was mir aber aufgefallen ist. und nicht zum ersten mal und nicht nur hier.

der artikel geht um eine software, aber genau das ist nicht zum hersteller verlinkt.

die addons und andere quellen sind brav verlinkt.



ist das absicht, damit die suche benutzt wird? oder hofft ihr, dass einer der relevanten artikel eklickt wird, weil der leser hofft, da einen link zu finden?

Autor2

Du hast Recht, den Link hätte man einbauen können. Aber ich dachte ehrlich gesagt, dass der Artikel in erster Linie für Leute interessant ist, die Sublime schon nutzen.



However, here it comes:



http://www.sublimetext.com/



Viel Spaß beim Ausprobieren. Ist übrigens auch zum Coden wirklich gut ;-)

3

Danke für den tollen Artikel. Die Plug-Ins machen das ganze viel angenehmer. Sublime ist ein Traum für alle Plattformen.

4

Der Editor sieht interessant aus. Darauf könnte man noch bisschen näher eingehen. Such schon lange nach einer Alternative. Notepad++ kann auch nicht alles.

5

Also ganz ehrlich, der Editor ist Hammer. Vielen Dank das ihr mich darauf gebracht habt. Ich hab mir mal auszugsweise ein Tutorial Video auf Youtube angeschaut. Das Teil kann einiges was ich in anderen Editoren noch nie so in der Form gesehen hab.

6

Hi Peter,



der Artikel war sehr hilfreich! Danke fürs Posten! :-)



Kleine Anmerkung: Das Paket markdowntoclipboard jippet nit mehr ... was SEHR schade ist! Weißt du einen brauchbaren Ersatz?

8

Hallo Peter!



Vielleicht kannst du mir weiter helfen, da ich leider im Netz nicht fündig wurde.



Ist es möglich aus ST3 heraus eine PHP-Datei so zu öffnen, dass die URL mit "localhost/" beginnt?



Ich hab es schon geschafft, dass ich die Seite in den verschiedenen Browsern öffnen kann, aber ich muß bei PHP immer händisch die URL ändern. Das sollte doch zu ändern sein.



Folgende Datei habe ich dafür geändert: "Side Bar.sublime-menu"



LG

Wolfi