
ソースコードの見せ方について色々考えていて、良い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時に呼び出してあげればソースコードが綺麗に表示されます。
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 />を足すのも馬鹿らしい...
調べてみたところ以下のような記事がありました。
1.preタグ内で、2回改行して空の行を作らない。preタグ内の改行(brタグ)を無効にする(MT・Movable Type)
2.preタグのすぐ上に、1行だけ空の行を作る。(2行以上、空けてはいけない。)
すると、preタグ内にbrタグが勝手に挿入されず、preタグ内が間延びしないで、ウェブページ上に表示されます。
これで回避できました。
MTで改行に悩まされている方は覚えておいた方が良いですね。
このエントリーのトラックバックURL:
このエントリーへのトラックバック:
このブログに、ソースコードを綺麗に表示させることができるJavaScript「SyntaxHighlighter」を設置しました。
2008年11月24日 06:22 日々是作譜
先日書いた記事「Dynamic Sound Generationで蛙の...
2009年1月14日 17:11 アレとコレ.jp
テンプレートを変更しました。DailyBlogTipsというサイトから落としてきました。 テンプレートを変えると同時に,「SyntaxHighlighte...
2009年1月18日 23:10 Parts Station 開発日記
現在このブログでコードを表示する際はpreタグを使用しているのですが、コピーしやすかったり行数を表示したりと、もっと便利にしたいと思い調べてみるといいものがありました。
2009年4月23日 00:10 Webpark
ブログを書き始めると、ソースコードとかを書くことも多くなるかなと思い、自動でソー...
2009年9月 6日 11:18 うにまく ら
プログラミングや、Web系のブログを見ていると、プログラミング言語やCSSなんか...
2009年11月11日 00:26 Creative Gear
Posted by ; YU-TANG : 2008年8月 3日 22:41
>YU-TANG様
パスを修正してFireFoxで動作確認を行いました。
また追記にて修正内容、注意点を記載しました。
ご指摘ありがとうございました。
Posted by ; caraldo_k : 2008年8月 4日 00:02
- JavaScript [20]
- MovableType [22]
- PHP [8]
- Web [38]
- 携帯サイト [2]
- iPhone [8]
- デザインツール [12]
- Fireworks [3]
- Illustrator [1]
- Photoshop [6]
- パソコン [25]
- プロモーション [17]
- 個人的ななにか [39]








clipboard.swfの相対パス指定がずれているようです。Firefoxでコピーされませんでした。念のためお知らせしておきます。それでは。