Bloggerテーマの作成(4) GitHub Markdown CSSの導入

jsDelivrからgithub-markdown-cssを導入

GitHub - sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style

markdown-itで変換されたHTMLをこのGitHubのCSSで修飾するようにします。

github-markdown-css CDN by jsDelivr - A CDN for npm and GitHub

 github-markdown.min.cssをjsDelivrを選択しました。

 あとはgithub-markdown-cssで修飾したいタグにmarkdown-bodyというクラス名をつけるだけです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css" />
<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);
  e.classList.add("markdown-body");
});
</script>

 これでmarkdown-itで出力されたHTMLの部分にgithub-markdown-cssが有効になりました。