ソースコードのハイライト表示は超簡単なGoogle Code Prettifyがおすすめ
ソースコードのハイライト表示ですが、Google Code Prettifyに落ち着きました。
使い方を分かりやすく解説します。
使い方は簡単
<head>に次の1行を追記してGoogle Code Prettifyを読み込みます。
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>パラメータの「?skin=desert」は、テーマの指定です。
- default（指定しないとこれになります）
- desert（僕はこれを指定しています）
- sunburst
- sons-Of-Obsidian
- doxy
参考：Gallery of themes for code prettify
そして、ソースコードを<pre class="prettyprint">で囲みます。
<pre class="prettyprint">
<code>
ここにソースコードを書きます。
</code>
</pre>class="prettyprint"の指定は決まりごとです。
<code>を入れることもできます。
HTMLを囲む場合は、エスケープ（変換）を忘れずに。エスケープをしないと、HTML要素として解釈されてしまいます。
行番号の付け方
<pre class="prettyprint">のclassにlinenumsを追加することで行番号を付けることができます。
<pre class="prettyprint linenums">毎行に番号を付ける
.prettyprint ol.linenums > li {
list-style-type: decimal;
}
linenumsを追加しただけだと5行毎ですが、CSSにlist-style-type: decimal;を指定すると毎行に番号が付きます。
print('hogehoge')
print('hogehoge')
print('hogehoge')
print('hogehoge')
print('hogehoge')list-style-type: decimal;を指定した場合の表示例です。
任意の番号から開始する
<pre class="prettyprint linenums:36">任意の番号から開始するには、linenumsに「:（コロン）開始番号」を付与します。
print('hogehoge')
print('hogehoge')
print('hogehoge')
print('hogehoge')
print('hogehoge')
linenums:36を付与した場合の表示例です。
領域からはみ出る長いコードの対応
ソースコードが長いと領域からはみ出てしまうため、CSSに改行もしくはスクロールバーの指定をします。
.prettyprint{
white-space: pre-wrap;
}改行する場合は、white-space: pre-wrap;を指定。
.prettyprint{
overflow-x: auto;
}スクロールバーを表示する場合は、overflow-x: auto;を指定。
CSSでさらに見やすく
CSSで余白や線の色などを指定することができます。
.prettyprint{
margin-bottom: 20px;
padding: 20px 25px;
line-height: 1.5;
overflow-x: auto;
}
.prettyprint ol{
padding: 0 30px;
}
.prettyprint ol.linenums > li{
list-style-type: decimal;
border-left: solid 1px #ebb15e;
margin: 0;
padding-left: 5px;
}
このブログで指定している余白や線の色ですが、参考になれば幸いです。
さいごに
google code prettifyだけで表示速度が変わるとは思いませんが、不要なJavaScriptを読み込ませないように心がけていると、きっと良いことがあるはずです。
僕はWordPressを使っていますが、特定のカテゴリーにだけgoogle code prettifyを読み込んでします。