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

2021/05/03（月）

この記事は2021/05/07（金）にメンテナンスが行われています。

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

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

インストール

Markdownをパースする

関連プラグインのTypeScript対応