「簡単なMarkdownエディタを作る」を参考にMarkdownエディタを作成したのですが、現行バージョンのMarkdown.jsでは、#のあとにスペースがないと見出しとして認識されませんでした。気になって経緯と対策を調べたのでシェアします。
現象
QiitaのMarkdownエディタは、#のあとにスペースがあろうとなかろうと、見出しとして認識してくれます(##, ###も同様)
# 見出しになる
# 見出しになる
ですが、現行バージョン(1.1.0)のMarked.jsは#のあとにスペースがないと、見出しとして認識してくれません。
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.getElementById('content').innerHTML =
marked('#見出しにならない');
</script>
#のあとにスペースが必要になった経緯
Marked.jsバージョン0.3.2以前は、#のあとにスペースがあってもなくてもよかったみたいですが、
- GithubのMarkdownエディタと挙動が異なる
- GFM(GitHub Flavored Markdown)のマニュアルにはあくまでも
#(スペース)見出しと書かれている
という主張が入り、議論はあったものの、修正されたようです。
#のあとにスペースがないことを許可するには
Marked.jsでは、正規表現を使ってMarkdown記法を自分で定義することができます。Marked.jsを読み込んだあと、marked()を使用するより前に以下のように記述します。
const tokenizer = {
heading(src) {
const match = src.match(/^ {0,3}(#{1,6}) *([^\n]*?)(?: +#+)? *(?:\n+|$)/);
if (match) {
return {
type: 'heading',
raw: match[0],
depth: match[1].length,
text: match[2]
};
}
// return false to use original codespan tokenizer
return false;
}
};
marked.use({ tokenizer });
以上です。