blogger : blogger で ソースコード(テキストボックス) を表示

目的 :
blogger で 記事中にソースコード (テキストボックス) を表示する。

手順 :
  <参考サイト: Bloggerでソースコードを貼り付ける（改改）>
1. 管理画面の「テーマ」メニューを開き、「HTMLの編集」ボタンを押下
2. </body>タグ の前に以下のコードを挿入する。
　　(縦スクロールバーを付けない場合は、57行目("max-height...") を削除

<!-- SyntaxHighlighter 追加 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>
<!-- autoloader対応 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js' type='text/javascript'/>
<!-- /HTMLと他言語を同時にハイライト対応用(html-script: true) -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<!-- テーマの読み込み(shCore.css内包版) -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreFadeToGrey.css' rel='stylesheet' type='text/css'/>
<script language='javascript' type='text/javascript'>
var shCdnUrlStr='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83';
SyntaxHighlighter.autoloader(
'actionscript3 as3      '+shCdnUrlStr+'/scripts/shBrushAS3.js',
'bash shell             '+shCdnUrlStr+'/scripts/shBrushBash.js',
'coldfusion cf          '+shCdnUrlStr+'/scripts/shBrushColdFusion.js',
'cpp c                  '+shCdnUrlStr+'/scripts/shBrushCpp.js',
'c# c-sharp csharp      '+shCdnUrlStr+'/scripts/shBrushCSharp.js',
'css                    '+shCdnUrlStr+'/scripts/shBrushCss.js',
'delphi pascal pas      '+shCdnUrlStr+'/scripts/shBrushDelphi.js',
'diff patch             '+shCdnUrlStr+'/scripts/shBrushDiff.js',
'erlang erl             '+shCdnUrlStr+'/scripts/shBrushErlang.js',
'groovy                 '+shCdnUrlStr+'/scripts/shBrushGroovy.js',
'html xml xhtml xslt    '+shCdnUrlStr+'/scripts/shBrushXml.js',
'java                   '+shCdnUrlStr+'/scripts/shBrushJava.js',
'javafx jfx             '+shCdnUrlStr+'/scripts/shBrushJavaFX.js',
'javascript js jscript  '+shCdnUrlStr+'/scripts/shBrushJScript.js',
'perl pl                '+shCdnUrlStr+'/scripts/shBrushPerl.js',
'php                    '+shCdnUrlStr+'/scripts/shBrushPhp.js',
'text plain             '+shCdnUrlStr+'/scripts/shBrushPlain.js',
'powershell ps          '+shCdnUrlStr+'/scripts/shBrushPlain.js',
'python py              '+shCdnUrlStr+'/scripts/shBrushPython.js',
'ruby rails ror         '+shCdnUrlStr+'/scripts/shBrushRuby.js',
'scala                  '+shCdnUrlStr+'/scripts/shBrushScala.js',
'sql                    '+shCdnUrlStr+'/scripts/shBrushSql.js',
'vb vbnet               '+shCdnUrlStr+'/scripts/shBrushVb.js'
);
SyntaxHighlighter.config.bloggerMode = false; // Blogger対応 true→false
SyntaxHighlighter.defaults['toolbar'] = false; // 「?」表示
SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク
//不具合が起きる為コメント化。使用時はpre側で要記述。
//SyntaxHighlighter.defaults['html-script'] = true; //HTMLと他言語を同時にハイライト
SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量
// コード表示させるタグ名(デフォルト"pre")
// SyntaxHighlighter.config.tagName="";
SyntaxHighlighter.all();
</script>
<style>
.syntaxhighlighter {
  font-size: 14px !important; /* フォントサイズ */
  margin: 0.5em 0em 0.5em 0em !important; /* 上下空き */
  border: 1px solid #bbbbbb !important; /* 罫巻 */
  /* 角丸 */
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -ms-border-radius: 10px !important;
  -o-border-radius: 10px !important;
  border-radius: 10px !important;
  max-height: 500px !important;;
}
.syntaxhighlighter table caption {
  padding: 0.3em 0 0.1em 1em !important; /* タイトルpadding */
  color: #ffffee !important; /* タイトル文字色 */
  background-color: #444444 !important; /* タイトル背景色 */
}
.syntaxhighlighter, .syntaxhighlighter div,
.syntaxhighlighter code, .syntaxhighlighter span {
  line-height: 1.2em !important; /* 行間 */
}
.syntaxhighlighter table td.code {
  padding: 0.3em 0 !important; /* コードエリアのpadding */
}
.syntaxhighlighter {
  background-color: #333333 !important; /* コード背景色 */
}
.syntaxhighlighter .line.alt1 {
  background-color: #333333 !important; /* コード偶数行背景色 */
}
.syntaxhighlighter .line.alt2 {
  background-color: #393939 !important; /* コード奇数行背景色 */
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a{
    color: #88eeee !important; /* コメント色 */
}
.syntaxhighlighter .preprocessor {
  color: #88eeee !important; /* #以降の色 */
}
.syntaxhighlighter .value {
  color: #00cc00 !important; /* 代入数字色 */
}
.syntaxhighlighter .keyword {
  color: #ff0000 !important; /* キーワード色 */
}
.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #ff0000 !important; /* スクリプト色 */
  background-color: none !important;
}
.syntaxhighlighter.nogutter td.code .container textarea,
.syntaxhighlighter.nogutter td.code .line {
  padding-left: 1em !important; /* 行番号非表示時左空き量 */
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #2f4f4f !important; /* 行強調時、行背景色 */
}
.syntaxhighlighter .line.highlighted.number {
  color: white !important; /* 行強調時、数字？ */
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #2f4f4f !important; /* 行強調時、行番号背景色 */
  color: white !important; /* 行強調時、行番号数字色 */
}
</style>
<!-- SyntaxHighlighter 追加 -->

3. 記事中に <pre class="brush: 言語名"> と </pre> でソースコードをはさむ。
 　言語名は、text(テキスト), c(C言語), html(HTML) など。こちらを参照。
    但し、 「<」を「&lt;」へ、「>」を「&gt;」への置換が必要
　　(参考サイトに変換ツール有り)
4. <pre class="brush: 言語名"> の部分に オプションを記述することで、行番号非表示、タイトル表示、ハイライト表示等が可能。
例 : 行番号非表示  　  <pre class="brush: text gutter:false">
　   タイトル表示　    <pre class="brush: text " title="タイトル">
　   タイトル非表示    <pre class="brush: text " title="">
　　強調表示　　　    <pre class="brush: text highlight:[13, 14]">
　　先頭行行番号指定 <pre class="brush: text first-line:37">

<2019.04.13 追記>
5. SyntaxHighlighter.config.bloggerMode が true だと、<br> や <br /> が表示されずに改行されてしまう為、 false に変更。