Syntax Highlighterも対応したよ！
Category : カスタマイズ < a-blog cms
Tags : SyntaxHighlighter
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内でインクルードしています。