StackEditから持ってきたテーブルタグのレイスト修正。CSS3を使ってこのBlogのテーブルを美しく装飾する。

修正方法

テーマをHTML編集して、タグの直前に下記のコードを挿入します。

<!-- start テーブルタグの装飾を実装 -->    
<style>
table {
  width: auto;
  border-spacing: 0;
  font-size:14px;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table th {
  color: #000;
  padding: 8px 15px;
  background: #eee;
  background:-moz-linear-gradient(#eee, #ddd 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(#eee), to(#ddd));
  font-weight: bold;
  border-top:1px solid #aaa;
  border-bottom:1px solid #aaa;
  line-height: 120%;
  text-align: center;
  text-shadow:0 -1px 0 rgba(255,255,255,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table th:first-child {
  border-left:1px solid #aaa;
  border-radius: 5px 0 0 0;	
}
table th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #aaa;
}
table tr td {
  padding: 8px 15px;
  text-align: center;
}
table tr td:first-child {
  border-left: 1px solid #aaa;
}
table tr td:last-child {
  border-right: 1px solid #aaa;
}
table tr {
  background: #fff;
}
table tr:nth-child(2n+1) {
  background: #f5f5f5;
}
table tr:last-child td {
  border-bottom:1px solid #aaa;
  
}
table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
table tr:hover {
  background: #eee;
  cursor:pointer;
}
</style>
<!-- end テーブルタグの装飾を実装 -->   

対応した結果

MarkDownで作成したテーブルが下記のレイアウトで表示される様になりました。

参考

ここのスタイルを修正して作成しています。
http://weboook.blog22.fc2.com/blog-entry-329.html

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>

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