快捷導(dǎo)航

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

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

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

1.highlight簡介

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

192 種語言和 498 個(gè)主題
自動(dòng)語言檢測(cè)
適用于任何 HTML 標(biāo)記
零依賴
兼容任何 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庫并進(jìn)行注冊(cè)

// 主題樣式
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
 
//注冊(cè)組件
const app = createApp(App)

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

3 在頁面中使用

3.1 直接在template中使用在main.js中注冊(cè)的組件

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

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

運(yùn)行效果如下：

3.2 純文本代碼展示

使用<pre><code></code></pre>標(biāo)簽包裹代碼文本

<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// 這是一個(gè)簡單的 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'>復(fù)制</button><code style="border-radius:8px;" class="hljs">${highlightedCode}</code></pre>`

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

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

// 點(diǎn)擊復(fù)制代碼
const copyCode = (codeContent) => {
    
    navigator.clipboard.writeText(codeContent).then(() => {
      console.log('復(fù)制成功');
      alert('復(fù)制成功');
    //   ElMessage.success('復(fù)制成功');
    }).catch((error) => {
      console.error('復(fù)制失敗:', 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>

運(yùn)行效果如下

該js庫中包含多種代碼顯示主題，可在不同使用的組件中引入不同的主體樣式，以上是一個(gè)簡單的示例，具體使用請(qǐng)參考Highlight.js 文檔：Highlight.js — highlight.js 11.9.0 文檔

總結(jié)

到此這篇關(guān)于vue3中使用highlight.js實(shí)現(xiàn)代碼高亮顯示的文章就介紹到這了,更多相關(guān)vue3 highlight.js代碼高亮顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: