求助：VSCode中HTML文件内JavaScript代码无法高亮如何解决

常用解决方案 #

1. 使用代码高亮库（最推荐） #

主流的代码高亮库比如Prism.js、Highlight.js可以轻松实现语法高亮，步骤如下：

• 下载对应库的CSS和JS文件到本地项目中
• 在HTML的<head>里引入样式文件，在<body>末尾引入脚本文件：

  <link rel="stylesheet" href="./prism.css">
  <!-- 你的HTML内容 -->
  <script src="./prism.js"></script>
  

• 将你的JavaScript代码包裹在带有指定类名的代码块中：

  <pre><code class="language-javascript">
    // 这里放你的JavaScript代码
    const [count, setCount] = useState(0);
    function increment() {
      setCount(count + 1);
    }
  </code></pre>
  

  不同库的类名写法略有区别，比如Highlight.js用class="javascript"，根据你选择的库调整即可。

2. 调整编辑器预览设置 #

如果是本地编辑器预览HTML时没有高亮，可能是编辑器本身的预览功能不支持：

• 比如VS Code可以安装支持语法高亮预览的插件，直接在插件市场搜索关键词「HTML预览 语法高亮」即可找到合适的工具
• 部分编辑器需要手动开启代码块的高亮渲染选项，检查编辑器的设置面板找到相关开关

3. 自定义CSS样式（适合简单场景） #

如果不想引入外部库，也可以手动给代码片段的不同语法元素添加样式：

• 先给代码块添加自定义类，并用<span>标记不同类型的代码：

  <pre class="custom-code">
    <code>
      <span class="code-keyword">const</span> [count, <span class="code-function">setCount</span>] = <span class="code-function">useState</span>(<span class="code-number">0</span>);
    </code>
  </pre>
  

• 在CSS中定义对应样式：

  .custom-code {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
  }
  .code-keyword { color: #0066cc; font-weight: bold; }
  .code-function { color: #795e26; }
  .code-number { color: #09885a; }
  

  这种方式需要手动标记语法元素，适合代码片段较短的场景。

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