Stackeditを使用してBloggerを更新してみたけど、ソースコードの扱いがイマイチだったのでGoogleのcode-prettifyへの変換を書いてみた。

StackeditのMDにてのコード挿入の使い方

バックシングルクォートを使用する。（Charpの場合）
```cs
source code
```

採用したコード表示用のHTML用埋め込みスクリプト

GitHub https://github.com/googlearchive/code-prettify

テンプレートの拡張方法

下記の内容テンプレートの</HEAD>に直前に挿入する。

<!-- start StackEditから取り込んだ際にcodeをcode-prettifyで処理させる。 -->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
pre {
  overflow: auto;
  resize: horizontal;
}
pre.my-code {
  overflow: auto;
  resize: horizontal;
}
</style>
<script language='javascript' type='text/javascript'>
  $(function() {
    // for each pre class='prettyprint';
    $('pre>code.prism').parent().each(function(a, e) {
		console.log('calss=' + $(this).attr('class'));
		var lang = $(this).attr('class').replace(' language-', '');
		console.log('lang=' + lang);
		$(this).addClass('prettyprint linenums').attr('lang', lang);
		PR.prettyPrint();
    })
  }
);
</script>
<!-- end StackEditから取り込んだ際にcodeをcode-prettifyで処理させる。 -->

デザインについて

私は、skin=sons-of-obsidianを使用しました。
テーマの説明 https://8oclockis.blogspot.com/2018/04/google-code-prettifyblogger.html

使用できるコードについて

“bsh”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, “java”,
“js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, “xhtml”, “xml”, “xsl”
https://github.com/googlearchive/code-prettify

Stackeditとの連携についての対応について

規程のコードの出力は、
<pre class=" language-html"><code class=“prism language-html”>
となります。しかし、Googleのcode-prettifyが求めいるタグが、
<pre class=“prettyprint”>
であり、私は、
<pre class=“prettyprint linenums” lang=“html”>
としたい。
それをJavascriptでコーディングしてみました。

<script language='javascript' type='text/javascript'>
  $(function() {
    // for each pre class='prettyprint';
    $('pre>code.prism').parent().each(function(a, e) {
		console.log('calss=' + $(this).attr('class'));
		var lang = $(this).attr('class').replace(' language-', '');
		console.log('lang=' + lang);
		$(this).addClass('prettyprint linenums').attr('lang', lang);
		PR.prettyPrint();
    })
  }
);
</script>

対応したことで↓のようにキチンと表示されました。