AstroでMarkdownのレンダリングにカスタムコンポーネントを利用する

1
---
2
import Heading from "../Heading.astro";
3
---
4

5
<Content components={{ h1: Heading }} />

1
import { visit } from "unist-util-visit";
2
import { toString } from "mdast-util-to-string";
3

4
const remarkPluginSample = () => {
5
  const transformer = (tree: any) => {
6
    visit(tree, (node) => {
7
      if (node.type !== "heading") return;
8
      let { depth } = node;
9
      if (depth !== 1) return;
10

11
      let text = toString(node);
12
      const html = `<h1 style="color: coral">${text}</h1>`;
13

14
      node.type = "html";
15
      node.children = undefined;
16
      node.value = html;
17
    });
18
  };
19

20
  return transformer;
21
};
22

23
export default defineConfig({
24
  markdown: {
25
    remarkPlugins: [remarkPluginSample],
26
  },
27
});