ブログ上にソースを記述する際、美しく表示する方法
最近多くのweb系のブログで見られるようになった上記のようなソースを綺麗に表示してくれるフォーマット。その導入方法をご紹介します。これまで、ブログでソースを紹介しようにも＜＞を特殊文字で表したり、どこからどこまでがソースなのか分かりにくい部分もありましたが、これを導入することで、美しくユーザビリティにも配慮したソースを紹介することができます。うーんまさにプロっぽい。
- まずgoogle codeから導入に必要なソースをダウンロードします
一般的に「dp.SyntaxHighlighter」と読ばれているようで、http://code.google.com/p/syntaxhighlighterからダウンロードできます。- ファイルの中身を確認
ダウンロードしたファイルには「css」「Scripts」「Uncompressed」フォルダが入っています。（Uncompressedフォルダは圧縮前のJavaScriptですので無視しててもいいでしょう）※ダウンロードしたファイルは拡張子「.rar」となっていて解凍できない解凍ソフトが入っているかもしれません。+Lhacaなどでは解凍できますので、解凍できなかった場合は試してみてください。- 試しにindex.htmlを作ってみます
それでは、導入したいと思いますので、試しにindex.htmlファイルを作ります。<head>内に以下のソースを記入します。
※パスには注意してください。（htmlファイルを置く位置によって変動します。） そして<body>内に、ソースとして表示させたい箇所を<pre>で挟みます。body内に以下のように記入します。- 注意：pre name="code" class="xml"のclass="○○"
- class部分の記述は以下をご参考下さい。
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"
- ちょっとカスタマイズ
- ソースコードの上に"view" "copy to clipboard" "print" "?" となっていますが、英語仕様になっています。日本語仕様にしたいときは、ScriptsフォルダのshCore.jsを修正します。文字検索をかけてその部分を日本語に置き換えればカスタマイズできます。但し文字コードには注意が必要です。 charset="Shift_JIS"を追加することで日本語仕様になります。
導入する方法
