0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Marked.jsはハッシュのあとにスペースがないと見出しにならない

Last updated at Posted at 2020-07-12

簡単な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 });

以上です。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?