Vue项目中用highlight.js处理混合内容的报错与后端高亮方案

一、修复前端硬刷新的报错问题 #

这个报错本质是硬刷新时，highlight.js在DOM未完全就绪或处理异常内容时，行数计算出现异常，可按以下方式解决：

• 精准控制初始化时机：在Vue组件的onMounted（Vue3）或mounted（Vue2）钩子中，配合nextTick执行高亮逻辑，确保v-html渲染的内容已经完全挂载到DOM：

// Vue3示例代码
import { onMounted, nextTick } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

onMounted(async () => {
  await nextTick()
  document.querySelectorAll('pre code').forEach(block => {
    try {
      hljs.highlightElement(block)
    } catch (err) {
      console.error('代码高亮失败:', err)
    }
  })
})

• 校验后端返回的HTML结构：排查后端返回的内容，确保所有pre>code标签都有有效内容，空的code标签或格式混乱的代码块会导致highlight.js计算行数出错。
• Vite针对性配置：如果确定和Vite的依赖优化有关，可在vite.config.js中调整配置，避免highlight.js被提前打包导致的异常：

export default {
  optimizeDeps: {
    exclude: ['highlight.js']
  },
  build: {
    commonjsOptions: {
      include: [/highlight.js/]
    }
  }
}

二、后端实现代码高亮的方案 #

完全可以在后端完成代码高亮，前端只需直接渲染处理后的HTML即可，彻底规避前端初始化时机的问题：

• 后端处理逻辑（Node.js示例）：安装highlight.js和cheerio（用于解析HTML），对返回内容中的代码块进行预处理：

// Express后端示例
const hljs = require('highlight.js')
const cheerio = require('cheerio')

app.get('/get-content', (req, res) => {
  // 假设从数据库获取原始混合内容
  const rawHtml = '<pre><code class="javascript">console.log("test")</code></pre>'
  const $ = cheerio.load(rawHtml)
  
  $('pre code').each((_, el) => {
    const codeText = $(el).text()
    const lang = $(el).attr('class') || 'plaintext'
    try {
      const highlightResult = hljs.highlight(codeText, { language: lang })
      $(el).html(highlightResult.value)
      $(el).addClass('hljs') // 添加强亮样式类
    } catch (err) {
      console.error('后端高亮失败:', err)
    }
  })
  
  res.send($.html())
})

• 前端配合：前端仍然需要引入highlight.js的CSS样式文件，用于渲染后端生成的高亮类对应的样式。
• 优势：彻底解决前端硬刷新的报错问题，同时减轻前端计算压力，适合内容较多的场景。

内容的提问来源于stack exchange，提问作者Bruno Francisco