vue3中使用highlight.js實現(xiàn)代碼高亮顯示的代碼示例

更新時間：2025年04月10日 10:16:09 作者：魚魚魚-YYY

代碼高亮是在網(wǎng)頁開發(fā)中常見的需求之一,它可以使代碼在頁面上以不同的顏色或樣式進行突出顯示提高可讀性,這篇文章主要介紹了vue3中使用highlight.js實現(xiàn)代碼高亮顯示的相關資料,需要的朋友可以參考下

1.highlight簡介

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

192 種語言和 498 個主題
自動語言檢測
適用于任何 HTML 標記
零依賴
兼容任何 JS 框架
支持 Node.js 和 Deno

它里面有多種代碼顯示主題可供切換

具體可參考官方文檔：highlight.js中文網(wǎng)

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// 調(diào)用函數(shù)\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>

運行效果如下