跳到主要內容
← 回到學習

學習 · 開發工具

網頁上實現markdown編輯

By Kurau2 分鐘閱讀

目錄 · 6 個段落
  1. 01安裝
  2. 02基本用法
  3. 03GFM(GitHub Flavored Markdown)支援
  4. 04自訂元素樣式
  5. 05雙欄編輯器
  6. 06注意事項
TL;DR
React 顯示 / 編輯 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
bash

基本用法

import ReactMarkdown from 'react-markdown';
 
function Preview({ source }: { source: string }) {
  return <ReactMarkdown>{source}</ReactMarkdown>;
}
tsx

直接把 Markdown 字串當 children 丟進去就會渲染。

GFM(GitHub Flavored Markdown)支援

預設只支援 CommonMark,要表格、刪除線、checkbox 等語法得加 remark-gfm:

npm install remark-gfm
bash
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
 
<ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>
tsx

自訂元素樣式

要讓某個 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>
tsx

雙欄編輯器

要做「左邊輸入、右邊預覽」的編輯器,搭 <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>
  );
}
tsx

注意事項

  • 不要直接渲染 raw HTML:預設會擋掉 <script> 等危險標籤,要顯式啟用 rehype-raw 才會解析 HTML(同時要自己處理 XSS)
  • 複雜編輯器(WYSIWYG、支援拖拉、表格 GUI)可以考慮 TipTap 或 MDXEditor,它們是基於 ProseMirror 的完整解決方案

目錄