Vue.js 3中HighlightJS未显示语法高亮，仅展示原始HTML问题求助

你的代码存在两个关键问题，导致无法正常显示SQL语法高亮效果：

1. Vue插值语法自动转义HTML #

highlight.js.highlight()返回的value是包含<span>等高亮标签的HTML字符串，但Vue的双大括号{{ }}会自动转义HTML内容，所以页面会直接显示原始标签而非渲染后的样式。

修复方法：将模板中的插值语法替换为v-html指令，让Vue直接渲染HTML内容：

<template>
  <pre>
    <code v-html="highlightedCode"></code>
  </pre>
</template>

2. 缺少highlight.js的样式文件 #

你仅导入了highlight.js的核心库和SQL语言模块，但未引入对应的高亮样式文件——就算HTML渲染正常，也不会有颜色高亮效果。

修复方法：导入highlight.js的官方样式（可选择任意主题，示例用github-dark主题）：

<script setup>
import hljs from 'highlight.js/lib/core';
import sql from 'highlight.js/lib/languages/sql.js';
// 导入高亮样式
import 'highlight.js/styles/github-dark.css';

hljs.registerLanguage('sql', sql);

const highlightedCode = hljs.highlight(
    'select * from TableName',
    { language: 'sql' }
).value
</script>

额外优化（可选） #

给<code>标签添加language-sql类，符合highlight.js的规范，同时让自动语言检测更准确：

<template>
  <pre>
    <code class="language-sql" v-html="highlightedCode"></code>
  </pre>
</template>

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