Vue3中實(shí)現(xiàn)代碼高亮的兩種方法(prismjs和highlight.js)
更新時(shí)間：2025年04月04日 08:46:11 作者：富朝陽
最近忙著開發(fā)自己的博客系統(tǒng),在做界面展示的時(shí)候,需要讓代碼高亮,于是經(jīng)過在網(wǎng)上查閱,發(fā)現(xiàn)有兩款比較好用的插件實(shí)現(xiàn)代碼高亮,分別是prismjs和highlight.js,下面我分別介紹下,方便給需要的同學(xué)參考
prismjs和highlight.js
prismjs使用
1.安裝依賴
//安裝prismjs 插件 npm install prismjs -S // vite npm install vite-plugin-prismjs -D
2.配置vite.config.js 2.配置vite.config.js
import { prismjsPlugin } from 'vite-plugin-prismjs';
export default defineConfig({
plugins: [
vue(),
prismjsPlugin({
languages: 'all', // 語言
plugins: ['line-numbers', 'copy-to-clipboard'], //官網(wǎng)有其他功能,這里開啟行數(shù)和復(fù)制按鈕功能
theme: 'okaidia', // 主題
css: true,
}),
],
})參數(shù)解讀：
line-numbers顯示行數(shù)language顯示語言copy-to-clipboard 復(fù)制功能inline-color代碼中顯示顏色塊
3.html使用
設(shè)置語言只需要在class="language-語言"，比如如下js設(shè)置language-js即可
<template>
<pre><code class="language-js line-numbers">{{ codes }}</code></pre>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Prism from 'prismjs';
export default defineComponent({
name: 'HtmlRender',
setup() {
onMounted(() => {
Prism.highlightAll(); // 切換更新內(nèi)容則重新調(diào)用這個(gè)方法
});
}
});
</script>注意： pre 和 code 寫在同一行（不然行號會(huì)錯(cuò)亂）
效果圖：
4.額外擴(kuò)展
如果你想用Mac分格的樣式，則需要自定義pre樣式，如下是我自己的，大家可做參考：
pre {
overflow: hidden !important;
code{
display: inline-block;
padding-bottom: 20px;
position: relative;
top: 20px;
}
&::before {
content: "";
position: absolute;
background: red;
width: 10px;
height: 10px;
border-radius: 50%;
top: 10px;
left: 15px;
transform: translate(-50%);
}
&::after {
content: "";
position: absolute;
background: sandybrown;
width: 10px;
height: 10px;
border-radius: 50%;
top: 10px;
left: 30px;
transform: translate(-50%);
}
code:first-child{
&::after{
content: "";
position: absolute;
background: limegreen;
width: 10px;
height: 10px;
border-radius: 50%;
top: -24px;
left: -7px;
transform: translate(-50%);
}
}
}如果你到了這一步，那代表你使用prismjs實(shí)現(xiàn)的的代碼塊樣式功能完美實(shí)現(xiàn)啦！恭喜恭喜！
highlight使用
1.安裝依賴
npm install highlight.js --save 或 yarn add highlight.js
2.在main.js中引入，官方為我們提供了vue到插件
// highlight 的樣式，依賴包，組件
import hljs from "highlight.js";
import "highlight.js/styles/github.css";
const app = createApp(App);
app.use((app) => {
app.directive("highlight", {
mounted(el) {
const blocks = el.querySelectorAll("pre code"); // querySelectorAll可以根據(jù)自己的富文本生成的代碼做調(diào)整 我這里默認(rèn)剛好
blocks.forEach((block: any) => {
// 在forEach中做一些操作
// 1.創(chuàng)建ul節(jié)點(diǎn)
const ul = document.createElement("ul");
// 2.根據(jù)換行符獲取行數(shù)，根據(jù)獲取的行數(shù)生成行號
const rowCount = block.outerHTML.split("\n").length;
for (let i = 1; i <= rowCount; i++) {
//創(chuàng)建li節(jié)點(diǎn)，創(chuàng)建文本節(jié)點(diǎn)
const li = document.createElement("li");
const text = document.createTextNode(String(i));
//為li追加文本節(jié)點(diǎn)，將li加入ul
li.appendChild(text);
ul.appendChild(li);
}
// 3.給行號添加類名
ul.className = "pre-numbering";
// 4.將ul節(jié)點(diǎn)加到 代碼塊
block.parentNode.appendChild(ul);
hljs.highlightBlock(block);
});
},
});
})
.mount("#app");3.css行數(shù)樣式自定義
我們對顯示行數(shù)做了擴(kuò)展，css如下
pre {
position: relative;
background-color: #fafafa;
font-size: 14px;
padding: 8px 8px 0px 8px;
overflow: hidden;
border: 1px solid #ccc;
}
code.hljs {
background-color: #fafafa !important;
line-height: 22px;
padding: 0 0 0.5em 2.2em !important;
white-space: unset;
}
.pre-numbering {
position: absolute;
top: 8px;
left: 0;
width: 30px;
border-right: 1px solid #c5c5c5;
background-color: #fafafa;
text-align: center;
line-height: 22px;
}
.pre-numbering li {
list-style: none;
color: #383a42;
font-size: 14px;
}行數(shù)以及背景顯示樣式可以根據(jù)自己的需求自定義
注意點(diǎn)：
設(shè)置行數(shù)樣式中，有人反應(yīng)高亮的代碼死活就是錯(cuò)位顯示，正常沒有庫樣式覆蓋pre參照以上樣式基本沒問題，如果引入其他css庫覆蓋可能是pre下面的code設(shè)置了white-space: pre-wrap;換行導(dǎo)致錯(cuò)位展示問題，重點(diǎn)排查樣式覆蓋問題。
4.html中使用
<highlightjs language='javascript' code="var x = 5;" />
如果你到了這一步，那代表你使用highlight實(shí)現(xiàn)的代碼塊樣式功能完美實(shí)現(xiàn)啦！恭喜恭喜！
總結(jié)
prismjs和highlight.js兩個(gè)插件感覺都很不錯(cuò)，個(gè)人比較喜歡prismjs，當(dāng)然蘿卜青菜各有所愛，大家根據(jù)自己的愛好選擇即可。
到此這篇關(guān)于Vue3實(shí)現(xiàn)代碼高亮的兩種方法(prismjs和highlight.js)的文章就介紹到這了,更多相關(guān)Vue3 prismjs和highlight.js代碼高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于vue-cli3創(chuàng)建libs庫的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在使用vue-router的項(xiàng)目中,實(shí)例化VueRouter是其配置選項(xiàng)routes該選項(xiàng)指定路由與視圖的組件的關(guān)系或者路由與其他路由的關(guān)系，Router配置選項(xiàng)中是其中最重要的配置。本文就詳細(xì)的介紹一下2021-10-10
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue--vuex的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue ssr 指南詳讀,詳細(xì)的介紹了什么是SSR以及如何使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue 組件（component）教程之實(shí)現(xiàn)精美的日歷方法示例
組件是我們學(xué)習(xí)vue必須會(huì)的一部分，下面這篇文章主要給大家介紹了關(guān)于Vue 組件（component）教程之實(shí)現(xiàn)精美的日歷的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
使用Vue創(chuàng)建前后端分離項(xiàng)目的完整過程(前端部分)
這篇文章主要介紹了使用Vue.js和Node.js搭建一個(gè)前端和后端分離的項(xiàng)目,并使用VueCLI3腳手架、axios進(jìn)行HTTP請求、Vue-router實(shí)現(xiàn)前端路由和vuex進(jìn)行狀態(tài)管理,需要的朋友可以參考下2025-01-01
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)觸底查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue使用konva實(shí)現(xiàn)一個(gè)簡便的流程圖
日常開發(fā)中我們可能碰到流程圖的需求,實(shí)現(xiàn)流程圖的庫有很多,如果我們想要實(shí)現(xiàn)一個(gè)簡便的流程圖可以使用konva庫來實(shí)現(xiàn),下面我們就來看一下具體的實(shí)現(xiàn)過程,需要的朋友可以參考下2023-08-08