快捷導(dǎo)航

Vue3中實現(xiàn)代碼高亮的兩種方法(prismjs和highlight.js)

更新時間：2025年04月04日 08:46:11 作者：富朝陽

最近忙著開發(fā)自己的博客系統(tǒng),在做界面展示的時候,需要讓代碼高亮,于是經(jīng)過在網(wǎng)上查閱,發(fā)現(xiàn)有兩款比較好用的插件實現(xiàn)代碼高亮,分別是prismjs和highlight.js,下面我分別介紹下,方便給需要的同學(xué)參考

prismjs和highlight.js

prismjs使用

prismjs官網(wǎng)鏈接

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)用這個方法
    });
  }
});
</script>

注意： pre 和 code 寫在同一行（不然行號會錯亂）

效果圖：

4.額外擴展

如果你想用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實現(xiàn)的的代碼塊樣式功能完美實現(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)整 我這里默認剛好
        blocks.forEach((block: any) => {
          // 在forEach中做一些操作
          // 1.創(chuàng)建ul節(jié)點
          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é)點，創(chuàng)建文本節(jié)點
            const li = document.createElement("li");
            const text = document.createTextNode(String(i));
            //為li追加文本節(jié)點，將li加入ul
            li.appendChild(text);
            ul.appendChild(li);
          }
          // 3.給行號添加類名
          ul.className = "pre-numbering";
          // 4.將ul節(jié)點加到 代碼塊
          block.parentNode.appendChild(ul);
          hljs.highlightBlock(block);
        });
      },
    });
  })
  .mount("#app");

3.css行數(shù)樣式自定義

我們對顯示行數(shù)做了擴展，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ù)自己的需求自定義

注意點：

設(shè)置行數(shù)樣式中，有人反應(yīng)高亮的代碼死活就是錯位顯示，正常沒有庫樣式覆蓋pre參照以上樣式基本沒問題，如果引入其他css庫覆蓋可能是pre下面的code設(shè)置了white-space: pre-wrap;換行導(dǎo)致錯位展示問題，重點排查樣式覆蓋問題。

4.html中使用

<highlightjs language='javascript' code="var x = 5;" />

如果你到了這一步，那代表你使用highlight實現(xiàn)的代碼塊樣式功能完美實現(xiàn)啦！恭喜恭喜！

總結(jié)

prismjs和highlight.js兩個插件感覺都很不錯，個人比較喜歡prismjs，當然蘿卜青菜各有所愛，大家根據(jù)自己的愛好選擇即可。

到此這篇關(guān)于Vue3實現(xiàn)代碼高亮的兩種方法(prismjs和highlight.js)的文章就介紹到這了,更多相關(guān)Vue3 prismjs和highlight.js代碼高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: