網頁上實現markdown編輯
TL;DRReact 顯示 / 編輯 Markdown 用 react-markdown 套件。比 dangerouslySetInnerHTML 安全(不直接塞 HTML)。GFM 加 remark-gfm、語法 highlight 加 rehype-pretty-code、雙欄編輯器配 <textarea> + state。複雜 WYSIWYG 用 TipTap 或 MDXEditor。
在網頁上實現 Markdown 編輯
在 React 網頁上要顯示或編輯 Markdown 內容,最簡單的方式就是用 react-markdown 這個套件。它把 Markdown 字串解析成真正的 React 元素,而不是用 dangerouslySetInnerHTML 塞 HTML 進去,安全性比較好。
安裝
npm install react-markdown
基本用法
import ReactMarkdown from 'react-markdown';
function Preview({ source }: { source: string }) {
return <ReactMarkdown>{source}</ReactMarkdown>;
}
直接把 Markdown 字串當 children 丟進去就會渲染。
GFM(GitHub Flavored Markdown)支援
預設只支援 CommonMark,要表格、刪除線、checkbox 等語法得加 remark-gfm:
npm install remark-gfm
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
<ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>
自訂元素樣式
要讓某個 tag 渲染成自訂 component(例如把所有 <a> 加上 target="_blank",或讓 <code> 套用 syntax highlighting):
<ReactMarkdown
components={{
a: ({ href, children }) => (
<a href={href} target="_blank" rel="noopener noreferrer">{children}</a>
),
code: ({ className, children }) => (
<code className={className}>{children}</code>
),
}}
>
{source}
</ReactMarkdown>
雙欄編輯器
要做「左邊輸入、右邊預覽」的編輯器,搭 <textarea> + state 即可:
import { useState } from 'react';
import ReactMarkdown from 'react-markdown';
export function MarkdownEditor() {
const [text, setText] = useState('# Hello');
return (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
<textarea value={text} onChange={(e) => setText(e.target.value)} />
<div><ReactMarkdown>{text}</ReactMarkdown></div>
</div>
);
}