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

blogger でコードを表示する。SyntaxHighlighterカスタマイズ（python表示例）

2018/4/30更新：SyntaxHighlighterが不安定だったのでCDNjsを使うように更新しました。この記事のコードハイライトは改訂版 で表示されています。
---

プログラミング学習のブログとして、コードの表示をどうするか悩んでいました。いろいろ試したところ、SyntaxHighlighterに落ち着きました。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

導入・カスタマイズ方法は下記のページが大変参考になりました。

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

最初は1研究中さんのコードで試したのですが、テーマをdefaultにするとスクロールバーが表示されなくなり、試行錯誤な日々さんのコードをほぼそのまま使っています。残念ながらプレビューでは表示されません。

導入方法はBlogger 編集画面 → テーマ → HTMLの編集を選択。</body>タグの上に下記コードを追加します。

<!-- SyntaxHighlighter  -->
<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/shThemeDefault.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/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/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;　/* ボーダー線 */
  -webkit-border-radius: 8px !important;　/* 角丸 */
  -moz-border-radius: 8px !important;
  -ms-border-radius: 8px !important;
  -o-border-radius: 8px !important;
  border-radius: 8px !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 .string {
    color: blue !important; /* 代入文字色 */
}

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

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

</style>

<!-- SyntaxHighlighter  -->

対応言語では必要な言語のみを読み込むようにしています。私はcss、javascript、plain text、pythonを選択しました。そのほかの言語は下記を参照ください。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

style以下は表示形式の指定です。テーマをそのまま使う場合は必要ありません。ここでは背景色などを変えました。文字色は機能別にそれぞれ変更できます（上記コードはデフォルトの色です）。

使用するときには下記のようにpreタグで使用言語を指定します。brush:pyがpythonの指定です。

---

<pre class="brush:py gutter:true" title="pythonコード例">
k=10

for t in range(2,k+1): 
    for i in range(2,t+1):
        if t%i ==0:
            break
    if i==t:
        print(t)

---

k=10

for t in range(2,k+1):  
    for i in range(2,t+1):
        if t%i ==0:
            break
    if i==t:
        print(t)

タイトルをなくす場合はtitleの指定を空（""）にします。

---

<pre class="brush:py gutter:true" title="">
k=10

for t in range(2,k+1):
    for i in range(2,t+1):
        if t%i ==0:
            break
    if i==t:
        print(t)
</pre>

---

k=10

for t in range(2,k+1): 
    for i in range(2,t+1):
        if t%i ==0:
            break
    if i==t:
        print(t)

行番号をなくす場合はgutterをfalseに。

---

<pre class="brush:py gutter:false" title="">
k=10

for t in range(2,k+1):
    for i in range(2,t+1):
        if t%i ==0:
            break
    if i==t:
        print(t)
</pre>

---

k=10

for t in range(2,k+1):  
    for i in range(2,t+1):
        if t%i ==0:
            break
    if i==t:
        print(t)

他にもいろいろオプションがあるようですが、とりあえずこんな感じで使って見ます。
参考；
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
SyntaxHighlighter　対応言語
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
SyntaxHighlighter　テーマ
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

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

プログラミング学習:10までの素数を表示させる。(python GCI chapter1）
http://eneprog.blogspot.jp/2018/04/python10gci-chapter1.html
jupyter notebookからコピーしたコード表示例。今回のSyntaxHighlighterとの差の参考に。