npm install showdown

<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>

// 引入 Showdown
const showdown = require('showdown');

// 創(chuàng)建轉(zhuǎn)換器實(shí)例
const converter = new showdown.Converter();

// Markdown 文本
const markdown = '# 標(biāo)題\n\n這是一段**粗體**文本。';

// 轉(zhuǎn)換為 HTML
const html = converter.makeHtml(markdown);

console.log(html);

// 配置轉(zhuǎn)換器以支持Markdown表格
converter.setOption('tables', true);

// 包含表格的Markdown文本
const markdownWithTable = '| 標(biāo)題1 | 標(biāo)題2 |\n|-------|-------|\n| 單元格1 | 單元格2 |';

// 轉(zhuǎn)換為 HTML
const htmlWithTable = converter.makeHtml(markdownWithTable);

console.log(htmlWithTable);

// 自定義擴(kuò)展，用于將 @@ 包圍的文本轉(zhuǎn)換為紅色
const myExtension = () => {
  return [{
    type: 'lang',
    filter: function (text) {
      return text.replace(/@@(.+?)@@/g, '<span style="color: red;">$1</span>');
    }
  }];
};

// 向轉(zhuǎn)換器添加擴(kuò)展
converter.addExtension(myExtension, 'myExtension');

// 包含自定義語法的Markdown文本
const customMarkdown = '這是一段@@紅色@@文本。';

// 轉(zhuǎn)換為 HTML
const customHtml = converter.makeHtml(customMarkdown);

console.log(customHtml);

import React, { useState } from 'react';
import showdown from 'showdown';

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState('');
  const converter = new showdown.Converter();

  return (
    <div>
      <textarea
        onChange={(e) => setMarkdown(e.target.value)}
        placeholder="輸入Markdown文本"
      />
      <div
        dangerouslySetInnerHTML={{ __html: converter.makeHtml(markdown) }}
      />
    </div>
  );
};

export default MarkdownEditor;