ソースコードをカラーリングしてくれるJS『syntaxhighlighter』を入れてみた。

January 26, 2009

最近、ブログにソースコードを書くことが多くなってきたので、ソースコードをカラーリングする、JS『syntaxhighlighter』を入れてみました。MTプラグインでなく普通のJSです。

こんな感じのやつです。

<!--ここからページナビ部分-->
<ul class="navi">
    <mt:IfPageBefore>
        <li><a href="<$mt:BlogURL$>">最初のページ</a></li>
        <$mt:PageBefore delim="« 前の5件"$>
    </mt:IfPageBefore>
    <$mt:PageLists delim="" link_start="<li>" link_close="</li>"$>
    <mt:IfPageNext>
        <$mt:PageNext delim="次の5件 »"$>
        <!--最終ページ取得部分-->
        <li><a href="<$mt:BlogURL$>index_test_<?php echo ceil(<$mt:BlogEntryCount$>/5); ?>.html">最後のページ</a></li>
    </mt:IfPageNext>
</ul>

ここら辺を参考に導入させて頂きました。

ソースコードを飾る::syntaxhighlighter FC2ブログでの導入メモ

Binbo-Special−技術資料−JavaScript−ソースコードを見やすくきれいに表示（SyntaxHighlighter）

手順

1. 以下ページよりダウンロード

このページ(Google Code)の、右部分の「SyntaxHighlighter_1.5.1.rar」ソースをダウンロードします。

2. サーバーにアップロードします。

自分の環境に合わせて、cssファイルjsファイルをアップロードします。

3. 以下コードを差し込みます。

本来は、本文中に差し込むべきですがBinbo-Specialさんにならって、shCore.jsの一番下に以下のコード差し込みました。

window.onload = function () {
    dp.SyntaxHighlighter.HighlightAll('code');
}

4. テンプレートのheadにCSSリンクとJSリンクを挿入します。

以下はhead内に

<link type="text/css" rel="stylesheet" href="(サーバーに合わせて)/SyntaxHighlighter.css" />

5. </body>タグ直前にJSリンクを挿入します。

以下は最後の</body>タグのすぐ上あたりに、挿入します。

私の場合は、htmlとphpとcssぐらいしか使わないので、以下の3つを挿入しました。
(htmlはshBrushXmlを入れます)

<script type="text/javascript" src="(サーバーに合わせて)/shCore.js"></script>
<script type="text/javascript" src="(サーバーに合わせて)/shBrushXml.js"></script>
<script type="text/javascript" src="(サーバーに合わせて)/shBrushCss.js"></script>
<script type="text/javascript" src="(サーバーに合わせて)/shBrushPhp.js"></script>

このコードをヘッダーに、入れていると動きません。
導入当初、head内に入れていて動かなくて悩みました。

apeirophobia: syntaxhighlighterを入れてみるの巻のエントリで

全然上手くいかない理由が分かった。 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に入れちゃあ駄目なんですね。うん、どこで発動するんだろう？って疑問はあったんだ・・ｗ

というのを発見して、解決しました。助かりました!

6. <pre><textarea name="code" class="xml" cols="60" rows="5">と</textarea></pre>で囲む。

classは、htmlの場合はxml、cssとphpはそのままです。<pre>はMT上で、改行を勝手に<br />としてしまうのを避ける為です。

これで、ソースコードが見やすくなると思います。

以上です。

[Movable TypeをCMSとして使う] 第4回 MT4?MTOS?: 前回のエントリ([Movable TypeをCMSとして使う] 第3回ファイル構成を考える)の続きです。 MTこと、Movable Typeには、バージョン4から、MT4とMTOS(オープンソ... MORE »
[Movable TypeをCMSとして使う] 第3回ファイル構成を考える: 前回のエントリ([Movable TypeをCMSとして使う] 第2回プラグインを考える)の続きです。 Movable Typeは、あくまでBlogとして使うことを前提に作られていますので... MORE »
[Movable TypeをCMSとして使う] 第2回プラグインを考える: 前のエントリ([Movable TypeをCMSとして使う] 第1回構成を考える)の続きです。書く順番が違う気もしますが、MTをCMSとして使う時に、便利なプラグインをご紹介します。プラ... MORE »
[Movable TypeをCMSとして使う] 第1回構成を考える: 前置き先日、告知したサト研が来週末2月21日に行われます。今回から数回にわたりのサト研LT(ライト人グトーク)用に、ブログで先に書いてまとめておきます。時間的にも全部話せないと思うので、「詳し... MORE »
Movable Typeのバージョンアップ手順: 先日、ちょっとしたトラブルでMTのバージョンを上げました。 MTのバージョンアップの手順をまとめておきます。プラグインの対応状況を確認するサイトで重要なシステム部分でプラグインに頼っている場合... MORE »

コメントする

このブログ記事に対するトラックバックURL

ヤマダヤスヒロ Gmail mixi Delicious Flickr iddy Twitter Tumblr

福岡県福岡市在住 Webデザイナー。
1973年福岡生まれ。射手座、B型。HNは、やいぶ・Yaive など。

幼少期から、モノを作ることが大好き。しかし、小学生の頃の夢は弁護士。中学生で、漫画家を志すも、高校生時に建築に強く興味を持ちあっさり方向転換。某デザイン系大学を経て、インテリアデザイナーになる。その後建築士の免許を取得。建設会社で現場監督を経験、建築塗装会社で営業を経てWebマスターになる。 2006年に独立開業、BULANCOとしてWeb制作に携わる。現在に至る。

業務範囲

制作環境

参加コミュニティー

ページトップへ

HOME »
Blog »
MovableType »
ソースコードをカラーリングしてくれるJS『syntaxhighlighter』を入れてみた。

2010
- January
2009
- December
- November
- September
- July
- April
- February
- January
2008
- December
- November
- September
- August
- February
- January
2007
- December
- September
- July
- June
- May
- April
- March
- February

RSS

福岡のホームページ制作[BULANCO(ブランコ)]のWeb制作のこぼれ話