在 React 專案中，我們可以輕鬆將 .md 檔案轉換為網頁內容。
以下是使用 react markdown 套件將 Markdown 渲染到網頁的流程~
Step 1：安裝 Markdown 渲染套件
首先在 React 專案中安裝套件：npm install react-markdown
這個套件可以將 Markdown 字串轉換為 React 元件，並渲染成 HTML。
Step 2：渲染內容
準備一段 markdown 語法的內文：
const articleContent = `
# Hello World
This is **markdown** in React.
- item 1
- item 2
`;
使用 ReactMarkdown component 渲染到 html
return (
<article className="prose lg:prose-xl mx-auto">
<ReactMarkdown>{post}</ReactMarkdown>
</article>
);
效果如下：
但是，這種將 markdown 內容寫在程式裡的做法經常因為縮排問題導致解析失敗，實務上來說也不太會這麼做，所以可以將內容存在額外的檔案，並透過 fetch 抓取後再渲染。
進階做法: fetch 預防解析失敗
利用 useEffect 與 fetch 取得 Markdown 檔案內容，並透過 ReactMarkdown 元件呈現。
import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
export default function Post() {
const [post, setPost] = useState("");
useEffect(() => {
fetch("/articles/markdown.md")
.then((res) => res.text())
.then((text) => setPost(text));
}, []);
return (
<ReactMarkdown>{post}</ReactMarkdown>
);
}
結語
在 react 專案中，可以透過 react markdown 套件輕鬆將 Markdown 內容渲染成網頁，基本流程就是三個步驟：
- 安裝 react markdown 套件：
npm install react-markdown - 使用 <ReactMarkdown>{post}</ReactMarkdown> 元件渲染內容
- 內容成功渲染到 HTML
就是這麼簡單!!
