Bloggerテーマの作成(3) markdown-itのライブデモを再現する

 とりあえずライブデモが再現できるようにします。

 オプションの設定

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

 linkifyを有効にしてURLの文字列にリンクをつけます。

typographerを有効にしてmarkdown-it/replacements.jsにあるように置換します。

+- → ±

こういう変換などをやってくれます。

プラグインのインストール

ライブデモで使われているプラグインは次の9つです。

markdown-it-emoji

絵文字を表示させます。

markdown-it-sub

 下付き文字を表示させます。

markdown-it-sup

 上付き文字を表示させます。

markdown-it-ins

 <ins> 要素にして追加された文字列の範囲を表します。 

markdown-it-mark

<mark> 要素にして文字列をハイライトします。

markdown-it-footnote

脚注をつけます。

markdown-it-deflist

 <dl> 要素で説明リストを表します。

markdown-it-abbr

 <abbr>要素で略語や頭字語を表します。

markdown-it-container

 カスタムコンテナを作成できます。レンダラーを定義しないときはコンテナ名を渡すとそれをクラス名としたdivタグになります。

 

jsdelivrですべて選択して導入します。 

一番上のscriptタグひとつですべてのスクリプトを取得できます。

<script src="https://cdn.jsdelivr.net/combine/npm/markdown-it@12/dist/markdown-it.min.js,npm/markdown-it-emoji@2/dist/markdown-it-emoji.min.js,npm/markdown-it-sub@1/dist/markdown-it-sub.min.js,npm/markdown-it-sup@1/dist/markdown-it-sup.min.js,npm/markdown-it-ins@3/dist/markdown-it-ins.min.js,npm/markdown-it-mark@3/dist/markdown-it-mark.min.js,npm/markdown-it-footnote@3/dist/markdown-it-footnote.min.js,npm/markdown-it-deflist@2/dist/markdown-it-deflist.min.js,npm/markdown-it-abbr@1/dist/markdown-it-abbr.min.js,npm/markdown-it-container@3/dist/markdown-it-container.min.js"></script>
<script>
const options = {
  linkify: true,
  typographer: true
};
const md = window.markdownit(options)
  .use(window.markdownitEmoji)
  .use(window.markdownitSub)
  .use(window.markdownitSup)
  .use(window.markdownitIns)
  .use(window.markdownitMark)
  .use(window.markdownitFootnote)
  .use(window.markdownitDeflist)
  .use(window.markdownitAbbr)
  .use(window.markdownitContainer, "warning");
let post_elems = document.querySelectorAll("div.post-body");
post_elems.forEach(e => {
  e.innerHTML = md.render(e.textContent);
});
</script>

 これでプラグインも実行されます。

 ライブデモをBloggerエディタで投稿する

 markdown-it demo

このライブデモのページの左側のマークダウンをコピーします。

BloggerエディタのHTMLビューにペーストします。

[\<ins>]と [\<mark>]の部分はそれぞれ[\&lt;ins&gt;]と[\&lt;mark&gt;]というようにHTMLエンティティで置換が必要です。

 これで再現できました。

全く同じ見た目にするにはCSSの設定が必要です。

プラグインを整理する

自分が使いそうな上記の5つのプラグインだけ登録することにしました。

HTML/JavaScriptガジェットに貼り付けるコンテンツは次のようになります。

<script src="https://cdn.jsdelivr.net/combine/npm/markdown-it@12/dist/markdown-it.min.js,npm/markdown-it-sub@1/dist/markdown-it-sub.min.js,npm/markdown-it-sup@1/dist/markdown-it-sup.min.js,npm/markdown-it-ins@3/dist/markdown-it-ins.min.js,npm/markdown-it-footnote@3/dist/markdown-it-footnote.min.js,npm/markdown-it-container@3/dist/markdown-it-container.min.js"></script>
<script>
const options = {
  linkify: true,
  typographer: true
};
const md = window.markdownit(options)
  .use(window.markdownitSub)
  .use(window.markdownitSup)
  .use(window.markdownitIns)
  .use(window.markdownitFootnote)
  .use(window.markdownitContainer, "warning");
let post_elems = document.querySelectorAll("div.post-body");
post_elems.forEach(e => {
  e.innerHTML = md.render(e.textContent);
});
</script>