ソースコードを綺麗に表示する方法

Livedoor Blogでソースコードや、Bash/Shellなどの実行結果を綺麗に表示したい場合があります。
その場合に重宝するのが、SyntaxHighlighterです。 

こんな感じに表示してくれるやつです。
SyntaxHIghlighter_image 
行番号や色分けなどを自動で行ってくれる賢いやつで、ソースコードの視認性が向上します。 

SyntaxHighlighterのダウンロード

SyntaxHighlighterのWebサイトにアクセスしてください。
http://alexgorbatchev.com/SyntaxHighlighter/ 

右側の「download」からダウンロードページに移動してください。
Sh 02


「click here to download」をクリックしてください。
Sh 03


zipファイルがダウンロードされるので、どこでもいいので解凍してください。

Livedoor Blogへのファイルアップロード

解凍したフォルダの中には、scriptsとstyleフォルダがあります。
この2つのフォルダに格納されているファイルを、Livedoor Blogにアップロードする必要があります。
sh_10
 

まず、この2つのフォルダと同名のフォルダをLivedoor Blog上に作成します。
 Sh 04

sctiptsフォルダには、「shXxxx.js」という、それぞれの言語に対応したスクリプトファイルがあります。
必須なのは「shCore.js」で、それ以外は、表示したい言語に応じて、先ほど作成したフォルダにアップロードしてください。

言語とスクリプトファイルの対応は以下のページを確認して下さい。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 
 

私の場合は、Bash/Shell用に「shBrushBash.js」、CSS用に「shBrushCss.js」、JavaScript用に「shBrushJscript.js」、PHP用に「shBrushPhp.js」、XML用に「shBrushXml.js」をアップロードしました。
sh_05
 

stylesフォルダには、「shXxxx.css」という、CSSファイルがあります。
必須なのは「shCore.css」で、それ以外は、表示したいスタイルに応じて、先ほど作成したフォルダにアップロードしてください。

私の場合は、デフォルト表示の「shThemeDefault.css」をアップロードしました。
Sh 06

 

デザイン設定でコードを埋め込む

jsファイルとcssファイルをアップロードしたら、最後にそれらを「デザイン設定」で登録します。
「ブログ設定」→「デザイン/ブログパーツ設定」→「PC」→「カスタムJS」を開きます。

カスタムJSにコードを埋め込むと、デザインを変更しても、継続してSyntaxHighlighterを使うことが可能となり、その都度コードを埋め込む作業が必要なくなるので楽になります。

「head内」を選択して、コードを埋め込み、保存してください。
sh_09


埋め込むコードは、以下のように、アップロードしたファイルを指定するコード(※)に加え、SyntaxHighlighter.all()という関数を呼び出すコードとなります。 










※ドメイン部分(klx.ldblog.jp)は、適宜皆さんのブログのドメインに変更してください。 


SyntaxHighlighterの使い方

使うときは、ソースコードを以下のpreタグで囲んでください。

<pre class="brush:言語名"></pre>

「brush:言語名」の「言語名」には、アップロードしたスクリプトファイルの中から、表示する言語(xml、php、jsなど)を指定してください。

以下のページの「Brush aliases」列に言語指定文字列が書いてあるので、参考にしてください。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 

例えば、こんな感じに指定すると、

<pre class="brush:php">
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) {
  echo 'あなたはInternet Explorerを使用しています<br />';
}
</pre> 


こんな感じに表示されます。

if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) {
  echo 'あなたはInternet Explorerを使用しています
'; }

これでLivedoor Blogでソースコードを綺麗に表示することができました。
その他にも、preタグに属性を追加することで表示方法を変えたり、
好みのデザインに変更が可能なので、皆さんもチャレンジしてみてください。