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

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

2015年1月18日 WEB

このブログでは、コーディングやプログラミングのチュートリアル的な記事を更新しています。その際、ソースコードを「見やすく」かつ「美しく」ブログに表示することができる『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

下記の表より、
読み込む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