Syntax Error.

[Sy] ブログ上でコードを綺麗に表示したい。〜SyntaxHighlighterの導入〜

2013/07/19

こんな場合には・・・

自分のサイト・ブログに SyntaxHighlighter を導入したい。

SyntaxHighlighterとは?

技術系のブログなどで、プログラムのコードに行番号が振られていたり、色が付いていたりと、きれいなデザインで表示されているのをよく目にします。

これを実現するライブラリとして、最も多く使われてるのが、JavaScript製の SyntaxHighlighter です。SyntaxHighlighterを使えば、こんなにきれいな表示が簡単にできます。

SyntaxHighlighter表示サンプル1
記事内のSyntaxHighlighterの表示について

旧ブログから移行された記事なので、SyntaxHighlighterを使った場合のスクリーンショットを使っています。

こうすると解決!

1.SyntaxHighlighterをダウンロードする。

以下のページを開き、Click here to downloadをクリックします。

⇒ SyntaxHighlighter - Download SyntaxHighlighterをダウンロードする

ダウンロードページの下の方には、過去のバージョンをダウンロードできるリンクもあります。

SyntaxHighlighterをダウンロードする(過去バージョン)

2.ダウンロードしたzipファイルを解凍する。

syntaxhighlighter_3.0.83.zipのようなファイルがダウンロードされたはずなので、解凍します。

解凍してできたフォルダの中はこうなっています。

SyntaxHighlighterフォルダの中身

この中で、SyntaxHighlighterを使うのに必要なのは、scriptsフォルダとstylesフォルダです。

3.ファイルをサーバに配置する。

scriptsフォルダとstylesフォルダを、サイト・ブログが動いているサーバにアップロードします。

4.SyntaxHighlighterを使いたいページのHTMLに手を入れる。

headタグ内で必要なこと

SyntaxHighlighter表示サンプル2

(2)は言語に合わせて必要なファイルを読み込みます。例えば、JavaScriptとPHPのコードをそれぞれ表示したい場合は、shBrushJScript.jsshBrushPhp.jsの2つを読み込む必要があります。

(3)は、stylesフォルダ内から好きなスタイルを一つ選んで読み込んでください。僕はshCoreDefault.cssにちょっと自分好みに修正したものを新しく作って使っています。

(4)は、実際にページ読み込み時にプログラムを実行するための命令ですので、これを忘れると何も起こりません。

bodyタグ内でのコードの記述方法

SyntaxHighlighter表示サンプル3

bodyタグ内へのコードの記述方法は2つあります。

(1)のpreタグで囲う方法と、(2)のscriptタグで囲う方法です。

どちらも出来ることに差はないので、好きな方で良いでしょう。僕はscriptタグを使っています。

ポイントはココだ!

最新バージョンは3.x系ですが、3.x系では、旧バージョンの2.x系にあったツールバー機能(コードをクリップボードへコピーできたり印刷できたりした)が廃止されています。

Flashで作られていた機能だったので、世の流れに合わせて廃止されたものと思います。もし、ツールバー有りの方がいい!という方は2.x系を使ってください。