Verwendung von Zen Coding

Wir erhalten oft Anfragen, ob EmEditor Zen Coding unterstützt. Zen Coding ist die Bibliothek, mit der Sie HTML und andere strukturierte Codeformate deutlich schneller schreiben können. Zum Beispiel kann die einzelne Zeile

div#page>div.logo+ul#navigation>li*5>a

erweitert werden zu

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

Wenn Sie die HTML-Struktur kennen, die Sie eingeben möchten, können Sie mit Zen Coding viel schneller Code schreiben, als wenn Sie den Code vollständig ausschreiben.

EmEditor bietet vollständige Unterstützung für Zen Coding

Zen Coding wurde von Sergey Chikuyonok und anderen entwickelt und wird unter einer GNU-Lizenz veröffentlicht. Der Kern der Bibliothek ist sowohl in JavaScript als auch in Python 2.5+ entwickelt. Einer der Vorteile von Zen Coding besteht darin, dass der Kern und die Schnittstelle (der Controller) getrennt entwickelt werden, um in verschiedenen Texteditoren verwendet werden zu können. Mit anderen Worten: Die Bibliothek ist so gestaltet, dass der Kern ohne Änderungen zwischen Texteditoren wiederverwendet werden kann und nur der Schnittstellenteil für verschiedene Texteditoren neu geschrieben werden muss. Dieses modulare Design minimiert Abweichungen bei der Funktionsimplementierung und Fehler zwischen Texteditoren.

Da EmEditor JavaScript unterstützt, kann der Texteditor Zen Coding problemlos unterstützen. Um Zen Coding in EmEditor zu verwenden, müssen Sie nur den Schnittstellenteil von Zen Coding bearbeiten, da der Kernteil kaum oder gar keine Änderungen benötigt. Der EmEditor-Entwickler hat die Portierung von Zen Coding in EmEditor in nur zwei Tagen abgeschlossen. Sobald die Schnittstelle fertig ist, muss bei neueren Versionen von Zen Coding nur der Kern ersetzt werden, was ein viel einfacherer Vorgang ist. So können Sie die neuesten Funktionen von Zen Coding nutzen, ohne sich um Fehler oder fehlende Implementierungen sorgen zu müssen.

Zen Coding für EmEditor herunterladen

Sie können Zen Coding für EmEditor aus unserer Bibliothek in der Kategorie Snippets herunterladen. Installieren Sie Zen Coding für EmEditor gemäß der im ReadMe beschriebenen Methode für das Snippets-Plug-in. Nach der Installation sehen Sie in der benutzerdefinierten Leiste Snippets einen Ordner namens Zen Coding mit 10 registrierten Aktionen. Jede Aktion kann durch Drücken des Tastenkürzels ausgeführt werden, das in Klammern hinter dem jeweiligen Element angegeben ist.

Zen Coding-Anleitung: Abkürzung erweitern

Von den 10 Aktionen wird die Aktion „Abkürzung erweitern“ am häufigsten verwendet. Diese Aktion erweitert eine eingegebene Abkürzung zu vollständigem HTML-Code, ähnlich wie CSS-Selektorformen funktionieren. Ihre Tastenkombination ist der Taste F12 zugewiesen. Um eine Abkürzung zu erweitern, geben Sie die Abkürzung ein und drücken Sie dann F12. Wenn Sie zum Beispiel

div#name

eingeben und F12 drücken, wird die Abkürzung erweitert zu

<div id="name"></div>

# wird verwendet, um das ID-Element von HTML anzugeben. Um eine Klasse anzugeben, verwenden Sie . anstelle von #. Geben Sie zum Beispiel

div.name

ein und drücken Sie F12, um Folgendes zu erhalten

<div class="name"></div>

Wenn Sie > anstelle von . verwenden, wird ein untergeordnetes Element angegeben. Zum Beispiel wird

table>tr>td

erweitert zu

<table>
	<tr>
		<td></td>
	</tr>
</table>

Wenn Sie + verwenden, werden mehrere Elemente erweitert. Zum Beispiel wird

 p.one+p.two

<p class="one"></p>
<p class="two"></p>

Verwenden Sie [ ], um Attribute anzugeben. Zum Beispiel wird

p[title]

erweitert zu

<p title=""></p>

Darüber hinaus enthält Zen Coding eine Filterfunktion. Um einen Filter anzugeben, verwenden Sie |. Wenn Sie

p.title|e

eingeben, wird es erweitert zu

&lt;p class="title"&gt;&lt;/p&gt;

Der e-Filter kodiert drei Zeichen: >, < und &, die nicht als XML-Literale verwendet werden können. Es gibt weitere Filter.

Wenn Sie wiederholte Elemente beschreiben möchten, können Sie die Wiederholungsanzahl mit * und einer Zahl angeben. Zum Beispiel wird

p*3

erweitert zu

<p></p>
<p></p>
<p></p>

Darüber hinaus können Sie mit $ fortlaufende Nummern in die ID-Namen von Klassennamen einfügen. Sie können zum Beispiel

p.name-$*3

eingeben, um Folgendes zu erhalten

<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>

Spezielle Abkürzungen wie ul+, table+ und dl+ verkürzen die Tippzeit erheblich. Zum Beispiel wird

ul+

erweitert zu

<ul>
	<li></li>
</ul>

Weitere Einzelheiten finden Sie unter

Darüber hinaus sind viele Snippets in Zen Coding verfügbar. Wenn in EmEditor beispielsweise die HTML-Konfiguration ausgewählt ist, wird

html:4t

erweitert zu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

Und wenn die CSS-Konfiguration ausgewählt ist, erweitert das Drücken von F12

@i

@import url();

Die Liste der verfügbaren Snippets ist beschrieben in

Eine praktische Übersichtstabelle finden Sie unter

Übersichtstabelle

Weitere Funktionen

„Abkürzung erweitern“ ist nur eine von vielen Funktionen von Zen Coding. Einzelheiten zu allen Aktionen finden Sie unter:

Aktionen

Mit Zen Coding können Sie Ihr HTML-Coding viel effizienter gestalten. Viel Spaß beim Codieren von HTML und XML mit Zen Coding für EmEditor!