CSSの整形はjsbeautifier.orgの整形が良さそうだったので、jsbeautifierのコードを利用してマクロを作成しました。
jsbeautifierは、JavaScript用のコード整形サービスサイトですが、HTMLとCSSの整形もでき、HTMLとCSSのコード整形用のJavaScriptコードが公開されていたので、そのコードを利用しました。
JavaScript用のマクロはEmEditorマクロでJavaScriptのコードを整形するを見てください。
■目的
CSSのコードをEmEditor上で整形する。
整形には、jsbeautifierのCSS整形コード(beautify-css.js)を使用する。
■環境
| OS | Windows XP |
|---|---|
| EmEditor | EmEditor Professional (32-bit) Version 11.0.5 |
■HTML整形コード(beautify-css.js)のダウンロード
jsbeautifier.orgが使用しているCSSを整形するJavaScriptのコード「beautify-css.js」をhttps://github.com/einars/js-beautifyからダウンロードします(*1)。
*1:この説明では、2012-10-04時点での「beautify-css.js」を使用しています。
■EmEditor用JavaScritp整形マクロファイルの作成
EmEditor用のマクロファイル(beautity-css.jsee)を作成します。
【マクロファイル(beautity-css.jsee)のコード】
#include "include/beautify-css.js";
/*
beautify for EmEditor
CSS
Created by Shinichi Yamaura.
*/
document.selection.SelectAll();
// beautifyのオプション設定
var options = {
'indent_size': 1,
'indent_char': '\t'
};
code = document.selection.Text;
// 整形前に改行コードをLFに変換(beautifyのコードを実行用)
code = code.replace(/\r\n/g, '\n');
// beautifyの実行
var code = css_beautify(code, options);
// 整形後に改行コードをCR+LFに変換
code = code.replace(/\n/g, '\r\n');
// 行先頭の半角スペース1個を削除(beautify-cssのバグ対応)
code = code.replace(/\n /g, '\n');
document.selection.DestructiveInsert(code);
document.selection.StartOfDocument(false);
■整形マクロの説明
「beautify-css.js」をインクルードして、マクロから「beautify-css.js」を利用しています。
【注意】#includeは、スクリプトのメイン コードの上の最初の行に指定する必要があります。
編集しているコードを「beautify-css.js」の関数「css_beautify()」を使用して整形し、整形前のコードを上書きして整形後のコードを挿入します。
「css_beautify()」では、二番目の引数に整形のオプションを指定します。マクロの中で、beautifyのオプション指定をしているので、好みに合わせて設定してください。
beautifyのオプションは「beautify-css.js」のコメントに記載されています。補足説明にコメントに記載されているオプションの説明を整理しました。
マクロ内で、改行コードの置換をしています。これは補足説明を参照してください。
2012-10-04時点の「css_beautify()」では、整形後に、コメント行の次の行の先頭に半角スペースが挿入されてしまうので、マクロ内で半角スペースを削除する処理を追加しています。
■ファイルの配置
「CSS整形コード(beautify-css.js)」と「マクロファイル(beautify-css.jsee)」をEmEditorマクロフォルダに配置します。
「CSS整形コード」は、EmEditorマクロフォルダ内にサブフォルダ(include)を作成して配置します。
My Macros
│ beautify-css.jsee
│
└─include
beautify-css.js
■実行方法
EmEditorのマクロで、マクロファイル(beautify-css.jsee)を実行してください。
■補足説明
●改行コード
マクロを作成している時に、改行コードで問題が発生したので、問題とその対応についての説明を記載しておきます。
EmEditorは、改行コードの混在ができるため「css_beautify()」での整形前に、編集しているテキストのコードの改行コードをLFに変換してから整形しています。
「css_beautify()」で出力されるコードは、改行コードをLFで出力されます。Windowsでは、改行コードをCR+LFにしたいので「css_beautify()」の整形後に、改行コードをCR-LFに変換しています。
●css_beautify()のオプション
2012-10-04時点
| オプション | 既定値 | 説明 |
|---|---|---|
| indent_size | 4 | indentation size |
| indent_char | space | character to indent with |
