如何在VuePress项目中使用其内置Prismjs自定义语法高亮主题

核心原因 #

VuePress 内置的 Prism.js 默认仅会在 Markdown 编译阶段静态处理代码块，你在自定义组件中动态插入的代码内容属于运行时生成，不会被自动识别高亮。

实现步骤 #

1. 调整DOM结构类名
   按照 Prism 的语法规范，需要给<code>标签也添加对应语言的类名，结构调整如下：

<pre class="language-vue">
  <code ref="codesnippet" class="language-vue">
    {{ escapedCode }}
  </code>
</pre>

2. 编写高亮逻辑
   在组件脚本中引入内置的Prism实例，在组件挂载、代码内容更新时主动触发高亮，同时提前转义代码中的特殊字符，避免代码里的HTML标签被浏览器解析为真实DOM：

<script>
import Prism from 'prismjs'

// 代码内容特殊字符转义
const escapeHtml = (str) => {
  return str.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;')
}

export default {
  props: {
    codeOutput: {
      type: String,
      required: true
    }
  },
  computed: {
    escapedCode() {
      return escapeHtml(this.codeOutput)
    }
  },
  mounted() {
    this.highlightCode()
  },
  watch: {
    codeOutput() {
      // 等待DOM更新完成后再触发高亮
      this.$nextTick(() => this.highlightCode())
    }
  },
  methods: {
    highlightCode() {
      const codeEl = this.$refs.codesnippet
      if (codeEl) {
        // 仅处理当前组件的代码块，避免影响页面其他已高亮的内容
        Prism.highlightElement(codeEl)
      }
    }
  }
}
</script>

注意事项 #

• 不要直接调用Prism.highlightAll()，该方法会遍历页面所有代码块重复处理，可能导致已有高亮样式异常
• VuePress内置的Prism已经默认包含Vue语法高亮，无需额外引入语法规则文件，如需支持其他语言可按需引入Prism对应语言的规则包即可

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