remark-directiveでMDから好きなHTMLを生成

2021.03.19に公開

React

Markdown

tech

MDから任意のHTMLを作りたいが、MDXを書くのは面倒。 もっと楽に好き勝手を生成したい。

remark-directiveでできるじゃん

Generic directives proposalという構文がCommonMarkで議論されている。

例えば、


:::main
あああ
:::

が、

<main><p>あああ</p></main>

になる。


Lorem:br
ipsum.

::hr{.red}

が、

<p>Lorem<br>ipsum.</p>
<hr class="red">

になる。結構便利そう。

これをremarkで使えるようにしたのが、以下のパッケージ。

react-remark で使う

例としてNext.js + react-remarkで使ってみる。

必要なもの

使用例


import { Remark } from 'react-remark'
import Link from 'next/link'
const directive = require('remark-directive')
const visit = require('unist-util-visit')
const h = require('hastscript')

interface RenderProps {
  source: string
}

function htmlDirectives() {
  return transform

  function transform(tree:any) {
    visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], ondirective)
  }

  function ondirective(node:any) {
    var data = node.data || (node.data = {})
    var hast = h(node.name, node.attributes)

    data.hName = hast.tagName
    data.hProperties = hast.properties
  }
}

function UnifiedMd(props: RenderProps) {

  return (
    <Remark
        remarkPlugins={[directive,htmlDirectives]}
        rehypeReactOptions={{
          components: {
            p: (props: any) =>
              <p className="someClass" {...props} />
          },
        }}
      >
        {`ここにMarkdown`}
      </Remark>
    )

}

export default UnifiedMd

htmlDirectivesは上記パッケージのReadmeから拝借した。

まずMDが変換された後、unist-util-visitとhastscriptでhastのツリーを参照して、remark-directiveに渡すことで、要素を生成しているらしい。

これが最適解かわからないが、rehypeReactOptionsを使えば任意のReactコンポーネントに変換できるので、はてな記法的な独自の記法を開発できるかもしれない。