方案1：markdown-it

ref 基于markdown-it打造的markdown编辑器 - 知乎

npm install --save-dev @types/markdown-it
npm install highlight.js
npm install markdown-it markdown-it-abbr markdown-it-deflist markdown-it-emoji markdown-it-footnote markdown-it-ins markdown-it-katex markdown-it-mark markdown-it-sub markdown-it-sup markdown-it-task-lists markdown-it-textual-uml

修改vite-env.d.ts

declare module 'markdown-it-toc'
declare module 'markdown-it-sub'
declare module 'markdown-it-sup'
declare module 'markdown-it-mark'
declare module 'markdown-it-deflist'
declare module 'markdown-it-task-lists'
declare module 'markdown-it-abbr'
declare module 'markdown-it-footnote'
declare module 'markdown-it-emoji'
declare module 'markdown-it-ins'
declare module 'markdown-it-katex'
declare module 'markdown-it-textual-uml'

新建一个工具文件

import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import MarkdownItSub from 'markdown-it-sub'
import MarkdownItSup from 'markdown-it-sup'
import MarkdownItMark from 'markdown-it-mark'
import MarkdownItDeflist from 'markdown-it-deflist'
import MarkdownItTaskLists from 'markdown-it-task-lists'
import markdownItAbbr from 'markdown-it-abbr'
import markdownItFootnote from 'markdown-it-footnote'
// import markdownItEmoji from 'markdown-it-emoji'
import markdownItIns from 'markdown-it-ins'
import markdownItKatex from 'markdown-it-katex'
import markdownItTextualUml from 'markdown-it-textual-uml'

/**
 * init Markdown-it
 */
export const MD = new MarkdownIt({
  html: true, // Enable HTML tags in source
  linkify: true, // Autoconvert URL-like text to links
  breaks: true, // Convert '\n' in paragraphs into <br>
  highlight: function (str, lang) {
    return highlightFormatCode(str, lang)
  }
})
  .use(MarkdownItSub)
  .use(MarkdownItSup)
  .use(MarkdownItMark)
  .use(MarkdownItDeflist)
  .use(MarkdownItTaskLists)
  .use(markdownItAbbr)
  .use(markdownItFootnote)
  // .use(markdownItEmoji)
  .use(markdownItIns)
  .use(markdownItKatex)
  .use(markdownItTextualUml)

/**
 * Formatting code blocks
 * @param str
 * @param lang
 */
const highlightFormatCode = (str: string, lang: string): string => {
  if (lang && hljs.getLanguage(lang)) {
    try {
      return codeBlockStyle(hljs.highlight(lang, str, true).value)
    } catch (e) {
      console.error(e)
    }
  }

  return codeBlockStyle(MD.utils.escapeHtml(str))
}

/**
 * Add code block style
 * @param val
 */
const codeBlockStyle = (val: string): string => {
  return `<pre class="hljs" style="padding: 10px;border-radius: 10px;"><code>${val}</code></pre>`
}

使用方式：

const html = MD.render("### xxx")