概述

在博客或者文檔中，通常會需要會需要高亮顯示代碼，這通常需要滿足屏幕大，高刷(…bushi), 應該是配色好看，插件生態豐富。目前實現代碼分割的主要是兩個庫PrismJS,highlight.js 。

vue-highlight-code 實現代碼分割用的是 highlight.js

代碼高亮相關的三個部分

• 代碼分割以及高亮
• 代碼行數顯示
• 復制按鈕

代碼分割以及高亮

瀏覽器最終呈現的 效果 是HTML+CSS，但我們輸入的代碼格式為字符串。需要一個轉化的過程，從字符串 -> 帶標簽的DOM樹。

很方便的是，highlight.js 幫我們實現了一套 split分割+keyword+正則的解析。

幫助我們將代碼從字符串轉化為DOM

from

const value = `import { HighCode } from 'vue-highlight-code'; import 'vue-highlight-code/dist/style.css'; export default {components: {HighCode},data(){ ?} }`

to

此外，在highlight 解析過程中,還會給對應的span 打上class 標簽，從而滿足css 樣式渲染, css 樣式表最終為 代碼提供高亮顏色

最終結果為

字符串解析 -> DOM樹 -> DOM樹屬性安裝 -> CSS樣式加載

復制選項

剪貼板 Clipboard API 提供了響應剪貼板命令（剪切、復制和粘貼）與異步讀寫系統剪貼板的能力。從權限 Permissions API 獲取權限之后，才能訪問剪貼板內容；如果用戶沒有授予權限，則不允許讀取或更改剪貼板內容。

也就是在點擊復制按鈕后，將相應的內容寫入clipboard

navigator.clipboard.writeText(props.codeValue)

代碼行數顯示

組件中顯示代碼使用的方法比較簡單

首先在nextTick中獲取渲染完成后的代碼塊的 offsetHeight 的高度，并獲取代碼的line-height行高，最終計算出行數，并進行渲染

參考

vue-highlight-code 代碼高亮組件

blog.rexskz

mdn

[highlight.js](https://github.com/search?q=highlight.js

總結

以上是生活随笔為你收集整理的代码高亮的可行性方案，highlight.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。