Havelog.aho.mu

Syntax Highlighterも対応したよ！

Posted: Updated:

Syntax Highlighterの導入メモ

　SyntaxHighlighter - Alex Gorbatchev

　いろいろなプログラムやマークアップ言語を、さも専用エディターの画面のように色分けしてくれるJSです。標準の使い方は上記のURLを参考のこと。今回は、a-blog cmsに組み込む際のサンプルです。

　大雑把に3ステップ

  1. HEAD要素内に出力用の記述を用意する
  2. インクルードファイルにまとめておく
  3. 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} />&nbsp;Bash</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="Css"{brushes:checked#Css} />&nbsp;CSS</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="Java"{brushes:checked#Java} />&nbsp;Java</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="JScript"{brushes:checked#JScript} />&nbsp;Javascript</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="Php"{brushes:checked#Php} />&nbsp;PHP</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="Python"{brushes:checked#Python} />&nbsp;Python</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="Ruby"{brushes:checked#Ruby} />&nbsp;Ruby</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="Sql"{brushes:checked#Sql} />&nbsp;SQL</label></li>
        <li><label><input type="checkbox" name="brushes[]" value="Xml"{brushes:checked#Xml} />&nbsp;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要素）に反応させることができます。

Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、料理、旅行、ランニングなど雑多なブログ

Bio: aho.mu
Twitter: @ahomu
Github: ahomu

Related

お探しの記事は見つかりませんでした。

Latest

Archives

Tags

Search