Closed3

代表的なマークダウンパーサーであるmarkedのソースコード読み下し

まつだけまつだけ

マークダウンパーサーを作ってみたいのと、案外リポジトリの中見たらコード量もそんなに多くなく、全体を読めそうだったので、マークダウンパーサーの中で一番スター数の多いこちらのリポジトリのソースコードを読み下してみます。
https://github.com/markedjs/marked

まつだけまつだけ

まずは用語整理。

  • token: 「#」や「-」などのMakrdown記法を読み取ることで、それぞれの文や文節にメタ情報をもたせたかたまり
  • Lexer: 平文をトークン化する
    • Tokenizer: 「#」や「-」などそれぞれの文字列を検知して、メタ情報を付与してトークン化。
      • rules.js: Tokenizerのなかでのトークンの種類判定のためのルールが定義されている
  • Parser: トークン化されたデータを読み取ってhtmlの出力までを実行
    • Renderer: htmlの出力を担う
    • Slugger: テキストをサニタイズしたりする。Parserの中で使われる。
まつだけまつだけ
  try {
    const tokens = Lexer.lex(src, opt);
    if (opt.walkTokens) {
      marked.walkTokens(tokens, opt.walkTokens);
    }
    return Parser.parse(tokens, opt);
  } catch (e) {
    e.message += '\nPlease report this to https://github.com/markedjs/marked.';
    if (opt.silent) {
      return '<p>An error occurred:</p><pre>'
        + escape(e.message + '', true)
        + '</pre>';
    }
    throw e;
  }

https://github.com/markedjs/marked/blob/c19b1a5af52e8666bb3481276d7411883e3660c7/src/marked.js#L105-L120

まず基本はコレで、

  1. Lexerでソースをトークン化
  2. Parserでトークンを読み取り、HTMLをレンダリング。
このスクラップは2021/04/19にクローズされました