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要素)に反応させることができます。