webページを作る際に、ソースコードを見やすく表示したい、色分けされた表示にしたい、行番号を表示したい場合がある。 ここではそれを実装する簡単な方法の一つを紹介する。
参考: Google Code
Prettifyでソースコードを読みやすく色分けする
Google Code Prettifyを使うと簡単に、ソースコード表示をカスタマイズできるらしい。
使い方はヘッダ内に、以下を追記して、
<head>
<!--ヘッダ-->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&lang=html&skin=desert">
</head>本文中で
<pre class="prettyprint linenums lang-html"><code>
<!--コードをこの中に入れる-->
</code></pre>とすればいいらしい。
上の例ではhtml/cssの場合で、ヘッダでlang=htmlとなっているところを、lang=c、lang=pyhonとすれば他の言語も使え、
skin=desertとなっているところをskin=sunburst、skin=defaultとすればソースコードの背景色、文字色が変わる。
<pre>のclass=""中には少なくともprettyprintを入れなければGoogle Code Prettifyが適応されない。
linenumsを書くと、行番号を表示できる。
lang-htmlはコードがhtmlということを意味しており、lang-c、lang-pythonとすれば別のプログラム言語を扱える。
行番号はデフォルトだと5つおきなので、cssに以下を記載。
.prettyprint ol.linenums>li {
list-style-type: decimal;
border-left: solid 1px lightslategray;
margin-left: 3%;
/* 区切り線を表示 */
padding-left: 0.5rem;
/* 間隔の調整（必要であれば） */
}上記の例ではスクリプトを外部のurlから読み込んでいるため、ページの読み込みが少し遅い。
直接スクリプトファイル、CSSをダウンロードして使う方法もある。
まずここから
prettify-smallで始まるtarファイルをダウンロードする。
ここでdesertテーマ等の他のテーマが欲しい場合はsmallじゃない方もダウンロードする。
次にtarfileを解凍して中にあるprettify.jsとprettify.cssを取り出す。
他のテーマを使う場合はsmallではない方を解凍してstylesの中にテーマの名前のついているcssファイルがあるので、
prettify.cssの代わりに必要なテーマのcssファイルを持ってくる。
必要な.js, .cssファイルが揃ったら、自サイトの任意の場所にそれらを置いておきページ毎に読み込む。
読み込み場所はどこでもいいが、読み込み速度等を考えるとcssファイルはheadタグ中、 jsファイルはbodyタグの閉じる直前(</body>の直前)で呼び出すのが良いらしい。
例:
<head>
<!--ヘッダ-->
<link type="text/css" rel="stylesheet" href="prettify.cssの場所 or テーマ名.cssの場所">
</head>
<body>
<!--ページの内容-->
<script type="text/javascript" src="jsファイルの場所"></script>
<script>prettyPrint();</script>
</body>これで、urlを読み込んだ場合と同様に使うことができる。