remarkを使用したBasicなMarkdwonパース

JavaScriptにおいて有名なMarkdownパーサーremarkを使用したBasicなMarkdownパースの仕方を記します。

パースする際、以下の対応もついでに行うものとします。

• ハイライトに対応したhtmlへパース
• コードのタイトルの出力
• 外部リンクの場合blankに変更しnofollow, noopener, noreferrerを追加
• 改行時は<br>を使用し、改行が複数行の時は<p>タグで囲む

インストール

remarkとその関連プラグインをインストールします。

yarn add remark remark-breaks remark-code-titles remark-external-links remark-gfm remark-highlight.js remark-html remark-slug

Markdownをパースする

remarkを使用してMarkdownをパースする処理を用意します。

import remark from 'remark'
import breaks from 'remark-breaks'
import codeTitle from 'remark-code-titles'
import externalLinks from 'remark-external-links'
import gfm from 'remark-gfm'
import highlight from 'remark-highlight.js'
import html from 'remark-html'
import slug from 'remark-slug'

export default async function markdownToHtml(
  markdown: string
): Promise<string> {
  const result = await remark()
    .use(codeTitle)
    .use(highlight)
    .use(slug)
    .use(breaks)
    .use(externalLinks, {
      rel: ['nofollow', 'noopener', 'noreferrer'],
    })
    .use(gfm)
    .use(html)
    .process(markdown)
  return result.toString()
}

index.tsxでmarkdownToHtml.tsをimportしMarkdown記述をHTMLとして得ます。

import markdownToHtml from 'lib/markdownToHtml'

export async function getContent(markdown: string) {
  const content = await markdownToHtml(markdown)
  return content
}

console.log(getContent('#h1')) // "<p>#h1</p>\n"

remarkとその関連プラグインだけである程度やりたいことが実現できるので、事実上JavaScriptでのMarkdownパーサーと言えばremarkがデファクトスタンダードと言えそうです。

参考：remark Plugins

関連プラグインのTypeScript対応

src/@types配下に以下追加します。

declare module 'remark-code-titles'

declare module 'remark-highlight.js'

declare module 'remark-html'

declare module 'remark-slug'