アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

AMP CMS javascript 新着情報

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

投稿日:2019年4月26日 更新日:

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"> 
<p>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については、おいおい対応するか検討し直そう。

-AMP, CMS, javascript, 新着情報
-, , , ,

執筆者:

関連記事

pagespeed insight

STINGER8でwordpess構築しpagespeed insightで満点を取る方法 ⇒ カスタマイズの手順と方法を順番に解説

STINGER8とは STINGER8は国産wordpressテーマであり、SEOに強いことで知られる。 現在STINGER8の系統のテーマは4つあり、そのうち2つが無料テーマだ。 STINGER8は …

ツイッターvsフェイスブック

facebookにtwitterを連動させることは禁じ手なのか?

最近爆発的に普及してきたソーシャルメディア。 私もfacebook、twitter、mixi、GREE、myspaceなど、いろいろなSNSを利用している。 しかしそれぞれのSNSで個別に発言していく …

料理の写真を撮る

ソーシャルメディア全盛の今、レストランで写真を撮ることについて考えてみた

あちこちで食事の写真を撮っているのを見かけるようになった Facebookやtwitterが流行している現在、レストランなどに行くと出された料理をスマホで撮影している人をよく見かけるようになった。 ま …

テザリングをbluetoothでできない

iPhoneはテザリング「される側」にはなれない

iPhoneとiPadの2台持ちした時の悩み iPad miniを購入してからというもの、今までガシガシと酷使してきたiPhoneをとんと使わなくなった。 だって老眼にはあの画面サイズは小さすぎるから …

stinger8

おまけ:wordpress設定手順を公開してみて ⇒ STINGER8設定その15

おまけ ここまでやって気づいたのだが、画面右下にページトップに戻るリンクがある。 これが色が薄すぎて、白背景だと全く気がつかない。 すこし色を濃くしておこう。 #page-top a{ backgro …