Google Code Prettifyはコードを見やすくするスタイル

Google Code Prettifyとは、自分のwebサイトなどに

htmlやcssやjavascriptなどのコードを見やすくしてくれるスタイルのこと

読み込み方↓ htmlの＜head＞内に記述する

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

コード表示させたい部分を

pre 要素で囲み

pre 要素に

prettyprint

というクラスを指定するだけ

行を表示する場合は⇒prettyprint linenums とする

また、↓下記のように後ろの部分を書き換ええることで、デザインが簡単に変更できる
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=●●●●　

●●●●のskin=の部分を下記のように変更すると、デザインが簡単に変更できる

（デフォルト設定↓）
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=default

skin=default
skin=desert
skin=sons-of-obsidian
skin=sunburst
skin=doxy

実際にクラスをつけたサンプル↓ htmlのpre要素にクラス指定する

＜pre class="prettyprint"＞
<span>hoge1</span>
<span>hoge2</span>
<span>hoge3</span>
＜/pre＞