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

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

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, 新着情報
-, , , ,

執筆者:

関連記事

Tポイントは衰退していくのか?

蔦屋書店でカードが使えない!? Tポイントは衰退していくのか?

蔦屋書店でクレジットカードもモバイルTカードも使えない 先日、高知蔦屋書店でランチを食べたのだが、その時に気になったのが支払いにカードが使えないことだ。 高知蔦屋書店 ⇒ 広い店内に多数のテナント 高 …

pagespeed insight

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

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

実質は国内シェア96%を握る ヤフー・グーグル提携の波紋

Amplify’d from diamond.jp 実際に検索サイト&#12 …

ワードプレス

オフィシャルサイトにwordpressを導入した

今まで自社ホームページはドリームウィーバーで制作してきたのだが、積極的に露出を図りたいと一念発起し、wordpressに移植することにした。

Evernote

evernoteにwebページをクリッピングする便利な手法

みんな大好きevernote! 数あるクラウドサービスの中でも、特に利用者が多いと思われるのがevernoteだ。 片っ端からメモしていけるので、私はなんでもかんでもブッ込んじゃってる。 Everno …