Syntax Highlighterも対応したよ！
Posted: Updated:
Syntax Highlighterの導入メモ
SyntaxHighlighter - Alex Gorbatchev
いろいろなプログラムやマークアップ言語を、さも専用エディターの画面のように色分けしてくれるJSです。標準の使い方は上記のURLを参考のこと。今回は、a-blog cmsに組み込む際のサンプルです。
大雑把に3ステップ
- HEAD要素内に出力用の記述を用意する
- インクルードファイルにまとめておく
- admin/blog/edit.html にカスタムフィールドを追記する
※モジュールとカスタムフィールドが何となく分かってる方向けの記事です
index.html側のHEAD要素内
<!-- BEGIN_MODULE Touch_NotAdmin -->
<!-- BEGIN_MODULE Blog_Field --><!-- BEGIN brushes:veil -->
<script type="text/javascript" src="/syntax/scripts/shCore.js"></script><!-- BEGIN brushes:loop -->
<script type="text/javascript" src="/syntax/scripts/shBrush{brushes}.js"></script><!-- END brushes:loop -->
<link type="text/css" rel="stylesheet" href="/syntax/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/syntax/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.tagName = "code";
SyntaxHighlighter.all();
</script>
<!-- END brushes:veil --><!-- END_MODULE Blog_Field -->
<!-- END_MODULE Touch_NotAdmin -->
こんな感じで書いています。ブロックを色々と書いていますので大雑把な説明を。
Touch_NotAdmin : 管理ページでないときにブロックの中身が表示されるモジュールです。エントリーの編集画面は他のJSもゴリゴリ動いている上に、別にSyntax Highlighterが必要な場所でもないので。
Blog_Field : ブログに関連づけられたカスタムフィールドを呼び出すためのモジュールです。｛brushes｝という変数を設定しています。これ自体が配列なのでloopで呼び出しています。
brushes:veil : brushesという変数がなければ、そのブロックの中身を出力しないための記述です。brushesを設定していない状態で、他の関連する記述が露出してしまうことを防ぎます。
冗長な記述は外部にまとめちゃう
<head>
<!-- 中略 -->
<!--#include file="/include/syntax.html" -->
</head>
実際にはこんな感じでSyntax Highlighter関連の記述は別ファイルにまとめておいて、head内でインクルードしています。
admin/blog/edit.htmlの中、インデキシングの下あたりに
<tr>
<th>Syntax Highlighter</th>
<td>
<ul>
<li><label><input type="checkbox" name="brushes[]" value="Bash"{brushes:checked#Bash} /> Bash</label></li>
<li><label><input type="checkbox" name="brushes[]" value="Css"{brushes:checked#Css} /> CSS</label></li>
<li><label><input type="checkbox" name="brushes[]" value="Java"{brushes:checked#Java} /> Java</label></li>
<li><label><input type="checkbox" name="brushes[]" value="JScript"{brushes:checked#JScript} /> Javascript</label></li>
<li><label><input type="checkbox" name="brushes[]" value="Php"{brushes:checked#Php} /> PHP</label></li>
<li><label><input type="checkbox" name="brushes[]" value="Python"{brushes:checked#Python} /> Python</label></li>
<li><label><input type="checkbox" name="brushes[]" value="Ruby"{brushes:checked#Ruby} /> Ruby</label></li>
<li><label><input type="checkbox" name="brushes[]" value="Sql"{brushes:checked#Sql} /> SQL</label></li>
<li><label><input type="checkbox" name="brushes[]" value="Xml"{brushes:checked#Xml} /> XML</label></li>
</ul>
</td>
</tr>
こうやって追記しました。これでburshes変数は配列型で値が詰め込まれて行くので、
<!-- BEGIN brushes:loop -->
<script type="text/javascript" src="/syntax/scripts/shBrush{brushes}.js"></script>
<!-- END brushes:loop -->
この記述で選択した言語を定義したJSを読み込むscript要素がループで生成されます。
オマケ：CODE要素? PRE要素?
実際、PRE要素はインデントを表現するための要素であって、そこがソースコードであることを定義する要素ではないはずなので。
Syntax HighlighterはデフォルトだとPRE要素にあたられた class="brush:hogehoge" の記述に反応しますが、
SyntaxHighlighter.config.tagName = "code";
のような記述によって、任意の要素（例ではCODE要素）に反応させることができます。
