安裝所需套件

npm i -D marked
npm install -D @tailwindcss/typography
npm install -D gray-matter

app\reviews\stardew-valley\page.jsx

import { readFile } from "node:fs/promises"
import { marked } from "marked"
import Heading from "@/components/Heading"

async function StardewValleyPage() {
    // 讀取markdown 文件
    const text = await readFile("./content/reviews/stardew-valley.md", "utf8")
    // console.log("text =", text)
    // md檔轉換成html格式
    const html = marked(text)
    // console.log("html = ", html)


    return (
        <div>
            <Heading>Stardew Valley</Heading>
            <img src="/images/stardew-valley.jpg" alt="" width="640" height="360"
                className="mb-2 rounded" />
            <article dangerouslySetInnerHTML={{ __html: html }} />
        </div>
    )
}

export default StardewValleyPage

content\reviews\stardew-valley.md

---
title: "Stardew Valley"
date: "2023-09-12"
image: "/images/stardew-valley.jpg"
---

__Stardew Valley__ is a 
simulation role-playing video 
game developed by Eric 
"ConcernedApe" Barone.以下省略

tailwind.config.js

module.exports = {
    content: ["./app/**/*.{js,jsx,tsx}", "./components/**/*.{js,jsx,tsx}"],
    theme: {
        extend: {
            fontFamily: {
                sans: ["var(--font-exo2)", "sans-serif"],
                orbitron: ["var(--font-orbitron)", "sans-serif"],
            },
        },
    },
    plugins: [require("@tailwindcss/typography")],
};

備註: marked 套件並不能一次渲染全部的樣式 如標題 ### 之類的就無法直接渲染需要再透過 Tailwind Css 來定義****
所以另外安裝  @tailwindcss/typography 與設定

md檔的開頭新增的 標投資訊

---
title: "Stardew Valley"
date: "2023-09-12"
image: "/images/stardew-valley.jpg"
---

用 gray-matter 套件來讀取

大叔的鐵人賽第十三天結束 :)