エンジニアブログの第一歩!!ソースコードを紹介できる『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 |
軽量プラグインですが、JSの読み込みはやはり時間がかかります。必要な言語のファイルだけを設置しましょう。
どうですか?
導入が簡単なうえに、一気にエンジニアブログっぽい雰囲気も演出されますね。
SyntaxHighlighterの表示スタイルは、その他にも色々あります。自分好みにカスタマイズしてみるのも良いかもしれません。