「簡単な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 });
以上です。