月: 2008年11月

ブログに記述したコードを自分で後でみても良く分からないぐらい汚いのでsyntaxhighlighterを導入することにしてみます。
1.まずsyntaxhighlighter – Google Codeからダウンロード
2.解凍して出来上がった”dp.SyntaxHighlighter”をサーバにアップ。（ｵﾃﾞの場合はブログでサブドメインになっているので、そのサブドメインのﾄﾞｷｭﾒﾝﾄﾙｰﾄにｱｯﾌﾟ）
3.syntaxhighlighterのCSSを追加する。Movable Typeだとメインページ以外にもアーカイブ系にも追加。

<link rel="stylesheet" href="<$MTBlogURL<pre wp-pre-tag-0></pre>gt;dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />

以下他にも色々追加しないといけないので、Movable typeだとモジュールで追加した方が楽かな？ということで以下モジュールベースで話を展開。
4.”module.SyntaxHighlighter.txt”というテキストファイルを新規作成。
5.CSS設定の追加。”module.SyntaxHighlighter.txt”に以下の一文を記述。

<link rel="stylesheet" href="<$MTBlogURL<pre wp-pre-tag-1></pre>gt;dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />

6.使用言語のshBrushスクリプト(パーサー？)を”module.SyntaxHighlighter.txt”に追記。
種類は

1. shBrushCpp.js :C++
2. shBrushCSharp.js : C#
3. shBrushCss.js : CSS
4. shBrushDelphi.js : Delphi
5. shBrushJava.js : Java
6. shBrushJScript.js : JavaScript
7. shBrushPhp.js : PHP
8. shBrushPython.js : Python
9. shBrushRuby.js : Ruby
10. shBrushSql.js : SQL
11. shBrushVb.js : Visual Basic
12. shBrushXml.js : XML
13. shCore.js : COREこれは必須っぽい

といったところ。自分が使用するであろう言語だけ追記。XMLだけ使う場合はこんな感じ。

<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-2></pre>gt;dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="<$MTBlogURL<pre wp-pre-tag-2></pre>gt;dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>

7.クリップボードコピーの定義。Flashを介在してクリップボードにｺｰﾄﾞをコピーしているらしい。そのファイルは”/Scripts/clipboard.swf”。組み込みは

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<$MTBlogURL$>/flash/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>