2017年8月27日

【SyntaxHighlighter】Bloggerから読み込むライブラリをcdnjsに変更してみました。

以前、httpsのURLでアクセスするとハイライト表示されなくて、ハイライト表示をGoogle Code Prettifyに変えてみたという記事を書きましたが、今日、いろいろ試したところSyntaxHighlighterでもハイライト表示させることに成功しました。

結論から言うとライブラリの読込先をcdnjsに変更しました。

いままでSyntaxHighlighterの公開サーバーは、alexgorbatchev.comしかないと思っていましたが、今日、ネットで探してみたところ「cdnjs」というCDNがあっさり見つかりました。(笑)

cdnjs.com

このCDN、私は全く知らなかったのですが、実に3000以上ものライブラリを公開しています。

まったく驚愕です!


では、使い方です。

まず、https://cdnjs.com/にアクセスします。



アクセスしたら、検索ボックスに「SyntaxHighlighter」と入力します。


するとこのような表示になりますので、赤字になってる「SyntaxHighlighter」のところをクリックします。



そうするとこのようなスクリプトの一覧が表示されてきますので、この中から必要なものをコピーします。



「Copy」をクリックするとメニューが表示されるので、「Copy Link Tag」を選択します。

タグがクリップボードにコピーされているので、あとはそれをBloggerのテンプレート内に貼り付けるだけです。


ちなみに今回このブログで貼り付けたのがこちらになります。



















これで、httpsからアクセスしても正常に表示されるようになりました。

この前、ハイライト表示をGoogle Code Prettifyに変えてみたのですが、自分としてはやはりSyntaxHighlighterのほうが見た目がシンプルで好きですね。少し使ってみた感じですと表示が重くなったとかないのでこれからこれを使っていきたいと思います。あと、これまでの記事をひとつひとつ変更せずに済んだのは大きいですね。(笑)

そして、これに伴ってこのブログをHTTPSリダイレクトをオンにしました。
これからは自動的にHttpsで表示されるようになります。


<関連記事>
ソースコードのハイライト表示をGoogle Code Prettifyに変えてみる。
BloggerでSyntaxHighlighterの文字サイズを変更する方法


スポンサーリンク