CE CreativeSection

それでは導入手順を。

とりあえずおもむろに最新版を落としましょう。
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
（執筆時のバージョンは2.1.364でした）

血まなこ気味に解凍しましょう。

解凍後のscriptsフォルダとstylesフォルダを使います。
筆者は分かりやすくscripts→js styles→css とリネームしました。

これらを
てぃーだブログ：ヘッドタグ内で召喚するので、
まずはフォルダごと自サイト等にアップします。
(TI-DAてjsとかcssとかアップ出来ます？もし可能だったらゴメン)

てぃーだブログのテンプレートの編集画面で
headタグ内にこんな感じでソースを追加します。

<script type="text/javascript" src="http://YourSite/js/shCore.js"></script>

<script type="text/javascript" src="http://YourSite/js/shBrushPhp.js"></script>

<link type="text/css" rel="stylesheet" href="http://YourSite/css/shCore.css"/>

<link type="text/css" rel="stylesheet" href="http://YourSite/css/shThemeDefault.css"/>

<script type="text/javascript">

SyntaxHighlighter.config.clipboardSwf = 'http://YourSite/js/clipboard.swf';

SyntaxHighlighter.config.stripBrs = true;

SyntaxHighlighter.all();

</script>

"YourSite"を実際のアップロード先URLに置き換えて下さい。
shCore.js,shCore.cssは必須っぽいです。
上のサンプルではshBrushPhp.jsだけが読まれているため
PHPスクリプトを表示させるだけの設定になります。他の言語を表示させたい場合は、

<script type="text/javascript" src="http://YourSite/js/shBrushAS3.js"></script>

<script type="text/javascript" src="http://YourSite/js/shBrushCss.js"></script>

<script type="text/javascript" src="http://YourSite/js/shBrushXml.js"></script>

<script type="text/javascript" src="http://YourSite/js/shBrushJScript.js"></script>

このように必要な言語分ガンガン突っ込んでいきます。
必要になった時に初めて追加する方針で良いと思います。

shThemeDefault.cssは配色テーマのファイルです。
これをshThemeEmacs.cssやshThemeRDark.css等に変更すると見た目が変わります。
お好きなデザインを。

<script type="text/javascript">

SyntaxHighlighter.config.clipboardSwf = 'http://YourSite/js/clipboard.swf';

SyntaxHighlighter.config.stripBrs = true;

SyntaxHighlighter.all();

</script>

この部分も実行するため必要です。
てぃーだブログでは改行コードが<br>に変換されて表示されるので、
３行目のオプションSyntaxHighlighter.config.stripBrs = true;が必要なようです。

後は、本文中に

<pre class="brush:php;">

ここに表示させたいソースコードを記述

</pre>

<pre>タグでこのようにソースコードを包囲します。
表示させる言語に合わせてclassの指定を
brush:as3; , brush:xml; , brush:jscript;
という具合に指定します。


良いことばっかりかと思えば１つだけ注意点があります。

<pre>タグ内「<」「>」「&」は、特殊文字として認識される為、
「&lt;」「&gt;」「&amp;」とHTMLエスケープした形で記述しなければなりません。

XML/HTMLコーダーの方は一度テキストエディタ等で検索置き換えしてからペーストする等の
一手間が必要です。でも、やっぱり日記風にソースコードを書いていきたいし、
このあたりの解決法は後々考えてみますわ。


今回は紹介と簡単な導入方法で終わってしまいました。
本当は、jsファイルcssファイル圧縮やPHPでのjsファイル結合等も書きたかったのですが・・・


あんまりこればっかり書いてたら怒られそうなのでｗ
このあたりで。


それでは良いソースコードライフを。