ソースコードの見せ方について色々考えていて、良いJSをご紹介。

とは言っても情報としてはかなり古いですが・・・

dp.SyntaxHighlighterサンプルページ

DLはこちらから
syntaxhighlighter - Google Code

解凍すると以下の構成となっています。

• css
• Scripts
• Uncompressed

cssフォルダにははスタイルシート、Scriptsフォルダには圧縮されたJavaScript、Uncompressedフォルダには圧縮前のJavaScriptが入っています。

dp.SyntaxHighlighterの使い方

こんな感じでhead部分に記述を追加します。

<link type="text/css" rel="stylesheet" href="http://blog.caraldo.net/css/SyntaxHighlighter.css" />
<script type="text/javascript" src="http://blog.caraldo.net/js/shCore.js"></script>
<!-- 以下は表示したい言語に応じて -->
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushXml.js"></script>

パスは環境に応じて変えてください。「shCore.js」は必須です。
それから表示させる言語に対応するJavaScriptを読み込みます。

コード部分の記述は以下のように。

<pre name="code" class="xml">
</pre>

preタグ内にコードを記述します。

class部分の記述はLanguages - syntaxhighlighter - Google Codeを参考に

• XMLコードの場合、class="xml"
• PHPコードの場合、class="php"
• CSSコードの場合、class="css"
• JavaScriptコードの場合、class="js"
• Rubyコードの場合、class="ruby"
• SQLコードの場合、class="sql"
• Visual Basicコードの場合、class="vb"
• Javaコードの場合、class="java"
• pythonコードの場合、class="python"
• C#コードの場合、class="c#"
• C++コードの場合、class="c"
• Delphiコードの場合、class="delphi"

としてあげます。

あとは

<script type="text/javascript">
window.onload = function () {  
	dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';  
	dp.SyntaxHighlighter.HighlightAll('code');  
}  
</script>

のようにwindow.onload時に呼び出してあげればソースコードが綺麗に表示されます。
08/08/03追記
※コメントにてclipboard.swfのパスが間違えているとご指摘頂き修正しました。
ありがとうございました。
現在のファイルからのパスで記載しないとうまく動かなようです。

私の場合head部分が長くなるのが嫌だったのでshCore.js内にwindow.onload～を追記しています。

dp.SyntaxHighlighterをカスタマイズする

dp.SyntaxHighlighter 開始行番号指定 - さんきゅう堂的_STYLEを参考に色々カスタマイズしてみます。

折りたたみ式にしてみる

<!-- class="xml:collapse"で折りたたみ -->
<pre name="code" class="xml:collapse">
</pre>

下のshCore.js内のlabel部分を変更することで展開させる文字列の指定が可能です。

<!-- class="js:firstLine[44]"で行番号指定 -->
dp.sh.Toolbar.Commands = {
	ExpandSource: {
		label: '+ expand source',

↑のコードのように「:firstLine[44]」としてあげると開始行番号を変更できます。

label部分の日本語化

dp.SyntaxHighlighter ヘッダー日本語表示 - さんきゅう堂的_STYLEを参考に日本語化しようとしましたが文字コードの都合か文字化けが発生してしまいます。

<!-- charset="Shift_JIS"を追加 -->
<script type="text/javascript" src="http://blog.caraldo.net/js/shCore.js" charset="Shift_JIS"></script>
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushXml.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/js/shBrushPhp.js"></script>

このように外部jsファイルの文字コードを指定してあげることで回避できました。

その他のdp.SyntaxHighlighterのoptionについてはHighlightAll - syntaxhighlighter - Google Codeを参考にしてください。

MTでのpreタグ使用上の注意

この記事を書いている時に、MTの改行設定のおかげで勝手に改行タグが入るので苦労しました。

かといって毎回<br />を足すのも馬鹿らしい...

調べてみたところ以下のような記事がありました。

１．preタグ内で、２回改行して空の行を作らない。
２．preタグのすぐ上に、１行だけ空の行を作る。（２行以上、空けてはいけない。）
すると、preタグ内にbrタグが勝手に挿入されず、preタグ内が間延びしないで、ウェブページ上に表示されます。

preタグ内の改行（brタグ）を無効にする（MT・Movable Type）

これで回避できました。

MTで改行に悩まされている方は覚えておいた方が良いですね。

ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」

2008年5月13日