The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

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

投稿日:2017年9月3日 更新日:

wordpressのブログでソースコードを色付きで綺麗に表示させるには?
プラグインでサイトが重くなるのは避けたい
こんな疑問に答えていきます。
wordpressブログ運営で2万PV/月を超える僕が解説していきます。

はじめに

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

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

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

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

 

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

では、導入の仕方をくわしく説明していきます。

 

作業環境

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

 

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

まず、こちらのページから下記にあるように、このコードをブログのヘッダーの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

 

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

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

デザインサンプル
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>

 

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

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

コードを挟むタグ(行番号なし)

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

もしくは

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

コードを挟むタグ(行番号あり)

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

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

行番号についての注意

(1)行番号も一緒にコピペされる

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

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

(2)多くのデザインテーマは、5行目10行目しか表示されない

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

 

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

(1)HTML形式のコードを使っている場合

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

HTML特殊文字変換ツール

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

(2)AFFINGERオリジナルのショートコードを使っている場合

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

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

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

 

他のプラグインを選ばなかった理由

(1)Crayon Syntax Highlighter

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

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

(2)Gist

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

 

まとめ

wordpressブログでソースコードを色付きで書いて表示させる方法について、書いてきました。
使い始めて1年経った今でも「code-prettify」はいいと思います。

やはり「軽い」という点がメリットですね。
ただ、いちいちヘッダーのコードを変更しなければならないのは、面倒でデメリットだと思いました。

行番号などの、デザインのカスタマイズをもう少し簡単に自由にできたらいいな、思います。

Ad-336px-stinger8

Ad-336px-stinger8

-WordPress

Copyright© The Master of Swift App Coding , 2018 All Rights Reserved.