google code-prettifyを導入
設定その1の記事内で、コードを記載した。
これを見てみると、preタグで囲んだだけだとベタすぎていかにも見栄えが悪い。
そこで、google code-prettifyで色を付けてみることにした。
google code-prettfyはjavascriptを読み込むだけでコードをハイライト表示してくれるので、お手軽だ。
コードを追加
body閉じタグの直前に、javascriptを読み込む1行を追加。
<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
あとは、コード記載部分にclass属性を付けてやるだけだ。
<pre class="prettyprint">
<ｐ>hogehoge</p>
</pre>
prettyprint属性を付けるだけでいいのでラクチン。
の、はずだった。
google code-prettifyが動作しない
ところが、思ったように動作しない。
いろいろ試してみると、どうやらwordpressのAMPプラグインと相性が悪いようだ。
AMPプラグインを無効化してみると、ちゃんと色分けされて表示されるようになった。
AMPプラグイン
このブログは、AMP化してgoogleにもインデックスされている。
しかしAMPを推進しているgoogle謹製google code-prettifyで不具合が起こるとは、なんとも皮肉なものだ。
どうするか考えたのだが、結局AMP化を諦めることにした。
というのも、モバイル環境でSTINGER8のハンバーガーメニューが動作しないという副作用も出ていたからだ。
いろいろ対応するのも大変なので、ここは一度AMPを外してみることにした。
class属性も自動化してしまう
記事の執筆の際は、markdownで書いている。
コードを書く場合は「```」で囲むことになっている。
ところが、prettyprint属性をこの時点で付けられないのがネックだ。
そこで、javascriptで属性を加えてしまうことにした。
body閉じタグの直前に、下記のコードを追加。
<script type="text/javascript">$(document).ready(function () {$('code').addClass('prettyprint');});</script>これで、markdownで普段通り書いていくだけで良い。
結果
コードがハイライト表示されて、良い感じだ。
AMPについては、おいおい対応するか検討し直そう。
