Kategorien
Boilerplates & andere Tools Essentials Freebies, Tools und Templates Programmierung

Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown

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)

Kategorien
Boilerplates & andere Tools Essentials Freebies, Tools und Templates Programmierung

Sublime Text 2: Editor nach dem Baukastenprinzip erlaubt flexibles Arbeiten

In den letzten Jahren konnte sich der kommerzielle Editor Sublime Text 2 einer immer größer werdenden Nutzergemeinschaft erfreuen. Und das durchaus zu Recht. Denn gerade für den Freelancer, der oft alleine arbeiten muss, ist der Editor sehr nützlich und bietet einige komfortable Vorteile. Für weniger entscheidungsfreudige Zeitgenossen könnte besonders interessant sein, dass sich Sublime Text 2, obwohl grundsätzlich kostenpflichtig, extrem lange kostenlos testen lässt.

Sublime Text 2
Sublime Text 2

Sublime Text 2 lässt sich generell in jede Entwicklungsumgebung integrieren und für die populärsten Programmier-, Skript- und Auszeichungssprachen verwenden. Dass kommt unter anderem daher, dass Bundles aus TextMate 2 eingebunden werden können. Darüber hinaus hat Sublime Text 2 eine Menge eigene Extensions zu bieten, die das Resultat der Arbeit einer großen Entwickler-Community sind. Der Grund hierfür könnte neben der steigenden Popularität auch die einfache Beschreibungssprache für Erweiterungen sein.

Zu beachten ist aber, dass Sublime Text 2 keine spezielle IDE ist, mit der man sofort loslegen kann, um sich direkt in einer wundervollen Arbeitsumgebung befindet. Hier ist noch echte Handarbeit angesagt, Erweiterungen müssen installiert werden. Damit das etwas leichter von der Hand geht, sollte der Package-Manager (Sublime Package Control) genutzt werden. Installieren kann man diesen mittels der integrierten Konsole, die über "View -> Show Console" geöffnet wird. In die Konsole muss anschließend nur noch ein Befehl hineinkopiert werden, den ihr auf der Seite wbond.net findet. Danach sollte der Editor neu gestartet werden. Der Paket-Manager kann dann anschließend über "Tools -> Command Palette" geöffnet werden. Im auftauchenden Dialog braucht man nur noch nach "Install Package" zu suchen und schon hat man eine riesige Liste mit möglichen Erweiterungen, die aus dem Paket-Manager installiert werden können. Empfehlungen zu einzelnen Erweiterungen gebe ich am Ende des Artikels. Das ist natürlich sehr subjektiv, denn jeder Entwickler arbeitet in einer anderen Umgebung und sollte sich seine Tools dementsprechend anpassen.

Ein Editor mit ungewohnten Features

Selbst ohne Erweiterungen hat Sublime Text 2 schon einige nette Features zu bieten. Wer gerne einen der Urväter der Editoren nutzt, könnte zum Beispiel den „Vintage Mode“ aktivieren. Diese Option bietet die Möglichkeit, Sublime Text 2 wie den guten alten VIM zu nutzen. Wer diesen bisher noch nicht verwendet hat, sollte sich von der etwas schwierigen Eingewöhnungsphase nicht abschrecken lassen. Es lohnt sich auf jeden Fall, denn man kann dafür in Zukunft während der Entwicklung die Maus beiseite legen. Wer den „Vintage Mode“ nicht nutzen möchte, kann zumindest viele Shortcuts bzw. Key Bindings von Sublime Text 2 nutzen. Diese lassen sich sogar in den vielen Konfigurationsdateien relativ komfortabel und unkompliziert auf die eigenen Bedürfnisse anpassen.

Ein weiteres, sinnvolles Feature sind „Split Windows“. Ein Feature, dass man ebenfalls vom VIM kennt, aber ansonsten selten eine so einfach Umsetzung in anderen Editoren gefunden hat. Damit ist es möglich, 4 Dateien in einem Editor zu öffnen, ohne dabei die Übersicht zu verlieren. Über "View -> Layout" kann ausgewählt werden, welche Anzeige man bevorzugt. Mittels "control + Nummer des Fensters" (also 1, 2, 3 oder 4 bei 4 Fenstern) kann man ohne Maus zwischen den Fenstern wechseln.

Es gibt allerdings auch Befehle, die für regelrechte „AHA-Effekte“ sorgen. Ein Beispiel: Befindet sich der Cursor in einem Wort und man drückt den Befehl "cmd + d" (auf Plattformen ohne Apfel ist es "control + d") werden nicht nur das Wort, sondern auch alle Stellen mit dem selben Wort im Dokument markiert. Das ist etwa dann großartig, wenn man die Bezeichnung einer Variablen ändern möchte. Mit dem Befehl "ctrl+shift+(up oder down)" wählt man mehrere Zeilen zum Markieren aus. Zeilen zu bewegen, kann schon manchmal ganz schön nervig sein. Sublime Text 2 hat hierfür eine Lösung. Mittels "ctrl+cmd+(up oder down)" kann eine markierte Zeile nach unten oder oben verschoben werden.

Erweiterungen in hoher Quantität und Qualität

Wie versprochen, will ich noch ein paar nützliche Erweiterungen für Sublime Text 2 nennen. Standard in vielen Editoren ist mittlerweile „ZenCoding„. Verkürzt gesagt geht es hierbei darum, für kompliziertes HTML-Markup nur noch eine Zeile zu schreiben, um die Syntax kümmert sich der Editor dann selbst. Die Erweiterung „Tag“ bietet ebenfalls einige Erleichterungen in Bezug auf die Entwicklung von HTML-Code. Bei Tag geht es, wie der Name bereits verrät, vor allem um HTML-Tags und das vereinfachte Bearbeiten von Inhalten in diesen oder auch das automatische Schließen geöffneter Tags. Das kann sehr hilfreich sein, da Sublime Text 2 hier von Haus aus kaum Unterstützung bietet.

Als Webdesigner kennt man auch das momentan noch vorhandene Prefix-Problem mit neuen Attributen aus der CSS3-Spezifikation. Doch dank der Erweiterung „Prefixr“ benötigt man in Zukunft nur noch die Version für einen Browser oder die Standard-Spezifikation und Prefixr kümmert sich darum, die restlichen Abhängigkeiten einzufügen.

Das Erscheinungsbild von Sublime Text 2 lässt sich ebenfalls mit Hilfe von Paketen verändern. Empfehlenswert ist hierbei vor allem das „Soda„-Theme. Mittels „SideBarEnhancements“ erweitert man die Toolbar von Sublime Text 2 um einige nette Features. Darüber hinaus gibt es Erweiterungen für viele speziellere Anforderungen. Mit Hilfe von „Shell-Turtlestein“ führt man aus Sublime Text 2 heraus Shell-Befehle aus. In Zusammenarbeit mit der Chrome-Extension wird der obligatorische Reload einer Seite im Browserfenster zukünftig automatisch von der Erweiterung „LiveReload“ erledigt.

Abschließend seien hier noch die Erweiterungen „SublimeCodeIntel„, welches für die nötige Intelligenz zum Autocomplete bei der Code-Eingabe sorgt und „SublimeHttpRequester„, das den Nutzer aus Sublime Text 2 heraus GET- und Post-Requests senden lässt.

Weitere Einstiegshilfen zu Sublime Text 2

Es dürfte deutlich geworden sein, dass Sublime Text 2 ein großer Baukasten ist, aus dem man sich seine gewünschte Umgebung zusammen basteln kann und auch muss. Zu diesem Thema gibt es viele Einstiegshilfen. Zum Beispiel eine große Screencast-Serie auf Englisch von Jeffrey Way. Darüber hinaus steht eine große „inoffizielle“ Dokumentation, die aber von den Entwicklern empfohlen wird, bereit.

Ein abschließendes Fazit zu Sublime Text 2

Nachdem ich Sublime Text 2 in den letzten Wochen immer wieder getestet habe, bin ich davon überzeugt, dass die Nutzergemeinde noch weiter wachsen wird. Für mich persönlich fehlen aber einige Dinge. Einstweilen will ich das Sublime Text 2 nicht anlasten. Wahrscheinlich liegt es eher daran, dass ich die dazu passenden Erweiterungen noch nicht gefunden habe, obwohl sie bestimmt bereits existieren.

Sublime Text 2 steht in Versionen für Mac OS X, Windows 32 und 64bit, sowie Linux, ebenfalls in 32 und 64bit zum Download bereit. Hat man sich nach einer frei zu definierenden Testphase vom Nutzen des Programms überzeugen können, wird eine Lizenz fällig. Diese schlägt mit 59 USD zu Buche, bezieht sich dabei aber auf einen User. Wenn Sie also ein MacBook, einen Windows-PC und einen Linux-Desktop haben, können Sie dennoch mit 59 USD alle drei Maschinen bestücken.

Dieser Text entstand schlussendlich unter Nutzung der Markdown-Unterstützung von Sublime Text 2.

(dpe)