Bloggerテーマの作成(7)マークダウンを書き込むタグ

scriptタグにマークダウンを書くことにする

 

Bloggerテーマの作成(2)マークダウンで記事が書けるようにする-p--qではdiv.post-bodyに書いたマークダウンを変換させていましたが、そうすると変換される前に表示されてしまいます。それになによりもセマンティクスが合致しません。

なので、マークダウンはscriptタグに書くように変更しました。

Bloggerダッシュボード ー＞ 設定 ー＞ 投稿テンプレート（省略可）。

<script type="text/markdown">

</script>

投稿テンプレートにこれを入力しました。投稿作成時にこのscriptタグの中にマークダウンを入力するようにします。

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

let post_elems = document.querySelectorAll('script[type="text/markdown"]');
post_elems.forEach(e => {
  e.insertAdjacentHTML('afterend', md.render(e.textContent));
  e.parentElement.classList.add("markdown-body");
  e.remove();
});

script[type="text/markdown"]セレクタでマークダウンのタグを取得して、レンダリングしたHTMLを取得したノードの直後に挿入してその後マークダウンが書いてあるノードを消去しています。markdown-bodyクラスはBloggerテーマの作成(4) GitHub Markdown CSSの導入-p--qのために追加しています。