在建站初期一直使用富文本默認的樣式,其中在代碼部分的展示對閱讀造成了很大的困擾,
故此,在近期有對文章明細中代碼樣式部分進行改造,在之前是單調的灰色塊,如下:
改造后無論是從格式還是樣式都有了質的飛躍,和使用IDE的情況很接近了。
下面我就把整個的改造過程分享給大家,希望能有些幫助。
簡單來說,Prism.js是一個輕量級的代碼著色器,可以使Html中的代碼像IDE中一樣對背景色,語法,關鍵字做出高亮處理。
附上其官網:https://prismjs.com/
以我目前適用的Nuxt為例:
在官網的download下我們可以看到有語言、核心庫、主題、插件三大項讓用戶去自定義選擇,如下:
以我的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
created(){
if (typeof window !== 'undefined') {
setTimeout(()=>{
// 這里加定時器讓它后執行,不然沒效果
Prism.highlightAll()
},200)
}
},
Java
選擇Prosm主要還是因為一下原因
① 支持豐富
② 可以根據需要自定義配置
③ 引入和使用簡單
希望本篇文章能對需要的人起到一定的幫助作用,加油!
行代碼就能讓我的網站支持代碼高亮的工具庫,也支持在 Vue 中使用,強烈推薦給大家。
highlight.js 是一款使用 javascript 開發代碼高亮工具庫,能夠讓網頁上的代碼顯示接近我們使用的代碼編輯器的高亮樣式,從而看起來更舒服,增強閱讀體驗。
highlight.js 官網截圖
常來我網站的小伙伴都知道,我的文章有一個欄目是“前端”,主要推薦一下實用的前端開源項目或者組件庫,寫技術類文章免不了要貼代碼,我的網站基于 wordpress 搭建,此前我一直為找一款代碼高亮插件煩惱,但大部分 wordpress 的代碼高亮插件實在太臃腫,出來的樣式又不美觀。大多時候是截圖 VsCode 的代碼界面,甚至還用過 codepng 這個工具把代碼變成圖片貼在文章中,但這樣做是美觀了,但也存在2個問題:
最終還是找到了 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/
*請認真填寫需求信息,我們會在24小時內與您取得聯系。