Vue3中如何使用Highlight.js实现Solidity代码语法高亮？

先拆解下当前配置里的几个关键问题，以及对应的修复方案：

1. 版本不兼容是核心隐患 #

你现在引入的Highlight.js样式是9.15.6版本，JS核心库却是11.7.0版本，跨大版本的不匹配会导致样式错乱甚至功能异常——这也是你之前试官网Vue配置时其他语言高亮颜色错误的原因。

修复：统一用同一个版本的样式和核心库
把index.html里的样式链接换成和JS核心库同版本的（比如11.7.0）：

<link
  rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/vs2015.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

2. Solidity插件加载路径或方式错误 #

你现在用本地路径/node_modules/highlightjs-solidity/dist/solidity.min.js引入，但Vue项目的静态资源路径规则和Flask不同，直接这么写大概率找不到文件。推荐两种更可靠的方式：

方式一：用CDN引入Solidity插件 #

替换本地引入的脚本为兼容版本的CDN链接：

<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-solidity/1.1.0/solidity.min.js"
></script>

方式二：用npm安装后按需引入（更符合Vue项目规范） #

1. 先安装依赖：

npm install highlight.js highlightjs-solidity

2. 在Vue组件里直接引入并初始化，不用在index.html里写脚本：

<template>
  <pre><code class="language-solidity">{{ solidityCode }}</code></pre>
</template>

<script setup>
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import solidity from 'highlightjs-solidity'

// 注册Solidity语言
hljs.registerLanguage('solidity', solidity)

import { onMounted } from 'vue'
const solidityCode = `// 示例Solidity代码
pragma solidity ^0.8.0;

contract HelloWorld {
    string public message;

    constructor() {
        message = "Hello, World!";
    }

    function updateMessage(string memory newMessage) public {
        message = newMessage;
    }
}`

onMounted(() => {
  hljs.highlightAll()
})
</script>

3. Vue3中mounted钩子的上下文问题 #

你当前代码里用self.hljs.highlightAll()，但Vue3的语法里self的指向可能不对——直接用全局的hljs或者import后的hljs调用即可，不需要self。

4. 确保代码块的class正确 #

Solidity代码块必须加上对应的语言标识class，比如：

<pre><code class="language-solidity">// 你的Solidity代码</code></pre>

如果class写错（比如写成solidity而不是language-solidity），Highlight.js也无法识别。

按上面的步骤调整后，Solidity代码的高亮应该就能正常工作了。

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