×

エンジニアブログの第一歩!!ソースコードを紹介できる『SyntaxHighlighter』

2015年1月18日 WEB

このブログでは、コーディングやプログラミングのチュートリアル的な記事を更新しています。その際、ソースコードを「見やすく」かつ「美しく」ブログに表示することができる『SyntaxHighlighter』というものを使っているので、その導入手順と使い方について。

syntaxhighlighterとは

HTMLやCSSなどのコードは、preタグというタグでくくってあげれば、ブログ記事でも表示することができます。

実際に、このブログのH3タグCSSをpreタグで表示してみましょう

#main-contents h3 {
    border-bottom: 1px solid #414141;
    border-top: 1px solid #414141;
    font-size: 1.35em;
    font-weight: bold;
    margin: 0 1em 1.5em;
    padding: 0.85em 0;
}

なんだか味気ない。。。
このように表示することはできるのですが、WEBチュートリアル記事として、このまま説明を続けるのはいかがなものかと思います。

そこで便利なのが、多くのエンジニアブロガーさんも使用しているプラグイン、『SyntaxHighlighter』なのです。

これを導入すると、このように表示されます。

#main-contents h3 {
    border-bottom: 1px solid #414141;
    border-top: 1px solid #414141;
    font-size: 1.35em;
    font-weight: bold;
    margin: 0 1em 1.5em;
    padding: 0.85em 0;
}

かっこいい!わかりやすい!

クラス名、クラスタ、それぞれを色分けしてくれるので、ぐっと視認性が高まります。

導入手順

まずは「SyntaxHighlighter」を 公式サイトからダウンロード。

英語ばかりでわかりにくいですが、「ダウンロード」リンクは右上にあります。

公式サイト

ダウンロードしたファイルを解凍し、JSとCSSを設置。

読み込むための記述を<head>部分に書き込みます。
その際JSやCSSが入ったフォルダには色々ファイルが入っています。各プログラム言語ごとに、表示scripts、CSSが分かれているので、使用したい言語のファイルだけを読み込みましょう。

ライブラリの読み込み

今回はCSSとHTMLを表示させるために、このように記述してみました。

<サンプル>


 


 


 

そしてブログ記事で紹介したいコードを、<pre>タグを使ってで記述。

この際指定のクラスを<pre>に振ってあげることで、SyntaxHighlighterがスタイルつきでコードを表示してくれるようになります。

CSSの内容を見せたければ、このように記述すればOK

syntaxhighlighter記述方法

下記の表より、
読み込むJSの名前は”File name”を、
<pre>タグに振るクラスは、”Brush名”を参考にしてください。

言語 Brush名 File名
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

軽量プラグインですが、JSの読み込みはやはり時間がかかります。必要な言語のファイルだけを設置しましょう。

どうですか?

導入が簡単なうえに、一気にエンジニアブログっぽい雰囲気も演出されますね。

SyntaxHighlighterの表示スタイルは、その他にも色々あります。自分好みにカスタマイズしてみるのも良いかもしれません。

関連記事