vue3中使用highlight.js实现代码高亮显示的代码示例

npm install highlight.js

npm install --save @highlightjs/vue-plugin

// 主题样式
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')

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

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

<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>