ブログでソースコードをきれいに表示するよ！ | google-code-prettify
こんばんわ。きっしーです。
今日は、ブログでソースコードをきれいに表示する方法を紹介します。
ソースコードをブログなどのWebサイトで表示する際に、 Visual StudioやeclipseなどのIDEのようにキーワードをきれいに色づけして、 シンタックスハイライト表示したいですよね。
ここで紹介する「google-code-prettify」を使えば、たった１行でできてしまいます。
google-code-prettifyの使い方
『google-code-prettify』は、Googleが提供するソースコードを シンタックスハイライト表示するシンタックスハイライターです。
使い方は簡単。 以下のコードをHTMLのhead内に書くだけ。
[HTML (head)]
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
あとはソースコードを<pre class="prettyprint"></pre>の 中に書くだけです。
[HTML (body)]
<pre class="prettyprint">
void main()
{
std::cout << "Hello google-code-prettify!";
}
</pre>
[表示例]
void main()
{
std::cout << "Hello google-code-prettify!";
}
</pre>
ただし、ソースコードを書く上で1点注意があります。 HTML上にソースを記述するので、HTMLの特殊文字(<、>、&など)を 変換する必要があります。
本記事の最後に、HTMLの特殊文字を変換してくれる便利なサイトを紹介しています。 ＃ありがたや。。
カラーテーマを変更する
カラーテーマはGoogleがいくつか用意しています。 テーマはこちらから好みのものを選びます。 ⇒Gallery of themes for code prettify
テーマを変更するには、HTML(head)に記述した「skin=sunburst」の部分を変更します。 たとえば、Desertのテーマを使用する場合は、「skin=desert」とします。 ちなみに、このブログではsunburstのテーマを使用しています。
行番号を表示する
ソースコードの行数を表示したい場合は、class名にlinenumsを加えます。 sunburstのテーマだと行数は5行毎に表示されます。
[HTML (body)]
<pre class="prettyprint linenums">
int sum(int x, int y)
{
return x + y;
}
int sub(int x, int y)
{
return x - y;
}
int mul(int x, int y)
{
return x * y;
}
</pre>
[表示例]
int sum(int x, int y)
{
return x + y;
}
int sub(int x, int y)
{
return x - y;
}
int mul(int x, int y)
{
return x * y;
}
行番号を途中から表示する
ソースコードの行数を途中から表示したい場合は、class名にlinenums:開始行数を加えます。
[HTML (body)]
<pre class="prettyprint linenums:5">
int sum(int x, int y)
{
return x + y;
}
int sub(int x, int y)
{
return x - y;
}
int mul(int x, int y)
{
return x * y;
}
</pre>
[表示例]
int sum(int x, int y)
{
return x + y;
}
int sub(int x, int y)
{
return x - y;
}
int mul(int x, int y)
{
return x * y;
}
まとめ
google-code-prettifyのcdn版を紹介しました。 cdn版はたった1行書くだけで使える、とてもお手軽な方法です。
cdn版ではなく、google-code-prettifyのコードをダウンロードして、 サイトにアップすると、もう少し凝ったカスタマイズができます。
個人的には、1行書くだけのお手軽さと表示も十分きれいなので、cdn版で十分！
参照サイト
見出し1
見出し2
見出し3
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。