ソースコードを綺麗に表示する

by sixl

目次

方法

1. 以下のコードをheadタグの中に追加します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

2. preタグにclass="prettyprint"を追加します。

<pre class="prettyprint">
/* ここにコードを記載 */
</pre>

以上で、上記のようにコードが綺麗に表示されます。また、...run_prettify.js の最後に ?skin=Sunburst のように、スキンを指定することで、見た目を変えることが出来ます。スキンの種類はこちら。

解説

Googleが提供しているハイライトツールです。CDNを利用してオンラインで読み込ませるほかに、ソースをダウンロードして利用することも出来ます。

https://github.com/google/code-prettify/blob/master/docs/getting_started.md