【Blogger】highlight.jsがモバイルビューで反映されない問題の解消方法

Bloggerでコード引用するときにコードシンタックスで色分け表示させたいためにhighlight.jsを導入した。
PC版ではうまく反映されたものの、スマートフォン版(iOS/Android)のSafariやChromeで表示されないという問題が発生した。

結論、管理画面の「レイアウト」から導入されると反映されない。
HTMLの</head>前に直に挿入するとスマートフォン版(モバイル環境)でも反映されるようになった。

Bloggerに導入したhighlight.jsのコード

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/railscasts.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

うまく反映されなかった導入方法

Blogger管理画面の「レイアウト」から「ガジェットを追加」を選択し、「HTML/JavaScript追加」から上記のhighlight.jsのコードを貼り付けした。

うまく反映された導入方法

管理画面から「テンプレート」→「HTMLを編集」を選択し、</head>手前に上記コードを挿入することでうまくいった。

もしかしてhighlight.js以外にも「HTML/JavaScript追加」をレイアウト>ガジェットから追加した場合はモバイル/スマートフォン環境でうまく動作しないケースがあるかもしれない。

<追記>
HTMLをコード引用した場合、空白表示される問題が発生した。
どうやらHTMLエスケープをしたコードを挿入しないと表示されないみたい。
ということで以下サイトでHTMLを特殊文字に変換したらうまくいった。
https://tech-unlimited.com/escape.html

タイトルとURLをコピーしました