2017/06/17

Markdown で Blogger の記事を書く

2020/01/14 2017/06/17 14:48 Blogger

今までこのブログの投稿は HTML で書いてきましたが、さすがに面倒になってきたので、以下のサイトを参考にさせていただき Markdown で書けるようにしてみました。

ちなみにプログラマー御用達のはてなブログなどへの移行も少し考えましたがやめました。
無駄にアカウントを増やしたくない（Google アカウントでやりたい）のと、広告を非表示にできるのと、AdSense との相性が良いことが主な理由です。
Blogger が Markdown に対応してくれれば文句ないのですが。

参考URL

http://qiita.com/her0m31/items/1804bdc251a647e0e9a8

テンプレートのHTMLの編集

基本的には参考サイトの丸コピーですが、className だけ追加しました。

<script src='https://rawgithub.com/chjj/marked/master/lib/marked.js'/>
<script>
var mdEls = document.querySelectorAll('.markdown');
for(var i in mdEls){
    var mdEl = mdEls[i];
    var converted = document.createElement('div');
    converted.className = 'marked';
    converted.innerHTML = marked(mdEl.value);
    mdEl.parentNode.replaceChild(converted, mdEl);
}
</script>

CSS の追加

こちらも丸コピーですが、テーブル関係とコードの定義を追加しました。

/*   マークダウン用
--------------------------------------------------  */
.markdown  {
  width:100%;
  height:auto;
  overflow:scroll;
  background-color:#ffffff; 
}
.showdown {
  background-color:#ffffff
}
.showdown img {
  height:auto;
  width:100%;
}
.marked table{
  border-collapse: collapse;
}
.marked th{
  padding: 6px;
  text-align: left;
  vertical-align: top;
  color: #333;
  background-color: #eee;
  border: 1px solid #b9b9b9;
}
.marked td{
  padding: 6px;
  background-color: #fff;
  border: 1px solid #b9b9b9;
}
code {
  border-radius: 2px;
  display: inline-block;
  border: 1px solid #d3d6db;
  background-color: #f9f9f9;
  padding: 1px 5px;
  margin: 3px;
}

以下マークダウンのテストです。

見出し１

見出し２

見出し３

見出し４

見出し５

リスト
- test
- test

インラインコードcodeだよ

赤文字はHTMLで

コードブロック

namespace hoge
{
  class hoge
  {
    int hoge = 0;
  }
}

テーブル

header	header	header
hoge	hoge テーブル内の改行は`<br>`で	hoge
hoge	hoge	hoge

へっぽこプログラマーの備忘録