ソースコードのハイライト表示は超簡単な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を読み込んでします。