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字串。相關內容,請看官網介紹。
相關連結
微信公眾號:撩碼