«prototype.jsベースでshadowbox.jsを使ってみる｜ メイン ｜mootools.jsを使用してsliding-side-barを実装するサンプル»
2008年05月13日
ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」
ソースコードの見せ方について色々考えていて、良いJSをご紹介。
とは言っても情報としてはかなり古いですが・・・
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時に呼び出してあげればソースコードが綺麗に表示されます。
私の場合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で改行に悩まされている方は覚えておいた方が良いですね。
Posted by ; k. 2008年05月13日 00:54
このエントリーのタグ
このカテゴリーの最新記事
トラックバック
このエントリーのトラックバックURL：
http://blog.caraldo.net/mt/mt-tb.cgi/92
