prism.js——讓網頁中的程式碼更好看
阿新 • • 發佈：2018-11-12
粗放的程式碼展示
有時候，網頁中會插入程式碼。直接把程式碼放入<pre></pre>標籤和<code></code>標籤裡，也算是可以在頁面中顯示出來。
比如下面這樣的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>直接寫程式碼</title> </head> <body> <pre> <code> function add(a, b){ return a + b; } </code> </pre> </body> </html>
那麼效果如何呢？如下：
可以發現上面這樣是一種很糟糕的效果。
對比React官網上的程式碼展示
對比一下react官網上的程式碼展示方式：
反正我是更喜歡像react官網這樣來展示程式碼。
第一段程式碼經過一個神祕的處理之後：
這是怎麼處理的呢？原始碼變成什麼樣了呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用prism美化網頁中的程式碼</title> <link rel="stylesheet" href="../libaray/prismjs/prism.css"> </head> <body> <pre class="line-numbers"><code class="language-javascript">function add(a, b){ return a + b; }</code> </pre> <script src="../libaray/prismjs/prism.js"></script> </body> </html>
可以看到新的網頁程式碼中引入了兩個檔案：prism.css和prism.js
使用prism.js美化網頁中的程式碼
Prism is a lightweight, extensible syntax highlighter.
Prism是一款輕量的，可擴充套件的語法高亮處理器。
react、MDN、SitePoint、css-tricks等網站都使用該專案
使用起來特別簡單：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Prism不同的使用方式</title> <!-- 引入prism.css檔案 --> <link rel="stylesheet" href="./prism.css"> </head> <body> <!-- 放置程式碼位置 --> <!-- css程式碼 --> <pre> <code class="language-css"> body{ background-color: red; } </code> </pre> <!-- JavaScript程式碼 --> <!-- 使用行號外掛和高亮外掛 --> <pre> <code class="language-javascript line-numbers"> function Person(name, age){ this.name = name || 'pelli'; this.age = age || 18; } Person.prototype.sayHi = function(){ console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old'); }; </code> </pre> <!-- JavaScript程式碼 --> <!-- 使用行號外掛和高亮外掛 --> <pre> <code class="language-javascript line-numbers">function Person(name, age){ this.name = name || 'pelli'; this.age = age || 18; } Person.prototype.sayHi = function(){ console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old'); };</code> </pre> <!-- 引入prism.js檔案 --> <script src="./prism.js"></script> </body> </html>
效果如下：
除了以上介紹的簡單使用方式以外，還能夠在node裡面使用，輸出處理好的dom字串。相關內容，請看官網介紹。
相關連結
微信公眾號:撩碼
