ソースコードの色付け - SyntaxHighlighter - <使用編>

今回は、前回紹介したSyntaxHighlighterの使用編です。
（設定は次回）



次のhtmlを書くと、

<pre class="brush: c">
#include &lt;stdio.h&gt;

int main(void) {
    printf("Hello world\n");
    return 0;
}
</pre>

ブラウザ上では次のように表示されます。

#include <stdio.h>

int main(void) {
    printf("Hello world\n");
    return 0;
}

見比べてもらうとわかりますが、ソースコードの色付けをして表示させたい部分を
<pre class="brush: c"> ... </pre>
で囲んでいます。

brush: のあとにあるcは、ソースコードをC言語と指定させています。
これによって、ソースコードをC言語の文法にもとづいて色付けさせます。

また、htmlで"&lt;"と"&gt;"が、ソースコード上では"<"と">"になっていることに注意してください。"<"や">"、"&"のようなhtmlでエスケープが必要になる記号は、"&lt;"や"&gt;"、"&amp;"のようにエスケープさせる必要があります。

現状SyntaxHighlighterで使える言語は、こちらの本家サイトを参照。