自分用メモも兼ねて。jQueryとmarked.jsを使います。
markdownをHTMLへ変換
markdownはすでにテキストとして取得できてmarkdown変数に格納されているものとします。また、<main>の中に<article>を作り、その中にmarkdownをHTMLに変換したものを入れます。
marked.jsはとても簡単で、marked関数にmarkdownのテキストを渡すだけでHTMLが返ってきます。
const HTML = marked(markdown);
$("main").append(`<article>${HTML}</article>`);
このコードはmarkdownをHTMLに変換し、<main>に<article>として追加します。
これでmarkdownをただ入れるだけのことはできますが、今回は見出しごとに<section>を入れるので、さらにひと工夫します。
<section>で囲む
HTMLをjQueryで操作します。先ほどのコードに以下を追加します。また、h2以降を対象とします。
$("main article").find("h2, h3, h4, h5, h6").each(() => {
const $this = $(this);
$this.nextUntil($this.prop("tagName")).addBack().wrapAll("<section></section>");
});
このコードは、<main>の中の<article>の中にある<h2>, <h3>, <h4>, <h5>, <h6>からそれぞれ、次に同じ見出しタグが現れるか、<article>や<section>の最後に到達するまでの間にある要素を取得し、はじめの見出しと合わせて<section>で囲みます。
これで<section>で囲むコードは完成です。
あとがき
今回が初のQiita投稿です。なにか間違い等ありましたら指摘して頂けるとありがたいです。
たまたまmarkdownを扱うことがあり、「<section>を使うにはどうしたらいいんだろう」と思い、考えたことを書きました。この記事が役に立つことがあれば幸いです。最後まで読んでいただきありがとうございました。