blogger でコードを表示する（改）SyntaxHighlighter CDNjs利用

前回、blogger でコードを表示する。SyntaxHighlighterカスタマイズ（python表示例）という記事を書きましたが、作者のHPから直リンクするとどうも不安定なので、CDNjsを利用することにしました。

CDNjs SyntaxHighlighter
https://cdnjs.com/libraries/SyntaxHighlighter

上記ページからURLを取得し書き換えます。
必要なファイルはこちら↓

shCore.css
shCore.js
選択したテーマ.css(shCoreDefault.cssなど）
言語ファイル.js（shBrushPython.js、shBrushJava.jsなど複数選択可）

ついでに表示スタイルも少し変更し、下記のようになりました。

<!-- SyntaxHighlighter  -->
//SyntaxHighlighter CDNjs https://cdnjs.com/libraries/SyntaxHighlighterより

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>

// 対応言語
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>

SyntaxHighlighter.config.bloggerMode = true; // Blogger対応
SyntaxHighlighter.defaults['toolbar'] = false; // "？"表示
SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク
SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量
SyntaxHighlighter.all();
</script>

<style>
.syntaxhighlighter {
  padding: 0.3em !important; /* 上下空き */
  width: calc(100% - 2em) !important; /* 幅調整 */
  background-color: #f7f7f7 !important; /* 背景色 コード背景色も変更が必要 */
  border: 1px solid #bbbbbb !important; /* ボーダー線 */
  margin: 0.3em 0 0.3em 0 !important;

  -webkit-border-radius: 2px !important; /* 角丸 */
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  -o-border-radius: 2px !important;
  border-radius: 2px !important;
}

.syntaxhighlighter .line.alt1 {
  background-color:  #f7f7f7 !important; /* コード偶数行背景色 */
}
.syntaxhighlighter .line.alt2 {
  background-color:  #f7f7f7 !important; /* コード奇数行背景色 */
}

.syntaxhighlighter .comments, .syntaxhighlighter .comments a{
    color:  #008200 !important; /* コメント色 */
//    font-style: oblique; /*斜体にする場合*/
}

.syntaxhighlighter .value {
  color:  rgb(0, 153, 0) !important; /* 代入数字色 */
}
.syntaxhighlighter .keyword {
  font-weight: bold !important;
  color: rgb(0, 102, 153) !important; /* キーワード色 */
}

.syntaxhighlighter .string {
    color: blue !important; /* 代入文字色 */
}

.syntaxhighlighter .functions {
    color: rgb(255, 20, 147) !important; /* 関数文字色 */
}

.syntaxhighlighter .plain {
    color:  #666666 !important; /* プレーンテキスト色 */
}

</style>
<!-- SyntaxHighlighter  -->

スタイルでマージン、角丸の大きさ、プレーンテキストの色などを変えて少しすっきりさせました。今のところ上手く動いているようで、 スマホでも表示されるようになり、bloggerのプレビューでも表示されています。

設置方法、使い方などは前回記事をご参照ください。

参考；
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
SyntaxHighlighter　対応言語
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
SyntaxHighlighter　テーマ
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

CDNjs SyntaxHighlighter
https://cdnjs.com/libraries/SyntaxHighlighter

blogger でコードを表示する。SyntaxHighlighterカスタマイズ（python表示例）
https://eneprog.blogspot.com/2018/04/blogger-syntaxhighlighter.html
前回記事

試行錯誤な日々：Bloggerでsyntax highlightを使う方法
http://asukiaaa.blogspot.jp/2016/12/bloggersyntax-highlight.htm
1研究中：Bloggerでソースコードを貼り付ける（改改）
http://1studying.blogspot.jp/2017/04/blogger_93.html