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

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

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

執筆者:

関連記事

marquee

marqueeで電光掲示板風に文字を流す ⇒ トップページの作り込み8

marqueeとは marquee(マーキー)はインターネット黎明期にはやったテクニックだ。 電光掲示板のように文字が流れていくテクニックを指す。 ニコニコ動画を想像すれば、分かるだろう。

料理の写真を撮る

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

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

Eストアーアワード2010フルーツ部門の年間第一位

武田青果がEストアーアワードのフルーツ部門で日本一に

武田青果がEストアーアワードのフルーツ部門で日本一に Eストアーアワード2010フルーツ部門の年間第一位 有限会社武田青果(高知県高知市弘化台19-14 電話088-882-5323 FAX088-8 …

ブラウザスピード対決:IE 9 Beta、Firefox 4 Beta、Chrome(Crankshaft)、Opera 11 Beta

Amplify’d from www.lifehacker.jp ■起動および読&#1241 …

ブログの書き方

ブログを書く時の適切な文字数は何文字か

「ブログを書く時の適切な文字数は何文字ですか?」 勉強会で質問され、思わず詰まってしまった。   一般的には400字詰め原稿用紙で何枚、と言う言い方をするので、それからすると800文字とか1 …