以前紹介したのですが、このブログではgoogle-code-prettifyってのを使ってコードをハイライトしていました。
でも、微妙に使いにくかったんですよね。色づけの判断がちょっと微妙なのと、行数が出ないのが見た目的によろしくない。
なので、巷の技術系ブログでよく使われているのを見かけるSyntaxHighlighterってのを使ってみました。
インストールと設定方法
まず、SyntaxHighlighter @ Open Sourced Brain からファイルをダウンロードしてきます。
解凍するとsyntaxというフォルダが出来るので、それをpluginsの中にそのまま入れます。
次に、プラグインを有効化してあげます。
次に、各種設定から使用するコードの種類を選択します。以下の言語が選択できます。
- C++
- C#
- CSS
- Delphi, Pascal
- Java
- JavaScript
- PHP
- Python
- Ruby
- SQL
- VisualBasic, VB.NET
- XML, XHTML, XSLT, HTML
とりあえず使いそうな言語にチェックを入れます。他にも行数の表示などの設定が出来ます。
CSSとJSの読み込み
次にハイライトする為のCSSとJSを読み込みます。
プラグインを有効化した時点でCSSは自動的に読み込まれるみたいです。
ただ、JSファイルは自動的に読み込まれないみたいです。これが分からなくて、小一時間躓きました。どこのブログを読んでもJSの読み込みについては書かれていない・・・。もしかして、自分の環境だけなのだろうか・・・。
とりあえず</body>の直前で
<!-- SyntaxHighlighter Start -->
dp.SyntaxHighlighter.HighlightAll('code');
<!-- SyntaxHighlighter End -->こんな感じでJSを読み込んであげます。
これは、ダウンロードしたファイルの中にあるScriptフォルダの中にあるJSファイルを読み込んでいます。先ほどの各種設定から設定した言語のJSを読み込んであげます。てか、どう考えてもここは各種設定から設定してるんだから自動的に吐き出されるはずだよなぁ・・・。なんでなんだろう・・・。
コードを書いてみよう
あとは
[ source:css]ここにコードを書きます。[/code]
こんな感じで設定してあげると、ハイライトされて表示されます。cssの部分は、お好きな言語に指定してください。あと、”[”の後に半角スペースが入っていますが、実際には要りません。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
