ブログの記事にて、ソースコードを表示させる際、SyntaxHighlighterが便利ですよね？
a-blog cmsで使う場合
a-blog cmsでSyntaxHighlighterを使いたい場合、どうするか？
既に記事にされている方がいらっしゃいます。
- Syntax Highlighterも対応したよ！（ハブろぐさん）
（a-blog cmsを触っているうちに）エントリの際に毎回、<pre class=”brush: as3;”>～ここにコードを記述～</pre>って書くのをどうにか出来ないかなぁ…と思っていました。
そこで、a-blog cmsのユニット機能を使ってあげたらいいんじゃない？ と思ったので、ちょっと試してみました。
事前の準備
何はともあれ、SyntaxHighlighterをDLしてきます。
で、a-blog cmsのテーマフォルダ内のindex.htmlと同一階層に（syntaxというフォルダ名で）設置しておきます。
index.htmlに以下を記述
<head> （略） <script type="text/javascript" src="syntax/scripts/shCore.js"></script> <script type="text/javascript" src="syntax/scripts/shBrushAS3.js"></script> <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.clipboardSwf = 'syntax/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> </head>
設置したsyntaxフォルダとindex.htmlファイルをアップしておきます。
編集設定
a-blog cmsにログインして、カスタマイズ管理>コンフィグを選択します。
編集設定を選択します。
ユニットの追加ボタンの箇所に、「モード：ascode、ラベル：as3コード」みたいに追記します。
次に、テキストタグセレクトの箇所に、「タグ：pre.brush:as3、ラベル：as3」みたいに追記します。
保存ボタンを押しておきます。
ユニット設定
次に、ユニット設定を選択します。
すると画面の下に、以下のものが追加されています。
先程のユニットボタンの追加で行ったものが、ここに反映されています。
で、テキストを追加ボタンを押して、タグを本文からas3に変更して保存しておきます。
最後に、保存ボタンを押しておきます。
エントリを書く
では、エントリをしてみましょう！
こんな感じになっています。（ユニット追加ボタンが、ここにも反映されています！）
で、コードを挿入したい場合は、追加から「as3コード」のボタンを押して、以下のような感じにしてあげます。
as3コードのタグは、（ユニット設定の箇所で設定した通り）本文ではなくas3になっているので、テキストエリアにはコードを書いてあげるだけでOKです。
で、保存ボタンを押してあげると…
SyntaxHighlighterが、無事適用されます。
このように、編集設定とユニット設定を組み合わせてあげれば、エントリの度に、<pre class=”brush: as3;”>～ここにコードを記述～</pre>を書かなくて済むので、ちょっとは便利かと…
テキストタグセレクトについては、ここに詳しく書かれています。
この方法は、SyntaxHighlighterだけでなく、CSSのクラス設定とかにも応用出来るかと思います。
- Newer: Flashカレンダーが出来ましたよ！
- Older: config.server.phpは、GETしてからPUTする
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://flabaka.com/blog/wp-trackback.php?p=2132
- Listed below are links to weblogs that reference
- a-blog cms（編集設定とユニット設定） + SyntaxHighlighter from flabaka