SyntaxHighlighterを使って美しく

最近はブログ上でプログラムのコードを記載する機会が増えています。完全に情報屋な感じですねorz
それはさておき、となるといかにコードを分かりやすく表現するかです。ちらほら行番号やらをご丁寧に書き込んでいる人を見かけて、どうやってるのかなーと調べてみたら、「SyntaxHighlighter」というライブラリを活用していることが分かりました。その利用方法をご紹介します。

まず下記アドレスからライブラリをダウンロードします。今回はバージョン3.0.83をダウンロードしました。

そして解凍し、適当なディレクトリに保存します。

次にコードを記載するページのヘッダーに下記コードを入力。

<link rel="stylesheet" href="/SyntaxHighlighter/styles/shCore.css" type="text/css" />
<link rel="stylesheet" href="/SyntaxHighlighter/styles/shCoreDefault.css" type="text/css" />
<script type="text/javascript" src="/SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/scripts/shBrushCpp.js"></script>

保存したディレクトリまで相対パスは適宜変更。スタイルシートの「shCore.css」はリンク必須で、同ディレクトリにある他のスタイルシートを適当に組み合わせたら配色を様々に変更できます。

JavaScriptの「shCore.js」はリンク必須。また同ディレクトリにある他のJavaScriptもリンクすることで様々な言語に対応できます。

次のように表示したいコードをpreタグで囲い、クラス属性を「brush:cpp」とします。このクラス名は言語によって変更します。なおHTML中に書き込むので、「<」といった特殊文字は「&lt;」などのように書き換える必要があります。

<pre class="brush:cpp">
#include &lt;iostream&gt;
int main()
{
std::cout &lt;&lt; &quot;Hello World!\n&quot;;
return 0;
}
</pre>

最後にbodyの終了タグ直前に下記コードを追加して完了。

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

これを実際に表示するとこのようになります。

#include <iostream>
int main()
{
std::cout << "Hello World!\n";
return 0;
}

また言語によってどのJavaScriptをインクルードし、preタグのクラスに何を入れるかを次に示します。

Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js


より

こんなに言語知らないです・・・”汗

作成者: きたけん

神戸出身&在住。大学では環境を学び、今はまちづくりに携わる。思い立ったらすぐに飛び出してしまう。

2件のコメント

  1. おぉー。ActionScript用のあったんだ!
    今度ブログに貼るときに使おうっと

  2. お、お久しぶりです~。
    ActionScriptって初めて聞いたんでWikipediaで調べたんですけど、Flashの言語みたいやね。そっちの勉強してるんね。

コメントは受け付けていません。