Zen Coding 簡単で速いHTMLライティング

ゼンコーディング は、テキストエディタのプラグインです。Zen Codingを使用して通常のHTMLコードをショートコードで記述するテキストエディタで、HTMLの記述を大幅に簡略化するツールです。

例えば、次のようなHTMLコードです。

Zen Codingの省略ルールは、CSSのセレクタにやや似ています。

• div#main.list.item は <div id="main" class="list item"></div> を意味します。
• 他の属性は次のようになります： div[title], a[title="Hello world" rel], td[colspan=2].
• 繰り返し要素：li*3は3つの<li></li>を出力します。
• 繰り返し要素の数値列： li.list-$*2 は <li class="list-01"></li><li class="list-02"></li> に展開されます。複数の$を並べた場合、直前の$は0として桁埋めされます。
• div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer のように括弧を使ってグループ化することができます。
• <フォント フィルター をサポートし、異なるパラメータを使用すると、まったく異なる結果が得られます。

その他の主な機能

デフォルトでは HTML /XML/XSL/ CSS Zen Coding では、/HAML のほかにも、コードに親和性の高い 機能 .

<フォント 省略可能なラップ (略語で折り返す)。

カーソル位置またはテキスト選択に応じて、コードの略語を入力し、目的の最終コードを取得します。

<フォント タグマッチ (バランスタグ)

ZC (Zen Coding) は、ある要素内のすべてのコンテンツを選択する素早い方法を提供します。

<フォント 編集ポイント (編集ポイント)

ZCエクステンションのコードにはコンテンツがないため、この機能によりコンテンツの編集箇所を素早く見つけることができます

最後に

Ecliplse/Aptana, Notepad++, TextMage, Dreamweaver, UltraEdit, Visual Studioなどの一般的なIDEは、すでに公式またはサードパーティ製のプラグインがサポートされています。実際、Zen Codingのコア・コードはJavascriptとPythonの両方で提供されているので、対応するJSファイルを導入すれば、ブラウザのテキスト編集エリアはZen Codingに対応するようになります。