Bloggerテーマの作成(2)マークダウンで記事が書けるようにする

Bloggerエディタが2020年にバージョンアップしてからHTMLビューと作成ビューの切り替えにひと手間増えたり、タグのエスケープ方法が変更になったり、Enterキーで改行できなくなったりして使いにくくなったのでマークダウンで記事が書けるようにしてみます。

markdown-itの入手

GitHub - markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

前回作成した最小テーマにこのmarkdown-it.min.jsを実装します。

browser (CDN)にあるjsDeliver CDNをクリック。

distディレクトリの中に入ってmarkdown-it.min.jsのスライドボタンをオンにします。

 右にオンにしたファイルが表示されるのでSHOW&CONFIGURE ALL LINKSをクリック。

HTML outputとAuto-optimizationとVersion aliasingボタンをオンにしてCOPY ALLボタンをクリック。

これでクリップボードにmarkdown-it.min.jsへのリンクが取得できました。

<script src="https://cdn.jsdelivr.net/npm/markdown-it@12/dist/markdown-it.min.js"></script>

マークダウンを取得するスクリプト 

(2022.1.15追記。マークダウンを書き込むタグを変更したのでこのスクリプトは違うものにしました。Bloggerテーマの作成(7)マークダウンを書き込むタグ-p--q参照。)

 

テーマのHTMLを見るとガジェットバージョン2のブログの投稿ガジェットでは投稿内容はpost-body entry-content float-containerのクラスのdivタグに入っていることがわかります。

<script>
let post_elem = document.querySelector("div.post-body");
post_elem.innerHTML = window.markdownit().render(post_elem.textContent);
</script> 

 これでアイテムページとスタティックページは変換できましたが、インデックスページでは先頭のタグしか変換されないのですべて変換されるように次のようにしました。

<script>
const md = window.markdownit();
let post_elems = document.querySelectorAll("div.post-body");
post_elems.forEach(e => {
  e.innerHTML = md.render(e.textContent);
});
</script>

次はこれらをBloggerのHTML/JavaScriptガジェットに貼り付けます。

 HTML/JavaScriptガジェットにmarkdown-itを導入

 レイアウト画面で「ガジェットを追加」をクリックー＞ HTML/JavaScriptを選択。

 

コンテンツにmarkdownit.min.jsへのリンクとマークダウンを取得するスクリプトをペースト。 

 

マークダウンのタグよりあとに実行されるようにレイアウト画面でHTML/JavaScriptガジェットをブログの投稿ガジェットの下に移動させます。

これでBloggerの投稿に書き込んだマークダウンがHTMLに変換されて表示されるようになりました。マークダウンはHTMLビューで書き込みます。 

 

 

インデックスページでは各投稿のマークダウンがちゃんと変換されています。Read moreの上にすべての投稿内容が表示されることになります。

HTMLビューでマークダウンを書くときの注意点

BloggerエディタのHTMLビューでは" 、&、< 、> の4つの文字はHTMLエンティティに置換しておかないといけません。

Free Online HTML Escape / Unescape Tool - FreeFormatter.com

このツールで置換してくれます。