CodaのZen Coding - TEA for Codaでdiv要素の終了タグにコメントを自動追加するカスタマイズ

公開

今年9月にMacBook Proを買ったのがきっかけで、最近では専らCodaを利用して(X)HTML/(S)CSS/JavaScriptをコーディングするようになりました。

それまで(X)HTMLのコーディングに利用していたDreamweaverには、div要素の終了タグにコメントを自動追加するカスタマイズをした「Zen Coding for Dreamweaver v0.6」を入れていたのですが、Codaに乗り換えたことでコメントの自動追加ができなくなり、非常に不便に感じていました。

CodaのZen Coding -- TEA for CodaはPythonで書かれているため、Pythonの経験がない私はDreamweaverのようにはカスタマイズできないでいたのですが、改めてチャレンジしてみるとわりと簡単にコメントの自動追加ができるようになったので、カスタマイズ方法をご紹介します。

カスタマイズするファイル

/Users/（ユーザー名）/Library/Application Support/Coda/Plug-ins/TEA for Coda.codaplugin/Support/Library/zencoding/filters/html.py

カスタマイズ方法

正規表現を利用するため、9行目の後でreをインポートします。

import zencoding.utils
import re

124行目から開始タグ・終了タグを定義する処理が書かれていますので、下記のように書き換えます。else:の後（＝終了タグを持つ要素）でdiv要素かどうかを判別し、div要素の場合は自動でコメントを入れるという内容です。

	# define opening and closing tags
	tag_name = process_string_case(item.name, profile['tag_case'])
	if is_unary:
		start = '<' + tag_name + attrs + self_closing + '>'
		item.end = ''
	else:
		if tag_name == 'div':
			match = re.search(r'(id|class)="(.*?)"', attrs)
			if match is None:
				start = '<' + tag_name + attrs + '>'
				end = '</' + tag_name + '>'
			else:
				start = '<' + tag_name + attrs + '>'
				if match.group(1).startswith('id'):
					end = '</' + tag_name + '><!-- /#' + match.group(2) + ' -->'
				else:
					end = '</' + tag_name + '><!-- /.' + match.group(2).replace(" ", ".") + ' -->'
		else:
			start = '<' + tag_name + attrs + '>'
			end = '</' + tag_name + '>'

なお、私はタグを閉じた後でコメントを自動挿入するようにしていますが、タグを閉じる前でコメントを自動挿入するようにされたい方は、137行目〜140行目（上記コードを入れた後の行数です）を下記のようにして下さい。

				if match.group(1).startswith('id'):
					end = '<!-- /#' + match.group(2) + ' --></' + tag_name + '>'
				else:
					end = '<!-- /.' + match.group(2).replace(" ", ".") + ' --></' + tag_name + '>'

以上でファイルのカスタマイズは完了です。Codaを再起動してid/class名を付与したdiv要素を展開した際にコメントが自動挿入されるか確認して下さい。