解决highlight.js不支持Vue代码块的三种有效方法

当highlight.js不支持Vue代码块时，可以通过以下办法解决： 1. 使用JavaScript模式来突出Vue代码里面的JavaScript部分在Vue文件中，通常有`<script>`标签，可以把highlight.js的JavaScript模式应用到这部分代码。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Highlight.js Vue Support</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> </head> <body> <pre><code class="javascript"> // 这是Vue中script标签里的代码 export default { data() { return { message: 'Hello, Vue!' } } } </code></pre> <script> // 初始化highlight.js hljs.highlightAll(); </script> </body> </html> ``` 在上述代码中，给`<code>`标签添加了`javascript`类，这样highlight.js就会用JavaScript的语法高亮规则处理这部分代码。 2. 使用Vue语法高亮库可以使用专门为Vue设计的语法高亮库，比如`vue-syntax-highlight` 。首先安装`vue-syntax-highlight`： ```bash npm install vue-syntax-highlight --save ``` 在Vue项目里使用： ```vue <template> <div> <vue-syntax-highlight language="vue"> <template #code>  <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello, Vue!' } } } </script> <style scoped> div { color: blue; } </style> </template> </vue-syntax-highlight> </div> </template> <script> import VueSyntaxHighlight from 'vue-syntax-highlight'; export default { components: { VueSyntaxHighlight } } </script> ``` 这个库对Vue代码的高亮显示支持更完善。 3. 自定义highlight.js语法规则还能为highlight.js自定义Vue语法规则。 ```javascript // 自定义Vue语法规则 hljs.registerLanguage('vue', function(hljs) { return { subLanguage: 'xml', contains: [ hljs.COMMENT(''), { begin: '<script', end: '</script>', subLanguage: 'javascript', skip: true }, { begin: '<style', end: '</style>', subLanguage: 'css', skip: true } ] }; }); // 初始化highlight.js hljs.highlightAll(); ``` 在这段代码中，注册了一个名为`vue`的新语言规则，能处理HTML、JavaScript和CSS在Vue代码块里的高亮。 ######[AI问答 | 790点数解答 | 2026-02-13 16:43:09]

服务商

更多选项

快捷项

自定义