English / Japanese・日本語

Brackets空白表示エクステンション (全角スペース対応版)

Bracketsで空白をSublime Text風に表示するエクステンションの日本語全角スペース対応版です。

このエクステンションはDennis Kehrig氏のBrackets Show Whitespaceを改良したものです。 全角スペースを四角として表示します。また、メニュー項目も日本語にローカライズしています。

使用方法

メニューから表示 > 空白を表示を選択するか、Ctrl-Shift-W (OS XではCommand-Shift-W)のショートカットで有効に出来ます。エクステンションの状態はBracketsを終了しても保持されます。インライン編集を含めて全てのウィンドウで空白を表示します。

技術詳細

このエクステンションはCodeMirrorのオーバーレイ機能を使ってスペースやタブなどの空白を可視化します。各空白文字は対応するクラスをつけた<span></span>タグで閉じられます。このエクステンションで使用されているクラスは以下の通りです。タブや全角スペースはそれぞれspaceの代わりにtab、zenkakuに置き換えられます。

• .cm-dk-whitespace-space: 文字に挟まれた空白
• .cm-dk-whitespace-leading-space: インデントに使用されている空白
• .cm-dk-whitespace-empty-line-space: 空白のみを含む行
• .cm-dk-whitespace-trailing-space: 空白以外の文字があり、空白で終わる行の空白

エクステンションの基本的なレイアウトはstyles/main.lessで定義されていて使用時にCSSにコンパイルされます。空白の色はBracketsの環境設定ファイルで定義され、styles/whitespace-colors-css.tmplのものが書き込まれます。両ファイルともBrackets起動時に読み込まれます。

インストール方法

方法1: Bracketsの拡張起動マネージャーを開いて"show whitespace Japanese"で検索してください。

方法2: Githubから最新版をダウンロードし、.zipファイルをそのままBracketsの拡張機能マネージャーの ".zipをここにドラッグ"にドラッグしてください。また、"URLからインストール"リンクからインストールできます。

既知の問題

• CodeMirrorオーバーレイによってスクロール時や入力時にエディタが重くなる場合があります。重すぎると感じたらエクステンションを無効にすると改善する可能性があります。
• Indent Guidesと併用したときにインデントガイドと一致しない場合があります。

License

MIT このエクステンションはDennis Kehrig氏が作成し、日本語および全角空白はzoomSKが実装したものです。