1. /
  2. zen-coding

zen-coding

（コピペで使える）Coda2 zen-codingショートカット用メモ

select

[text]
Balanced Tag
Balanced Tag (Inward)
Line
Line Contents
Word
[/text]

Numbers

[text]
Decrement Number By 0.1
Decrement Number By 1
Decrement Number By 10
Evaluate Math Expression
Increment Number By 0.1
Increment Number By 1
Increment Number By 10
[/text]

Zen Coding

[text]
Encode/Decode image to data:URI
Expand Abbreviation
Merge Lines
Next Edit Point
Previous Edit Point
Reflect CSS Value
Remove Tag
Select Next Item
Select Previous Ite,
Split/Join Tag
Toggle Comment
Update Image Size
Wrap With Abbreviation
[/text]

HTML

[text]
Format: Emphasize
Format: Strong
Insert Linebreak
Wrap Selected Lines In Tag
Wrap Selection In Link
Wrap Selection In Tag
[/text]

General

[text]
Indent New Line
Trim Line(s)
[/text]

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting

Coda2にzen-codingを入れて、カスタマイズ | 乱雑モックアップ

Coda2のzen-codingで地味に困る事。

[html]2011
2012[/html]

をWrap with Abbreviationすると
こうなってほしいのに

[html]</pre>
<ul>
　<li>2011年</li>
　<li>2012年</li>
</ul>
<pre>
[/html]

coda2のzen-codingだとこうなる
[html]</pre>
<ul>
　<li>年</li>
　<li>2012年</li>
</ul>
<pre>
[/html]

どこをいじれば修正できるのだろう…

Coda2にzen-codingを入れて、カスタマイズ

Coda2のzen-codingで地味に困る事。を追加。
解決方法をご存知でしたらぜひ教えて下さいませ。
追記ここまで。

日本語化されるまで触らないでおこうと思いつつ
ちょっとしたコーディングをする際にちょこちょこ起動してるCoda2

zen-codingを入れてhtml:5とやるとlang=”en”になっていたり<!DOCTYPE HTML>と少し気持ち悪かったのでカスタマイズする事に。

zen-codingを拾ってくる

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
Zen Coding for Coda v0.7.1 をダウンロードした

/Users/[ユーザー名]/Library/Application Support/Coda 2/Plug-ins/TEA for Coda.codaplugin
右クリックして「パッケージの内容を表示」

Support/Library/zencoding/zen_settings.py
をバックアップしてから
CotEditorで開いた

でもってenをjaに変更

[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,[/text]
[image]気持ち悪い場所

ついでに

私、気になりますっ！

なんでHTMLが大文字でlangはlocaleなんでしょう？
[image]書き換えます

!DOCTYPE HTMLを
!DOCTYPE htmlにしました。
[image]小文字とjaにしました

ちなみに、W3C（HTML5）の記述はこんな感じだった
[html]<!DOCTYPE html>
<html lang="en-US-x-Hixie">
[/html]
lang属性はなんて書くのがいいんだろう？

おまけでjQueryやviewportの記述も追加しておく
[image]色々追加
コンディショナルコメントのところの[]は\でエスケープ。

この段階のhtml:5をzen-codingすると

[html]<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!–[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

</body>
</html>[/html]
こうなる。

テンプレ部分の参考サイト

HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis

ちゃんと勉強してテンプレを作りたいなー。

メモ / Notepad++でzencoding

Notepad++のインストール先を変更してない場合
C:\Program Files\Notepad++\pluginsフォルダの中に
Notepad++用のzencoding

  • NppScriptingフォルダ
  • NppScripting.dll

をぶち込む。

こっちはCtrl + Eで変換。

カスタマイズは以下のjsから
C:\Program Files\Notepad++\plugins\NppScripting\includes\Zen Coding.js

lang属性がenになっているので
[text]’lang’: ‘en’,
‘locale’: ‘en-US’,
[/text]

書き換えたりしとく。
[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,
[/text]

[追記 / 20100412] zencodingのスペル間違えてたので修正。