syntaxhighlighterを入れてみるの巻 [ MovableType ]
ブログに記述したコードを自分で後でみても良く分からないぐらい汚いのでsyntaxhighlighterを導入することにしてみます。
1.まずsyntaxhighlighter - Google Codeからダウンロード
2.解凍して出来上がった"dp.SyntaxHighlighter"をサーバにアップ。(オデの場合はブログでサブドメインになっているので、そのサブドメインのドキュメントルートにアップ)
3.syntaxhighlighterのCSSを追加する。Movable Typeだとメインページ以外にもアーカイブ系にも追加。
4."module.SyntaxHighlighter.txt"というテキストファイルを新規作成。
5.CSS設定の追加。"module.SyntaxHighlighter.txt"に以下の一文を記述。
6.使用言語のshBrushスクリプト(パーサー?)を"module.SyntaxHighlighter.txt"に追記。 種類は- shBrushCpp.js :C++
- shBrushCSharp.js : C#
- shBrushCss.js : CSS
- shBrushDelphi.js : Delphi
- shBrushJava.js : Java
- shBrushJScript.js : JavaScript
- shBrushPhp.js : PHP
- shBrushPython.js : Python
- shBrushRuby.js : Ruby
- shBrushSql.js : SQL
- shBrushVb.js : Visual Basic
- shBrushXml.js : XML
- shCore.js : COREこれは必須っぽい
8.標準ではAction Script用のBrushは存在しないですが、dp.SyntaxHighlighterでActionScript 2.0/3.0のコードをハイライトする at Flaboで配布されていたので入れてみる。(ただ今停止中って書いてあるので動くのか不明ですが)DLして解凍したデータを"dp.SyntaxHighlighter"にマージして"module.SyntaxHighlighter.txt"に追記。最終的な"module.SyntaxHighlighter.txt"はこんな感じ。
9."module.SyntaxHighlighter.txt"をサーバにアップ。 Movable Typeのモジュールを新規作成。名前を"SyntaxHighlighter"に設定して"このテンプレートにリンクするファイル"にアップした"module.SyntaxHighlighter.txt"のパスを指定して保存。これでモジュールは完成。10.次にメインページ、アーカイブ各種にモジュールを追記。
11.記述したいコードをtextareaタグで囲み、そのclass名で言語名を指定。言語名のエイリアスはLanguages - syntaxhighlighter - Google Code - List of supported languages.参照。どうだろう?上手くいっているのか?
駄目だ~~~汗
全然上手くいかない理由が分かった。
Usage - syntaxhighlighter - Google Code - How to use SyntaxHighlighter.
の
For optimal result, place this code at the very end of your page. Check HighlightAll for more details about the function.
この一文でした。
つまりheadに入れちゃあ駄目なんですね。うん、どこで発動するんだろう?って疑問はあったんだ・・w
ということで
ちなみにMovabley Typeの改行設定で「改行を変換する」に設定していると、コードの中にも改行タグ<br />が入ってしまうのですが、この回避方はpreタグ内の改行(brタグ)を無効にする(MT・Movable Type) - ウェブライフハックを参照。<pre>を使用することで回避できるようです。
追記:2008/11/21 16:43
AS3用のBrushをdigitalflipbook: AS3 Syntax Highlighting (with SyntaxHighlighter)に入れ替えてみました。早くなるかな?
ためしに一つ・・・
どうだろう?お、結構早いかも。

コメント
全然上手くいってない(汗
投稿者: +39 | November 20, 2008 3:40 PM
ここまで上手くいかないと逆にスッキリする。
投稿者: +39 | November 20, 2008 3:48 PM
いやー普通にtextAreaになってんだけどw
投稿者: +39 | November 20, 2008 4:10 PM
AS3のBrushはとても重たい気がする。それだけ関数が多いということなのだろうか?
投稿者: +39 | November 21, 2008 3:16 AM
shBrushAS3.jsの中見てみたら、キーワード数は多くないようです。
単純にJSの処理速度と、置換対象のtextareaの数の問題かと。
少なくともうちで公開してるのよか赤い彗星分くらいは速いですねw
投稿者: Flabo | December 5, 2008 5:17 AM
はじめまして。
>単純にJSの処理速度と、置換対象のtextareaの数の問題かと。
ですね、大量にソースを書いていたりすると今でも一瞬止まります。
FlaboさんはもうWPに乗り換えられているので、iG:Syntax Hiliterなんですよね・・。WPに乗り換えるか悩みますが、暇が無くって・・・汗
投稿者: +39 | December 5, 2008 2:25 PM
はじめまして。
挨拶抜きで失礼しました。
>WPに乗り換えるか悩みますが、暇が無くって・・・汗
年末ですもんね。。
iG:SyntaxHiliterだとバックエンドの処理になるんで、キーワード増えても遅くならないのはいいですよ。
でも、iG:SHのためだけにっていうのは本末転倒!?w
投稿者: Flabo | December 7, 2008 7:11 AM
>挨拶抜きで失礼しました。
あ、いえいえ、気になさらずに・・。
>キーワード増えても遅くならないのはいいですよ。
ですよねぇ・・・。
WPの乗換えを躊躇しているのは、一つのWPで一つのブログしか管理できないところですね・・。WordPressMUとかあるみたいですが、本家のバージョンアップにどれくらい追従してくれるのか不安で・・・(プラグインレベルで対応できるものがあればベストですが)
投稿者: +39 | December 7, 2008 7:44 AM