”シンプル”なデザインを、”フツー”のWEBサイトを

昨日に引き続き、今回も珍しく技術的な話を備忘録として。まさか仕事上のことでこうも書くことがあるって、これまでどれだけ仕事をしていなかったんだ、っていう。

で、今日はWordpressの投稿記事内にHTMLやCSS、その他ソースコードを表示させる方法です。こちらも仕事上で少し調べることがあって、今後も使えそうな感じだったので備忘録として書き留めておきます。

もちろん、プラグインをつかえば簡単に表示出来るし、今は機能も充実したプラグインがたくさん開発されています。ただ、表示速度が重くなるのがイヤなので、極力プラグインはつかいたくない。こんな風に思って色々ググっていたら辿りついたのが「highlight.js」なるjqueryプラグイン。実装もめちゃめちゃ簡単でした。

実装

headタグ内でcssとjsを読み込む

header.phpのheadタグ内に下記を追記します。


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

今は大抵のプラグインがCDNで配信されているので便利です。昔みたいにダウンロードして、パスを変えて・・・という必要が無くなりました。まあ、CDN配信もこれはこれでサーバーが停止したらどうなるんだ?とか色々ありますが。すいません、余談でした。
とりあえず実装作業はこれだけです。

投稿記事にソースを書いてみる

書き方(お作法)

基本的にはpreタグの中にcodeタグを書いて、更にその中に記事中に表示させたいソースコードを書いていきます。


<pre>
<code>
表示させたいソースコード
</code>
</pre>

ここで一点注意したいのが、普通おソースコードのまま貼り付けてしまうと、そのままのコードとして認識されてしまうので、一度エスケープという処理を行います。

HTML Escape / Unescape
テキストをHTMLエスケープしたり、戻したりするツールです。スマホ表示に最適化しています。

ここで吐き出された、一見何かわからなくなってしまっている(元)ソースコードを、先ほどのpreタグ、codeタグの中に貼り付けます。

すると、このようにキレイなソースコードが表示されるようになりました。

ハイライトさせた部分の色を変える

下記を参考にすればハイライト表示の色を変えることができます。

最初にheadタグ内に記述したcssのファイル名を、上のページにあるリストの中の好きなものに変更すればOKです。

ただし、そのとき「~.min.css」とする必要がありますので要注意。

最後に

実装もとても簡単なので、Wordpressにあまりプラグインを増やしたくないときなど、一度試してみてはいかがでしょうか?

なお、今回は下記を参考にさせていただきました。

プラグインなしでコードを簡単にハイライトさせるhighlight.jsの設定
ワードプレスでソースコードを記事内に記述したいときに、コードを読みやすくするハイライト機能を追加する方法はいくつかあります。高機能のプラグインも存在しますが...