Markdoc + Astro　で超シンプルなカスタムタグを作ってみる

https://markdoc.dev/
https://docs.astro.build/ja/guides/integrations-guide/markdoc/#_top

上記の通り、

yarn astro add markdoc

してインストール。

すごいシンプルなカスタムタグを追加してみる

複雑なのは公式とか見ればいいので、逆にめっちゃ単純なタグを作ってみる。

14px相当でpタグだけど小さい文字サイズで表示されるだけのタグ。
Note としてみる。
Annotationのほうがふさわしいかもだけど、お試しなので。

タグのコンポーネントを作る

.src/components/markdoc/Note.astro を作成して以下を追記

---
const { props } = Astro
---
<p {...props} class="text-sm"><slot /></p>

今回はprops使わないので消しても良い。

作ったコンポーネントをmarkdocの独自タグとして登録

markdoc.config.mjs をプロジェクトのルートに作って以下を追記

import { defineMarkdocConfig, component } from "@astrojs/markdoc/config";

export default defineMarkdocConfig({
  tags: {
    // Define a custom tag for a note
    Note: {
      render: component("./src/components/markdoc/Note.astro"),
    },
  },
});

.mdocファイル内に書く

note-test.mdoc とかで

{% Note %} ここだけ文字が小さめになる。 {% /Note %}

て書けば変換が走って、<p class="text-sm"> ここだけ文字が小さめになる。 </p>と表示されます。

分かりやすくて、いい感じ。