google code-prettifyでコード表示をハイライト（動作しないので焦るが解決済み）　⇒　STINGER8設定その2

投稿日：2019年4月26日更新日：2019年5月6日

code-prettify

google code-prettifyを導入

設定その1の記事内で、コードを記載した。

wordpessテーマのSTINGER8にしてみた　⇒　設定その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属性を付けるだけでいいのでラクチン。

の、はずだった。

ところが、思ったように動作しない。

いろいろ試してみると、どうやらwordpressのAMPプラグインと相性が悪いようだ。

AMPプラグインを無効化してみると、ちゃんと色分けされて表示されるようになった。

このブログは、AMP化してgoogleにもインデックスされている。

しかしAMPを推進しているgoogle謹製google code-prettifyで不具合が起こるとは、なんとも皮肉なものだ。

どうするか考えたのだが、結局AMP化を諦めることにした。

というのも、モバイル環境でSTINGER8のハンバーガーメニューが動作しないという副作用も出ていたからだ。

いろいろ対応するのも大変なので、ここは一度AMPを外してみることにした。

記事の執筆の際は、markdownで書いている。

コードを書く場合は「```」で囲むことになっている。

ところが、prettyprint属性をこの時点で付けられないのがネックだ。

そこで、javascriptで属性を加えてしまうことにした。

body閉じタグの直前に、下記のコードを追加。

<script type="text/javascript">$(document).ready(function () {$('code').addClass('prettyprint');});</script>

これで、markdownで普段通り書いていくだけで良い。

コードがハイライト表示されて、良い感じだ。

AMPについては、おいおい対応するか検討し直そう。