、前言

1.1、時代的眼淚

在建站初期一直使用富文本默認的樣式，其中在代碼部分的展示對閱讀造成了很大的困擾，

故此，在近期有對文章明細中代碼樣式部分進行改造，在之前是單調的灰色塊，如下：

改造后無論是從格式還是樣式都有了質的飛躍，和使用IDE的情況很接近了。

1.2、當世的英雄

下面我就把整個的改造過程分享給大家，希望能有些幫助。

二、Prims實現代碼高亮

2.1、什么是Prism

簡單來說，Prism.js是一個輕量級的代碼著色器，可以使Html中的代碼像IDE中一樣對背景色，語法，關鍵字做出高亮處理。

附上其官網：https://prismjs.com/

2.2、如何下載Prism

以我目前適用的Nuxt為例：

在官網的download下我們可以看到有語言、核心庫、主題、插件三大項讓用戶去自定義選擇，如下：

2.2、引入JS和CSS

以我的Nuxt項目為例，在頁面用配置Head屬性如下：

         head() {
            return {
              title: this.articleTitle + "-光慕華",
              link: [
                { rel: 'stylesheet', href: '/css/prism.css' }
              ],
              script: [
                { src: '/js/prism.js'},
                { src: '/js/jquery.min.js'}
              ]
            }
          },

Java

2.3、在Created鉤子函數中進行代碼高亮處理

        created(){    
              if (typeof window !== 'undefined') {
                  setTimeout(()=>{
                    // 這里加定時器讓它后執行，不然沒效果
                    Prism.highlightAll() 
                  },200)
                }
          },

Java

三、寫在最后

選擇Prosm主要還是因為一下原因

① 支持豐富

② 可以根據需要自定義配置

③ 引入和使用簡單

希望本篇文章能對需要的人起到一定的幫助作用，加油！

行代碼就能讓我的網站支持代碼高亮的工具庫，也支持在 Vue 中使用，強烈推薦給大家。

關于 highlight.js

highlight.js 是一款使用 javascript 開發代碼高亮工具庫，能夠讓網頁上的代碼顯示接近我們使用的代碼編輯器的高亮樣式，從而看起來更舒服，增強閱讀體驗。

highlight.js 的技術特性

• 支持 197 種開發語言和 246 種代碼高亮風格主題
• 自動開發語言檢測
• 支持多種語言混合代碼同時高亮
• 支持任何 HTML 標簽，不僅僅是<code></code>
• 支持 npm 安裝，可以在 Vue.js 中使用，也可以在 node.js 中使用
• 無依賴，與任何 js 框架兼容

為什么要用 highlight.js

常來我網站的小伙伴都知道，我的文章有一個欄目是“前端”，主要推薦一下實用的前端開源項目或者組件庫，寫技術類文章免不了要貼代碼，我的網站基于 wordpress 搭建，此前我一直為找一款代碼高亮插件煩惱，但大部分 wordpress 的代碼高亮插件實在太臃腫，出來的樣式又不美觀。大多時候是截圖 VsCode 的代碼界面，甚至還用過 codepng 這個工具把代碼變成圖片貼在文章中，但這樣做是美觀了，但也存在2個問題：

• 長代碼圖片會縮放，閱讀體驗不佳
• 搜索引擎不識別，對 SEO 不友好

最終還是找到了 highlight.js，完美解決了上面兩個問題，而且配置簡單，演示漂亮，定制化簡單。不禁感嘆：用純前端的方式解決，才能精準控制，實現想要的效果。

使用教程：為我的網站添加代碼高亮功能

下面以我的網站為例，展示將 highlight.js 用在我們的項目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安裝，我的網站基于 wordpress 開發，主題是自己寫的，最簡單的方式就是在文章詳情頁引入 highlight.js 和主題樣式。

雖然 highlight.js 支持幾百種開發語言，但為了將文件體積控制到最小，我們可以點擊“get version”按鈕進入下載頁，通過勾選我們需要的開發語言，來構建最輕量的庫。

下載解壓后得到的 highlight.min.js 就是我們需要引入的 js 文件，主題樣式都在 style 文件夾里，我選擇了一個比較喜歡的 monokai-sublime 主題，只需要一個 css 文件，然后初始化：

<link href="/js/monokai-sublime.min.css" rel="stylesheet" type="text/css">
<script src="/js/highlight.min.js"></script>
<script>
   hljs.highlightAll();
</script>

就是這么簡單，highlight.js 會自動將文章中的 <pre><code></code></pre> 代碼進行識別語言并且高亮，一切就是這么簡單。為了讓代碼顯示更協調，我用幾行 css 控制了包裹層的圓角以及背景顏色、字體大小等，大功告成。

.post-content .wp-block-code {
   background-color: #F6F8FF;
   border-radius: 16px;
   font-size: 16px;
   padding: 22px 22px 22px 38px;
   margin-top: 22px;
   margin-bottom: 22px;
}
.post-content .wp-block-code {
   line-height: 1.2;
   font-size: 15px;
   padding: 10px;
   overflow-x: auto;
}
.post-content .wp-block-code code {
   position: relative;
   background-color: unset !important;
}

當然 highlight.js 也能在 vue 項目中使用，安裝：

npm install highlight.js

在 Vue 文件中使用 (通過 highlight.js for Vue ) ：

<div id="app">
  <!-- bind to a data property named `code` -->
  <highlightjs autodetect :code="code" />
  <!-- or literal code works as well -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

需要注意的是，自動識別模式不能100%識別出代碼所屬的開發語言，識別錯誤會導致高亮樣式是別的語言的，這種情況下可以手動設置一個 class 來精準控制：

<pre><code class="language-javascript">...</code></pre>

官網提供了詳盡的使用文檔，有更多代碼高亮的控制，但不足的就是 highlight.js 沒有顯示行號的支持，需要通過再引入一個庫 (highlightjs-line-numbers.js) 或者自行實現。

免費開源說明

highlight.js 是一款基于 BSD 許可證開源的 javascript 工具庫，任何個人和公司都可以免費下載用于自己的項目，包括商用項目。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址以及代碼高亮效果

highlight.js - 讓網頁上的代碼高亮美化的免費開源工具庫｜那些免費的磚

瀏覽器中，一個比較常見的高亮文本場景是，用戶按下快捷鍵ctr+f，對文本內容進行搜索。在頁面里，相應的文本就會高亮。這種高亮，是瀏覽器實現的。

如果我們要實現這種高亮效果，現有的CSS實現起來是相對比較麻煩的。

方案一，使用偽元素::selection

當我們在頁面中，選中一段文本的時候，可以通過document.getSelection()獲取到文本選中的節點信息。相應的，我們可以通過Range Api去主動設置選中文本范圍。再通過設置::selection樣式，實現選中文本高亮效果。這種方案，實現起來比較麻煩，我們需要精確計算每一個高亮預期的選中起止位置。

方案二，對于在頁面中需要高亮的文本，進行單獨處理

對于靜態呈現的內容，在開發中，一般通過設置固定的標簽和樣式實現文本高亮。

對于需要動態變化的內容處理，例如codemirror，會有一套獨立的dom結構樹，通過dom結構樹，根據處理后的dom結構，在頁面中呈現出高亮。這種方案，就相當復雜了。

方案三, 使用偽元素::highlight

這個方案的實現方式，與::selection類似。通過Range Api 設置選中區域。再將這些區域配置進需要高亮的Hight中，最后通過設置::highlight樣式實現高亮。

這種方案，比::selection方案具有更強的可操作性。這是新的api，各個瀏覽器沒有完全實現。

【參考資料】

[1] CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web. https://css-tricks.com/css-custom-highlight-api-early-loo/