2018年2月17日土曜日 blogger

Blogger カスタマイズ備忘録3　SyntaxHighlighterがうまく表示されない

私が使用しているテンプレート

トーマスさんが公開されている Vaster2　レスポンシブ対応済みのblogger日本語テンプレートを使っています。 素晴らしいです。

SyntaxHighlighterというのを使えば、ページ中のソースコードをきれいに表示することが出来るということで導入したのですが、うまく表示されません。
どうやら

Bloggerがhttps対応になってから駄目みたいですね。

こちらの　Bloggerでコードを綺麗に表示できるようにする　というサイトを参考にしましたが、どうやらBloggerがhttps対応になってから駄目みたいですね。

alexgorbatchev.comがhttpsに対応していないためのようです。
こちらのサイト　Bloggerのhttps強化によるSyntaxHighlighter周りの修正　を参考にさせていただきました。

私の場合は自分の使っているサーバーがSSL対応になっているので、
そこにSyntaxHighlighterからダウンロードしたファイルを入れて呼び出すようにしたところ、うまく表示できました。

ダウンロードなどは　【2017年版】Livedoorで「SyntaxHighlighter」を使おう！　を参考にされると良いと思います。

SyntaxHighlighterダウンロード

headタグの前にこんな感じで追加しました。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<link href="https://cac-japan.com/SyntaxHighlighter/styles/shCore.css" rel="stylesheet" type="text/css"> <link href="https://cac-japan.com/SyntaxHighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css"> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shCore.js" type="text/javascript"></script> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shBrushCss.js" type="text/javascript"></script> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shBrushJScript.js" type="text/javascript"></script> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shBrushPlain.js" type="text/javascript"></script> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shBrushPhp.js" type="text/javascript"></script> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shBrushSql.js" type="text/javascript"></script> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shBrushXml.js" type="text/javascript"></script> <script src="https://cac-japan.com/SyntaxHighlighter/scripts/shBrushCpp.js" type="text/javascript"></script> <script language="javascript" type="text/javascript">  SyntaxHighlighter.config.bloggerMode = true;  SyntaxHighlighter.all(); </script>

使い方は、他のサイトにたくさん出てますので割愛します。(不親切ですがお許し下さい)

他の方法もうまく行きました

Googleが開発している「code-prettify」というライブラリを使ってソースコードのシンタックスハイライトを実装する方法です。
割りと簡単です。
技術ブログの「ソースコード」表示を効果的にカスタマイズする方法　を参考にされると良いと思います。

code-prettifyの表示サンプルです
HTMLなどで使うカギ括弧などはHTMLエスケープツールでエスケープコードを書き込まないと表示されません。

 
em {
  font-style: norma;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #424242;
  display: inline-block;
  width: 100%;
}