[Sy] ブログ上でコードを綺麗に表示したい。〜SyntaxHighlighterの導入〜
こんな場合には・・・
自分のサイト・ブログに SyntaxHighlighter を導入したい。
SyntaxHighlighterとは？
技術系のブログなどで、プログラムのコードに行番号が振られていたり、色が付いていたりと、きれいなデザインで表示されているのをよく目にします。
これを実現するライブラリとして、最も多く使われてるのが、JavaScript製の SyntaxHighlighter です。SyntaxHighlighterを使えば、こんなにきれいな表示が簡単にできます。
記事内のSyntaxHighlighterの表示について
旧ブログから移行された記事なので、SyntaxHighlighterを使った場合のスクリーンショットを使っています。
こうすると解決！
１．SyntaxHighlighterをダウンロードする。
以下のページを開き、Click here to downloadをクリックします。
ダウンロードページの下の方には、過去のバージョンをダウンロードできるリンクもあります。
２．ダウンロードしたzipファイルを解凍する。
syntaxhighlighter_3.0.83.zipのようなファイルがダウンロードされたはずなので、解凍します。
解凍してできたフォルダの中はこうなっています。
この中で、SyntaxHighlighterを使うのに必要なのは、scriptsフォルダとstylesフォルダです。
３．ファイルをサーバに配置する。
scriptsフォルダとstylesフォルダを、サイト・ブログが動いているサーバにアップロードします。
４．SyntaxHighlighterを使いたいページのHTMLに手を入れる。
headタグ内で必要なこと
(2)は言語に合わせて必要なファイルを読み込みます。例えば、JavaScriptとPHPのコードをそれぞれ表示したい場合は、shBrushJScript.jsとshBrushPhp.jsの2つを読み込む必要があります。
(3)は、stylesフォルダ内から好きなスタイルを一つ選んで読み込んでください。僕はshCoreDefault.cssにちょっと自分好みに修正したものを新しく作って使っています。
(4)は、実際にページ読み込み時にプログラムを実行するための命令ですので、これを忘れると何も起こりません。
bodyタグ内でのコードの記述方法
bodyタグ内へのコードの記述方法は2つあります。
(1)のpreタグで囲う方法と、(2)のscriptタグで囲う方法です。
どちらも出来ることに差はないので、好きな方で良いでしょう。僕はscriptタグを使っています。
ポイントはココだ！
最新バージョンは3.x系ですが、3.x系では、旧バージョンの2.x系にあったツールバー機能（コードをクリップボードへコピーできたり印刷できたりした）が廃止されています。
Flashで作られていた機能だったので、世の流れに合わせて廃止されたものと思います。もし、ツールバー有りの方がいい！という方は2.x系を使ってください。