remark-zenn-directive

Zennの独自記法であるディレクティブをHTMLに変換するためのremarkプラグイン。

Example

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkStringify from "remark-stringify";
import remarkZennDirective from "@nazo6/remark-zenn-directive";

const file = await unified()
  .use(remarkParse)
  .use(remarkZennDirective)
  .use(remarkStringify)
  .process(input);

console.log(String(file));

以上のようなコードで、以下のような変換が行われます。

::::details title

:::message

Warning

:::

:::message alert

Alert

:::

::::

↓

<details><summary>title</summary>

<div class="message-warning">

Warning

</div>

<div class="message-alert">

Alert

</div>

</details>