v2.8.2

Markdown

src/pages 配下は Markdown .md や MDX .mdx でファイルベースルーティングに対応したページファイルを作成することもできます。デフォルトで remark-gfmrehype-highlight が適応されます。

# TEST

文章テスト

Markdown .md と MDX .mdx ファイルは React Component としてページ内でも使用できます。

import MdVanilla from "../../assets/markdown/vanilla.md"
import MdTop from "../../assets/markdown/top.mdx"

export default () => {
  return (
    <>
      <MdVanilla />
      <MdTop />
    </>
  )
}

Plugins

// minista.config.ts
import remarkGfm from "remark-gfm"
import rehypeHighlight from "rehype-highlight"

export default {
  markdown: {
    mdxOptions: {
      remarkPlugins: [remarkGfm],
      rehypePlugins: [[rehypeHighlight, {}]],
    },
  },
}

Configmarkdown にて remarkrehype のプラグインを登録できます。

frontmatter

---
title: テストページ
draft: false
---

# {props.title}

フロントマターに記述したデータは root や MDX ページで props として使用できます。また、draft のみ特別で true にすると下書きとなり本番ビルドから除外されます。

components

RootgetStaticDatacomponents を渡すと HTML を React Component に差し替えられます。