ソースコードのハイライト表示は超簡単なGoogle Code Prettifyがおすすめ

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