前端解析markdown处理代码块高亮并添加复制功能实例代码

npm i marked.js
import { Marked } from 'marked'

// 解析Markdown文本
const markdownText = '# 标题\n\n这是一段**加粗**的文本。';
const htmlContent = marked.parse(markdownText);

import { markedHighlight } from 'marked-highlight'
import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark.css'

// 配置Marked.js
const marked = new Marked(
  markedHighlight({
    async: false, // 如果是异步的，可以设置为 true
    langPrefix: 'language-', // 可选：用于给代码块添加前缀
    highlight: code => {
      return hljs.highlightAuto(code).value
    },
  })
)

<div v-html="markdown"></div>
const markdown = computed(() => marked.parse(mdStr))

// 复制逻辑
const copyToClipboard = codeBlock => {
  const answer = codeBlock.textContent.trim()
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard
      .writeText(answer)
      .then(() => {
        showSuccessToast('复制成功')
      })
  }
}
// 获取语言类型
const getLanguageCode = codeBlock => {
  const classList = codeBlock.className.split(' ')
  const langClass = classList.find(class => class.startsWith('language-'))
  if (langClass) {
    return langClass.replace('language-', '')
  }
  const parentClassList = codeBlock.parentNode.className.split(' ')
  const preLangClass = parentClassList.find(class => class.startsWith('language-'))
  if (preLangClass) {
    return preLangClass.replace('language-', '')
  }

  return null
}
// 添加复制按钮功能
const addCopyBtns = () => {
  nextTick(() => {
    const codeBlocks = document.querySelectorAll('pre code')
    codeBlocks.forEach(block => {
      if (block.parentNode.querySelector('.code-box')) {
        return
      }

      const parent = block.parentNode
      const codeBoxEle = document.createElement('div')
      codeBoxEle.className = 'code-box'
      const language = getLanguageCode(block)
      const langEle = document.createElement('span')
      langEle.className = 'code-lang'
      langEle.textContent = language || 'code'
      const copyButtonEle = document.createElement('div')
      copyButtonEle.className = 'copy-button'
      copyButtonEle.innerHTML = '复制'
      copyButtonEle.onclick = () => copyToClipboard(block)
      codeBoxEle.appendChild(langEle)
      codeBoxEle.appendChild(copyButtonEle)
      parent.classList.add('code-box')
      parent.appendChild(codeBoxEle)
    })
  })
}

watch(markdown, newValue => {
  if (newValue) {
    nextTick(() => {
      addCopyBtns()
    })
  }
})
onMounted(() => {
  addCopyBtns()
})