wordpressブログでソースコードを色付きで書いて表示させる方法

wordpressのブログでソースコードを色付きで綺麗に表示させるには？
プラグインでサイトが重くなるのは避けたいならGoogle code-prettifyがおすすめって本当？
こんな疑問に答えます。

wordpressブログ運営で２万PV/月を超える僕が解説していきます。

作業環境

WordPress 4.9.3
使用スタイル AFFINGER5(WING)

WordPressブログでソースコードを色付きで書いて表示させる方法【Google code-prettifyがおすすめ】

wordpressブログでソースコードを色付きで書いて表示させる場面って多いですよね。

方法はたくさんあるけれど、プラグインは実は重いものが多いです。
なので、Google code-prettifyがおすすめです。

実際に見せると、こんな感じ。

func decimalNumberByRaisingToPower(_ power: Int) -> NSDecimalNumber
dNum = [dNum1 decimalNumberByRaisingToPower:2];

綺麗で見やすいですよね。

ブログのヘッダーにコードをコピペ

まず、こちらのページから下記にあるように、このコードをブログのヘッダーのscript欄にコピペします。

・</head>の直前に入れます。
・前提として、子テーマでヘッダーファイルをを編集できるようにしておいた方がいいです。

Setup
Include the script tag below in your document:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
https://github.com/google/code-prettifyより引用

Github「code-prettify」
https://github.com/google/code-prettify

Githubの解説ページの重要な部分
https://github.com/google/code-prettify/blob/master/docs/getting_started.md

最新の導入方法とポイントに関して、ここのサイト様を参考にしました。

Google code-prettifyの使い方（2017年6月現在）
http://raimon49.github.io/2017/06/24/usage-google-code-prettify.html

好みのデザインスキンに調整する

コードの見た目のデザインテーマを変えられます。

デザインサンプル
https://rawgit.com/google/code-prettify/master/styles/index.html

デザインを変える場合、ヘッダーに挿入するコードも次のように変わるので、注意が必要です。

Default

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

Desert

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

Sunburst

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

Sons-Of-Obsidian

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=Sons-Of-Obsidian"></script>

Doxy

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

実際に文章中で使用する時のタグ

導入設定後は、このタグで挟むだけで色付きコード化します。

コードを挟むタグ（行番号なし）

<pre class="prettyprint">...</pre>

もしくは

<code class="prettyprint">...</code>

コードを挟むタグ（行番号あり）

行番号を入れたい場合は、このタグで挟みます

<pre class="prettyprint linenums">...</pre>

行番号についての注意

（１）行番号も一緒にコピペされる

行番号を入れて表示させた場合、読者がコードをコピペする時に、行番号も一緒にコピペされます。
困りますね。

行番号なしも両方載せればいいんでしょうか。

（２）多くのデザインテーマは、５行目１０行目しか表示されない

ほとんどのテーマで、行番号はシンプルに５、１０、１５行目に表示されるだけです。
１行目の「１」も表示されないので、注意が必要です。

これだけでは、上手くコード表示してくれない場合がある

（１）HTML形式のコードを使っている場合

HTMLのコードは、どうしてもHTMLと解釈されてしまうので、変換が必要らしいです。

HTML特殊文字変換ツール

こちらのツールを使って、HTMLの記述を特殊な形に変換すれば、上手くいきました。

（２）AFFINGERオリジナルのショートコードを使っている場合

AFFINGER5(WING)では、上記のタグで挟むだけでは、コード表示になってくれない場合が多いです。

この場合は、ショートコードを分断するように（消す）の文字を挟みました。
他に方法あったら知りたい。

おそらく、これは防ぎようがなくて、AFFINGER作者様のページでは、説明ページだけスクリプトで制限しているのかもしれません。

WordPressブログでソースコードを色付きで書いて表示させる他の方法【選ばなかった理由】

（１）Crayon Syntax Highlighter

例えばこのプラグインが有名ですね
Crayon Syntax Highlighter

でも、重いからやめました。

（２）Gist

Gistという方法もいいかも
めったにコードをブログに載せないなら、この方法もありかもしれないですね。

というわけで今回は以上です。

使い始めて１年経った今でも「code-prettify」は軽くていいと思います。
ただ、いちいちヘッダーのコードを変更しなければならない・デザインのカスタマイズは、面倒でデメリットだと思いました。