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

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

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

執筆者:

関連記事

ワードプレス

wordpressでedit.phpとplugins.phpが真っ白になるトラブル

「投稿」を表示しようとしても画面が真っ白になるトラブルが発生するようになった。edit.phpとplugins.phpでエラーが発生しているっぽい。手動で再度wordpressを全ファイルアップロード。結果、正常動作するようになった。

段組

アイコンを大量に並べる ⇒ トップページの作り込み9

段組数を自動調整させる 過去の実績を表示するのに、fontawsomeを利用し整列させることにした。 fontawsomeの使い方は、以前の手法と同じだ。 ピクトグラムでアイキャッチfontawsom …

jetpack関連記事

jetpack関連記事とwordpress関連記事タイトルの修飾 ⇒ STINGER8設定その13

修飾を合わせる コンテンツエリアを見ると、jetpack関連記事とwordpress関連記事タイトルが手つかずになっている。 これをH2と同じフォーマットにする。 ついでに全てレスポンシブ対応にする。 …

before

カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5

カテゴリーが長すぎる サイドバーのカテゴリーだが、項目数が多すぎて縦にやたら長くなってしまう。 そこで、第一階層をリストにして第二階層はボタンにして並べることにした。 まず、第二階層をボタン化 .ca …

アマゾンAWS

amazon SESはメールマガジン配信の切り札になるのか?

amazon SESは、amazonが展開するクラウドサービス上で大量のメール配信を可能にするものである。

amazon自身が年間10億通以上のメール配信を行なっており、このインフラを利用してサービスを提供する。

そのため安定度、スパム対策などが期待される。

アマゾンの説明によれば、スパム対策のため契約当初の配信速度には制限があるものの、数週間のちには90メール/秒、百万メール/日まで可能になるとのこと。

これだけの配信スピードがあれば、通常のネットショップにおいては十分なスペックと言えるだろう。