SyntaxHighlighter 2.0をMovableType4.25で使ってみる

| トラックバック(0)

一応たまにプログラムを書いたりすることもあるので、MovableType上で格好良くソースが表示出来たらいいなと思って探してみた。
そしたらMovableType用というわけじゃないけれど、目的のものを発見。

Syntax Highlighter 2.0

これを、現状のMovableType4.25で動かすメモ書きを残しておく。

まずは上のサイトから、最新バージョン(今日時点では2.0.296)をダウンロード。
Zipを解凍すると

/script
/src
/styles
LGPLv3.txt
test.html

が展開される。
このままだとサーバにインストールするのが面倒くさいのでいらないファイルを削っていく。
(今回の場合は、サーバのルートにフォルダ SyntaxHighlighter を作って、そこにまとめてインストールすることにした。)

  1. scriptフォルダを、SyntaxHighlighter にリネーム
  2. stylesフォルダの中から、以下のファイルを SyntaxHighlighter フォルダへ移動
    1. *.pngファイル全部
    2. shCore.css
    3. shThemeDefault.css
  3. SyntaxHighlighterフォルダ以外は必要ないので削除

とりあえず、これでインストールファイルの準備は完了。
サーバのルートに、SyntaxHighlighter フォルダをゴッソリコピーしちゃう。

次はMovableType側の設定。デフォルトテンプレートの場合しか説明しませんよ。

  1. ダッシュボードからデザイン→テンプレートを選択
  2. テンプレートモジュールから HTMLヘッダー を選択
  3. 今あるヘッダーの最後に、以下の内容をコピペ(行番号はウチの環境なので気にしないで)
  4. <!-- Include SyntaxHighlighter -->
    <script type="text/javascript" src="/SyntaxHighlighter/shCore.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushBash.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushCpp.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushCSharp.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushCss.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushDelphi.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushDiff.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushGroovy.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushJava.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushJScript.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushPhp.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushPlain.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushPython.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushRuby.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushScala.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushSql.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushVb.js"></script>
    <script type="text/javascript" src="/SyntaxHighlighter/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/shCore.css" />
    <link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/shThemeDefault.css" />
    <script type="text/javascript">
    	SyntaxHighlighter.config.clipboardSwf = '/SyntaxHighlighter/clipboard.swf';
    	SyntaxHighlighter.config.strings.expandSource = 'ソースを展開';
    	SyntaxHighlighter.config.strings.viewSource = 'プレーン表示';
    	SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードへコピー';
    	SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='クリップボードへコピーしました';
    	SyntaxHighlighter.config.strings.print = '印刷';
    	SyntaxHighlighter.config.strings.help = 'help';
    	SyntaxHighlighter.all();
    </script>
  5. 保存する
  6. おしまい(*´−`)

あとはフォーマットに従って記事を書けば、ソースが綺麗に表示されるハズです。
例えば、こんな感じに記述します。

<pre class="brush: cpp;">
void main() {
	printf("Hello world!!");
}
</pre>

 そうすると、こうなります 

void main() {
	printf("Hello world!!");
}

brushのところに、言語を指定してやるわけですね。
対応してるのはこんな感じ。知らないのもありますが・・・・

言語名 brush に 指定する値
Bash/shell bash, shell
C# c-sharp, csharp
C++ cpp, c, c++
CSS css
Delphi delphi, pas, pascal
Diff diff, pach
Groovy groovy
JavaScript js, jscript, javascript
Java java
Perl perl, pl
PHP php
Plain Text plain, text
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet
XML xml, xhtml, xslt, html, xhtml

 他にも、パラメータはあるんですが、説明が面倒なので本家サイトで確認してください。

MovableTypeのエディタにFCKEditorを使っている場合は、Code syntax highlight pulgin for FCKEditorをインストールするとボタン一つでソースを入力できるようになるのでオススメです。
(というか、この記事を書いている途中に存在に気付いてインストールして使いますた)

その場合、5.Use it にも書いてありますが、インストールが完了したらブラウザのキャッシュをクリアしないとプラグインが有効にならないので気をつけてください。

あー。インストール終わったけどプログラム公開するなんてこと、今後あるんだろうか・・・(マテ 

※2009/05/04追記 Code syntax highlight pulgin for FCKEditorをもう少し便利にする もあわせてどうぞ。

トラックバック(0)

トラックバックURL: http://www.boiscreative.com/blog/mt-tb.cgi/1636

TiltleGirl
illustration:壬生夏生

アーカイブ

Powered by Movable Type 4.25
http://www.jspeed.ne.jp/
boiscreativeをフォローしましょう
WebMoney ぷちカンパ

このブログ記事について

このページは、boisが2009年4月29日 14:41に書いたブログ記事です。

ひとつ前のブログ記事は「Pixivウィジェットを設置してみた」です。

次のブログ記事は「404 object not found のページをカスタマイズしてみる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。