1.highlight简介

Internet 上最受欢迎的 JavaScript 语法高亮工具，支持 Node.js 和 Web。

• 192 种语言和 498 个主题
• 自动语言检测
• 适用于任何 HTML 标记
• 零依赖
• 兼容任何 JS 框架
• 支持 Node.js 和 Deno

它里面有多种代码显示主题可供切换

具体可参考官方文档：highlight.js中文网

2.vue中的配置与使用

2.1 npm 下载highlight库 

npm install highlight.js

npm install --save @highlightjs/vue-plugin

2.2 在main.js文件中引入highlight库并进行注册

// 主题样式
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
 
//注册组件
const app = createApp(App)

app.use(hljsVuePlugin)
app.mount('#app')

3 在页面中使用

3.1 直接在template中使用在main.js中注册的组件

<template>
  <highlightjs language="JavaScript" :autodetect="true" :code="code"></highlightjs>
</template>

<script setup>
  let code = `<div>npm install --save highlight.js</div>`
</script>

运行效果如下：

3.2 纯文本代码展示

使用<pre><code></code></pre>标签包裹代码文本

<template>
    <div v-html="message" class="content"></div>
</template>

<script setup>
import hljs from 'highlight.js';
// 引入组件样式
// import 'highlight.js/styles/default.css';
// import "highlight.js/styles/a11y-dark.css";
import "highlight.js/styles/atom-one-dark-reasonable.css";

import { ref, nextTick, watch, onMounted } from 'vue';

const message = ref('');

const codeContent = ref('');

onMounted(() => {
    renderCode();
    nextTick(() => {
        handleButtonClick();
    });
});

const renderCode = () => {
    // 需要展示的代码的纯文本
    const codeMsg = "javascript\n// 这是一个简单的 JavaScript 代码示例\nfunction sayHello() {\n    console.log(\"Hello, World!\");\n}\n\n// 调用函数\nsayHello();\n"

    // 去除字符串首尾的空格和空白字符串等
    codeContent.value = codeMsg.trim();

    const highlightedCode = hljs.highlightAuto(codeContent.value).value;

   message.value = `<pre style="margin-top: 10px;margin-bottom: 10px;position: relative;border-radius:8px;"><button style="position: absolute;top: 10px;right: 10px;cursor: pointer;" id='code'>复制</button><code style="border-radius:8px;" class="hljs">${highlightedCode}</code></pre>`

//     console.log(message.value,123);
    
}

// 添加点击事件
const handleButtonClick = () => {
    let button = document.getElementById(`code`);
    console.log(button,123121);
    
    if (button) {
        button.addEventListener('click', () => {
            copyCode(codeContent.value);
        });
    }
};

// 点击复制代码
const copyCode = (codeContent) => {
    
    navigator.clipboard.writeText(codeContent).then(() => {
      console.log('复制成功');
      alert('复制成功');
    //   ElMessage.success('复制成功');
    }).catch((error) => {
      console.error('复制失败:', error);
    });
};

</script>

<style scoped>
.content{
  line-height: 30px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  word-break: break-all;
  white-space: pre-wrap;
  margin-bottom: 5px;
}
</style>

运行效果如下

该js库中包含多种代码显示主题，可在不同使用的组件中引入不同的主体样式，以上是一个简单的示例，具体使用请参考Highlight.js 文档：Highlight.js — highlight.js 11.9.0 文档