Zen Coding – Sebastians Blog https://sgaul.de Neues aus den Softwareminen Thu, 13 Mar 2014 20:34:55 +0000 de-DE hourly 1 https://wordpress.org/?v=6.1.1 https://sgaul.de/wp-content/uploads/2019/02/cropped-sgaul-2-1-32x32.jpg Zen Coding – Sebastians Blog https://sgaul.de 32 32 HTML-Strukturen im Handumdrehen: Zen-Coding https://sgaul.de/2012/11/25/html-strukturen-im-handumdrehen-zen-coding/ Sun, 25 Nov 2012 14:01:09 +0000 https://sgaul.de/?p=1638 HTML-Strukturen im Handumdrehen: Zen-Coding weiterlesen]]> Zen-Coding ist für HTML-Schreiber eine schöne Sache. Will man komplexe Konstrukte wie Tabellen mit der Hand schreiben, sind da einige Tastendrücke notwendig. Zen-Coding kürzt die Sache ab. Man schreibt:

table.overview#mainoverview>thead(>tr>th*4)+tbody>tr>td*4

Nun drückt man (bei den meisten Implementierungen) Strg+e und die Eingabe wird automatisch erweitert:

<table class="overview" id="mainoverview">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Installation in Sublime Text 2

cd ~/.config/sublime-text-2/Packages/
git clone --depth 1 https://github.com/sergeche/emmet-sublime.git

Sublime neustarten und fertig.

Installation in WordPress

Auch in WordPress lässt sich Zen-Coding verwenden, wie ich im Artikel HTML-Editor in WordPress mit Zen-Coding verbessern schon einmal beschrieben habe.

]]> HTML-Editor in WordPress mit Zen-Coding verbessern https://sgaul.de/2011/07/08/html-editor-in-wordpress/ https://sgaul.de/2011/07/08/html-editor-in-wordpress/#comments Fri, 08 Jul 2011 16:55:35 +0000 https://sgaul.de/?p=246 HTML-Editor in WordPress mit Zen-Coding verbessern weiterlesen]]> Eigentlich will ich gegen den WYSIWYG-Editor von WordPress gar nichts sagen: Auch Leute ohne Ahnung von HTML & Co. können so schnell und einfach ihre Blog-Einträge schreiben. Auch ich nutze ihn gern, solange es nur ums Fettmachen und Setzen von Überschriften geht. Wenn man aber ein paar Klassen, Definitionslisten oder Tabellen unterbringen will, ist der Editor schnell an seinen Grenzen. Auch der HTML-Modus hat ein paar Helferlein, leider sind deren Funktionen aber stark begrenzt. Dank eines Plugins lässt sich aber die Funktionalität von Zen-Coding direkt im Browser nutzen.

Zen Coding

„Zen Coding“ ist eine einfache Möglichkeit, XML-Code zu generieren. Man gibt Abkürzungen ein und drückt einen Erweiterungsknopf, der daraus HTML oder ähnliches generiert.

Abkürzung Generierter Code 
ul#test>li*3
 
<ul id="test">
	<li></li>
	<li></li>
	<li></li>
</ul>
 
table.test>tr*3>td*2
 
<table class="test">
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

Einen besseren Überblick bekommt man in folgendem Video:

[vimeo clip_id=“7405114″]

Das Plugin

Ganz so mächtig wie einen vollständigen Editor macht das Plugin WordPress natürlich nicht, aber die wesentlichen Erweiterungsfunktionen sind sehr gut umgesetzt. Zudem beinhaltet das Plugin ein paar weitere Tricks. So kann man im Text-Editor des Browsers etwa Tab aktivieren, wenn man es denn will.

Das Plugin hört auf den kreativen Namen „WP Zen Coding“ und lässt sich über den WordPress-Plugin-Manager installieren. Anschließend musste ich in den Einstellungen des Plugins die „Expand Abbreviation“ auf Ctrl+e umstellen, da die Meta-Taste von meinem Browser nicht korrekt weitergleitet wird. Außerdem funktioniert bei mir auch einfach Tab, um Zen-Coding-Ausdrücke auf HTML zu erweitern.

]]> https://sgaul.de/2011/07/08/html-editor-in-wordpress/feed/ 5