ただいま大改造中。
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が有効になりました。
p--q
0 件のコメント:
コメントを投稿