syntaxhighlighterの修復

業務外

何時からか判りませんが、ソースコードの表示ツールsyntaxhighlighterの動きが変になりました。行番号が出たり出なかったり、そもそもソースコードが整形されなかったり、訳が判りません。現時点でスマホのChromeとFirefoxは整形されません。PCのChromeもダメ。IEは整形されます。何かブラウザの動きが変わったらしい。

デベロッパーツールの使い方を覚えたので早速調べてみます、
syntaxhighlighterのスクリプトを呼び出す所でエラーが出ています。『not defined』
スクリプトが定義されておらず、実行に失敗しているらしい。Chromeだとスクリプトの事前ロードが必要になったのかな？

デベロッパーツールで確認するとエラーが出ています 

ネット検索してみると、syntaxhighlighterを利用しているブログで幾つか同様な症状が出ています。でもこの症状を対策した記事とかが見つかりません。自力でやるしかないです。

ここで、ブラウザのアドレスバーを見ると見慣れないアイコンが出ています。クリックしてみると、『安全でないコンテンツがブロックされました』、これなんすか？
ブロックされたスクリプトを読み込んでみましょう。

安全でないコンテンツがブロックされました、
とはなんぞ？ 

syntaxhighlighterが表示されました。なるほど。
syntaxhighlighterのスクリプトファイルの読み込みがブロックされたため、実行できなかったのですね。これが原因です。でも今のままだと『保護されていない通信』になっています。これまずい。Google先生に聞いてみましょう。

syntaxhighlighterが表示されました、
でも保護されていない通信になっています 

判りました。Chromeは2018年7月からSSL通信を必須にしていました。HTTPSでないと安全でないと判断し、デフォルトでは外部スクリプトの読み込みをブロックする仕様に替わったらしい。

では、ブログテンプレートに組み込んだ、syntaxhighlighterのCSSとJSをHTTPS化すれば良いのね。これが修正前。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 

HTTPS版のファイルがあることを確認して、HTTPS化します。HTTPをHTTPSに変えるだけです。簡単、簡単。

<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 

ダメです。笑
syntaxhighlighterのCSSとJS共に、HTTPの別ファイルにリダイレクトしているらしい。

syntaxhighlighterのCSSとJSを
HTTPS化してもだめです、
リダイレクト先でエラーです 

このリダイレクトは、syntaxhighlighterの版数がアップしても利用者が修正不要なように配慮した配置と思われます。でもsyntaxhighlighterのV3.0 のエンハンスは終了、今はV4.0 らしいのでV3.0 のファイルが変更される可能性は低いでしょう。
リダイレクト先のファイルにもHTTPS版があることを確認しました。リダイレクト先のV3.0のファイルを直接読み込むことにします。

<link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/>
 

上手くいきました。syntaxhighlighterのCSSとJSのリダイレクト先を指定したら、エラーがクリアされました。ソースコードもきちんと整形されています。

syntaxhighlighterのCSSとJSのリダイレクト先を
直接指定したらエラーがクリアされました

Google AdSenseの警告がまだ出ていますが、これは別件です。
これも直さないとあかん。

感想と構想

デベロッパーツール、便利です。今までだったら、今回のトラブルは直せなかったかもしれません。

ChromeのHTTPS対応については、以下の記事を参考にさせていただきました。
「安全でないコンテンツがブロックされました」と自分のサイトで表示されたときの対応【解決】