highlight.js - 讓網頁上的代碼高亮美化

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

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

關于 highlight.js

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

highlight.js 官網截圖

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 - 讓網頁上的代碼高亮美化的免費開源工具庫｜那些免費的磚

內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！

大家好，我是大澈！

本文約 500+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優質 CSS 代碼片段，實現了超酷的3D立體文字效果。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

div {
  color: #ffffff;
  font-size: 60px;
  font-weight: 700;
  text-shadow: 
    1px 0px #ff5500, 1px 2px #ff5500, 3px 1px #ffaa00,
    2px 3px #ff5500, 4px 2px #ffaa00, 4px 4px #ff5500,
    5px 3px #ffaa00, 5px 5px #ff5500, 7px 4px #ffaa00,
    6px 6px #ff5500, 8px 5px #ffaa00, 7px 7px #ff5500,
    9px 6px #ffaa00, 9px 8px #ff5500, 11px 7px #ffaa00
}

分享原因

這段代碼展示了如何使用CSS的text-shadow屬性創建復雜的多層次陰影效果，為文本添加立體感和視覺深度。

通過設置多個陰影值，可以實現炫酷的文字效果，非常適合用于標題、橫幅或其他需要吸引注意力的文本元素。

項目中用到時，可直接CV！

代碼解析

1. 基礎文字樣式

color: #ffffff;: 設置文本顏色為白色。

font-size: 60px;: 設置文本字體大小為60像素。

font-weight: 700;: 設置文本粗細為700，即加粗。

2. text-shadow: ...

設置多個文本陰影。

陰影值的格式是：x方向偏移量 y方向偏移量陰影顏色。

每個陰影值定義一個特定位置和顏色的陰影，多個陰影值組合在一起，創造出復雜的、多層次的3D陰影效果

- end -

到程序員，就會出現許多關鍵詞，諸如“直男，宅，不懂浪漫，枯燥，憨厚老實，有邏輯，人傻錢多…………”

說程序猿是直男，不可否認，大多數程序猿都挺直，因為我們沒有那么多彎彎繞繞，有心思兜圈子，不如回去寫幾行代碼………

雷軍曾經說“我喜歡寫代碼，代碼的世界很簡單”

程序猿的大多數時間都是面對電腦，所以對待一份感情也會非常的認真。程序猿也許在生活中會比較宅，就比如本人，但是千萬不要說程序猿不懂浪漫。當你不開心了，他可以分分鐘做出一個玫瑰花、心形等告白小程序給你制造小驚喜…………

程序員一旦浪漫起來，就真沒其他人啥事了！接下來就給大家介紹一下程序猿是如何表白收獲愛情的………

一、制圖表白

1.1玫瑰花

源碼如下：

 1 import turtle as t
 2 
 3 def Curve_Draw(n,r,d=1):
 4   for i in range(n):
 5     t.left(d)
 6     t.circle(r,abs(d))
 7 
 8 s=0.2
 9 t.setup(450*5*s,750*5*s)
10 t.pencolor('black')
11 t.fillcolor('purple')
12 t.speed(100)
13 t.penup()
14 t.goto(0,900*s)
15 t.pendown()
16 
17 t.begin_fill()
18 t.circle(200*s,30)
19 Curve_Draw(60,50*s)
20 t.circle(200*s,30)
21 Curve_Draw(4,100*s)
22 t.circle(200*s,50)
23 Curve_Draw(50,50*s)
24 t.circle(350*s,65)
25 Curve_Draw(40,70*s)
26 t.circle(150*s,50)
27 Curve_Draw(20,50*s,-1)
28 t.circle(400*s,60)
29 Curve_Draw(18,50*s)
30 t.fd(250*s)
31 t.right(150)
32 t.circle(-500*s,12)
33 t.left(140)
34 t.circle(550*s,110)
35 t.left(27)
36 t.circle(650*s,100)
37 t.left(130)
38 t.circle(-300*s,20)
39 t.right(123)
40 t.circle(220*s,57)
41 t.end_fill()
42 
43 t.left(120)
44 t.fd(280*s)
45 t.left(115)
46 t.circle(300*s,33)
47 t.left(180)
48 t.circle(-300*s,33)
49 Curve_Draw(70,225*s,-1)
50 t.circle(350*s,104)
51 t.left(90)
52 t.circle(200*s,105)
53 t.circle(-500*s,63)
54 t.penup()
55 t.goto(170*s,-30*s)
56 t.pendown()
57 t.left(160)
58 Curve_Draw(20,2500*s)
59 Curve_Draw(220,250*s,-1)
60 
61 t.fillcolor('green')
62 t.penup()
63 t.goto(670*s,-180*s)
64 t.pendown()
65 t.right(140)
66 t.begin_fill()
67 t.circle(300*s,120)
68 t.left(60)
69 t.circle(300*s,120)
70 t.end_fill()
71 t.penup()
72 t.goto(180*s,-550*s)
73 t.pendown()
74 t.right(85)
75 t.circle(600*s,40)
76 
77 t.penup()
78 t.goto(-150*s,-1000*s)
79 t.pendown()
80 t.begin_fill()
81 t.rt(120)
82 t.circle(300*s,115)
83 t.left(75)
84 t.circle(300*s,100)
85 t.end_fill()
86 t.penup()
87 t.goto(430*s,-1070*s)
88 t.pendown()
89 t.right(30)
90 t.circle(-600*s,35)
91 t.done()

1.2愛心

源碼如下：

 1 import turtle as t
 2 
 3 t.penup()
 4 t.seth(-90)
 5 t.fd(160)
 6 t.pendown()
 7 t.pensize(20)
 8 t.colormode(255)
 9 for j in range(10):
10   t.speed(1000)
11   t.pencolor(25*j,5*j,15*j)
12   t.seth(130)
13   t.fd(220)
14   for i in range(23):
15     t.circle(-80,10)
16   t.seth(100)
17   for i in range(23):
18     t.circle(-80,10)
19   t.fd(220)
20 t.done()

1.3 網頁愛心樹表白

代碼過長，僅展示部分代碼：

 1 <body>
 2 
 3 <audio autoplay="autopaly">
 4 
 5   <source src="renxi.mp3" type="audio/mp3" />
 6 
 7 </audio>
 8 
 9 <div id="main">
10 
11   <div id="wrap">
12 
13     <div id="text">
14 
15       <div id="code"> <font color="#FF0000"> <span class="say">浮世三千 吾愛有三 日月與卿</span><br>
16 
17         <span class="say"> </span><br>
18 
19         <span class="say">日為朝  月為暮  卿為朝朝暮暮</span><br>
20 
21         <span class="say"> </span><br>
22 
23         <span class="say">在這浮浮沉沉的大千世界里 我愛的只有三樣</span><br>
24 
25         <span class="say"></span><br>
26 
27         <span class="say">太陽  月亮和我愛的你</span><br>
28 
29                 <span class="say"> </span><br>
30 
31         <span class="say">太陽帶給我們白晝和希望 月亮帶給我們夜幕和寧靜  </span><br>
32 
33                         <span class="say"> </span><br>
34 
35         <span class="say"> 你與我的朝夕相伴 于我而言即是永恒 你是我一生摯愛</span><br>
36 
37         <span class="say"></span><br>
38 
39         <span class="say">一生愛一人很難，也不丟人</span><br>
40 
41              <span class="say"> </span><br>    
42 
43                  <span class="say"> 最美的愛情愿景不就是"愿得一心人 白首不相離"嘛</span><br>
44 
45                          <span class="say"> </span><br>
46 
47                                  <span class="say"> 如果可以請牢記當初的愛情承諾 記住最初的美好</span><br>
48 
49                         <span class="say"> </span><br>
50 
51         <span class="say">愿歲月靜好 淺笑安然 一切美好如約而至</span><br>
52 
53         <span class="say"> </span><br>
54 
55      </font>
56 
57      
58 
59       </div>
60 
61     </div>
62 
63     <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">愿得一心人，白首不相離</font> <span class="STYLE1">這簡單的話語……</span>
64 
65       <div id="clock"></div>
66 
67     </div>
68 
69     <canvas id="canvas" width="1100" height="680"></canvas>
70 
71   </div>
72 
73 </div>

1.4 煙花表白

1.5 網頁愛心表白

源碼如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <title>愛心</title>
  6   <style>
  7     *{margin:0; padding:0;}
  8     body{ background-color: #1E1E1E;     }
  9   </style>
 10 </head>
 11 <body>
 12 
 13   <canvas id="drawHeart"></canvas>
 14 
 15   <script>
 16     var hearts=[];
 17     var canvas=document.getElementById('drawHeart');
 18     var wW=window.innerWidth;
 19     var wH=window.innerHeight;
 20     // 創建畫布
 21     var ctx=canvas.getContext('2d');
 22     // 創建圖片對象
 23     var heartImage=new Image();
 24     heartImage.src='img/heart.svg';
 25     var num=100;
 26 
 27     init();
 28 
 29     window.addEventListener('resize', function(){
 30        wW=window.innerWidth;
 31        wH=window.innerHeight;
 32     });
 33     // 初始化畫布大小
 34     function init(){
 35       canvas.width=wW;
 36       canvas.height=wH;
 37       for(var i=0; i < num; i++){
 38         hearts.push(new Heart(i%5));
 39       }
 40       requestAnimationFrame(render);
 41     }
 42 
 43     function getColor(){
 44       var val=Math.random() * 10;
 45       if(val > 0 && val <=1){
 46         return '#00f';
 47       } else if(val > 1 && val <=2){
 48         return '#f00';
 49       } else if(val > 2 && val <=3){
 50         return '#0f0';
 51       } else if(val > 3 && val <=4){
 52         return '#368';
 53       } else if(val > 4 && val <=5){
 54         return '#666';
 55       } else if(val > 5 && val <=6){
 56         return '#333';
 57       } else if(val > 6 && val <=7){
 58         return '#f50';
 59       } else if(val > 7 && val <=8){
 60         return '#e96d5b';
 61       } else if(val > 8 && val <=9){
 62         return '#5be9e9';
 63       } else {
 64         return '#d41d50';
 65       }
 66     }
 67 
 68     function getText(){
 69       var val=Math.random() * 10;
 70       if(val > 1 && val <=3){
 71         return '愛你一輩子';
 72       } else if(val > 3 && val <=5){
 73         return '感謝你';
 74       } else if(val > 5 && val <=8){
 75         return '喜歡你';
 76       } else{
 77         return 'I Love You';
 78       }
 79     }
 80 
 81     function Heart(type){
 82       this.type=type;
 83       // 初始化生成范圍
 84       this.x=Math.random() * wW;
 85       this.y=Math.random() * wH;
 86 
 87       this.opacity=Math.random() * .5 + .5;
 88 
 89       // 偏移量
 90       this.vel={
 91         x: (Math.random() - .5) * 5,
 92         y: (Math.random() - .5) * 5
 93       }
 94 
 95       this.initialW=wW * .5;
 96       this.initialH=wH * .5;
 97       // 縮放比例
 98       this.targetScale=Math.random() * .15 + .02; // 最小0.02
 99       this.scale=Math.random() * this.targetScale;
100 
101       // 文字位置
102       this.fx=Math.random() * wW;
103       this.fy=Math.random() * wH;
104       this.fs=Math.random() * 10;
105       this.text=getText();
106 
107       this.fvel={
108         x: (Math.random() - .5) * 5,
109         y: (Math.random() - .5) * 5,
110         f: (Math.random() - .5) * 2
111       }
112     }
113 
114     Heart.prototype.draw=function(){
115       ctx.save();
116       ctx.globalAlpha=this.opacity;
117       ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
118       ctx.scale(this.scale + 1, this.scale + 1);
119         if(!this.type){
120           // 設置文字屬性
121         ctx.fillStyle=getColor();
122           ctx.font='italic ' + this.fs + 'px sans-serif';
123           // 填充字符串
124           ctx.fillText(this.text, this.fx, this.fy);
125         }
126       ctx.restore();
127     }
128     Heart.prototype.update=function(){
129       this.x +=this.vel.x;
130       this.y +=this.vel.y;
131 
132       if(this.x - this.width > wW || this.x + this.width < 0){
133         // 重新初始化位置
134         this.scale=0;
135         this.x=Math.random() * wW;
136         this.y=Math.random() * wH;
137       }
138       if(this.y - this.height > wH || this.y + this.height < 0){
139         // 重新初始化位置
140         this.scale=0;
141         this.x=Math.random() * wW;
142         this.y=Math.random() * wH;
143       }
144 
145       // 放大
146       this.scale +=(this.targetScale - this.scale) * .1;
147       this.height=this.scale * this.initialH;
148       this.width=this.height * 1.4;
149 
150       // -----文字-----
151       this.fx +=this.fvel.x;
152       this.fy +=this.fvel.y;
153       this.fs +=this.fvel.f;
154 
155       if(this.fs > 50){
156         this.fs=2;
157       }
158 
159       if(this.fx - this.fs > wW || this.fx + this.fs < 0){
160         // 重新初始化位置
161         this.fx=Math.random() * wW;
162         this.fy=Math.random() * wH;
163       }
164       if(this.fy - this.fs > wH || this.fy + this.fs < 0){
165         // 重新初始化位置
166         this.fx=Math.random() * wW;
167         this.fy=Math.random() * wH;
168       }
169     }
170 
171     function render(){
172       ctx.clearRect(0, 0, wW, wH);
173       for(var i=0; i < hearts.length; i++){
174         hearts[i].draw();
175         hearts[i].update();
176       }
177       requestAnimationFrame(render);
178     }
179   </script>
180 </body>
181 </html>

二、程序語言表白

2.1程序語言表白一

2.2程序語言表白二

2.3程序語言表白三

2.4程序語言表白四

在線咨詢

上一篇：jquery的text()和html()區別？如何正
下一篇：JavaScript 的性能優化：代碼加載和執行模式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

highlight.js - 讓網頁上的代碼高亮美化

關于 highlight.js

highlight.js 的技術特性

為什么要用 highlight.js

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

免費開源說明

一、制圖表白

1.1玫瑰花

1.2愛心

二、程序語言表白

2.1程序語言表白一

2.2程序語言表白二

2.3程序語言表白三

2.4程序語言表白四

您的項目需求