Markdownパーサーを自作したい
自分のポートフォリオサイトにブログ機能も乗っけたい
マークダウンパーサー作るぞ!
パーサーの実装経験が無いので色々なとこから囓ってこねる
実装方針
string型のMarkdown文章を解析し、string型のHTMLを生成して返す 流れ
改行で分割、行ごとに字句解析していく(lexer)
"# h1text\nbefore**test**after"を["# h1text", "before**test**after"]に変換
ここで階層構造を表す配列に変換しても良いかもしれない
markdownパーサーの実装をパク、参考にする
変換例
"# h1text\nbefore**test**after"を[{ mdType: 'text', content: "# h1text"}, { mdType: 'text', content: "before**test**after"}]に変換
listやコードブロックのようなブロック要素はstateを駆使してまとめる
[{ mdType: 'list', content: "[- list1\n- list2\n - list2-1\n - list2-2]"}]
次のフェーズでマークダウン記法を正規表現でパースし、変換していく
マークダウン記法を正規表現でパースし、HTML生成に必要な情報をまとめて配列を作る(parser)
上の配列を基にHTMLを生成する(generator)
この記事の目標
"# h1text"を"<h1>h1text</h1>"に変換
"before**test**after"を"<p>before<strong>test</strong>after</p>"に変換
"- list1\n- list2\n - list2-1\n - list2-2"を"<ul><li>list1</li><li>list2<ul><li>list2-1</li><li>list2-2</li></ul></li></ul>"に変換
参考