Prismjs：一個高質量的語法高亮庫

語法高亮在前端開發中扮演了重要的角色，常用來在博客、文檔、代碼分享平台中突出顯示關鍵字和語法結構 ，以便更好地展示代碼。Prismjs 是一個輕量級的、可擴展的、高質量的語法高亮庫。

一、Prismjs框架

Prismjs 能夠處理多種語言和文本格式， 如HTML、CSS、JavaScript、Markup 和 HTTP 等。它的核心包含了語法高亮和錯誤提示等基本功能，並提供了多種插件和主題，以供擴展和個性化定製。Prismjs框架的使用十分簡單，只需要在html文件中引入prism.js, 並在需要高亮顯示的塊級元素中使用pre和code標籤就行。

  
  
<hr/>
body { background-color: #fff; }
console.log("Hello, world!");
二、Prismjs代碼美化仿mac
代碼的視覺效果需要滿足更高的要求，Prismjs 的可擴展性可以大大提高美化代碼的效果。比如我們可以使用 「prism-material-themes」 模仿Mac的主題美化代碼：

  
  

三、Prismjs行號
行號是更好的代碼索引和辨識，在代碼塊前加入行號更是一大亮點，十分實用。Prismjs建議我們添加插件 「prism-line-numbers」，即可輕鬆實現行號：

  
  
  
  
  
console.log("This is a test.")
四、Prismjs特定語言
Prismjs支持許多具有語法結構的語言，例如我們可以使用 “prism-python” 插件支持Python語言：

  
  
  
  
  
  
  
# This is a test.
print("Hello, World!")
五、Prismjs老是卡住
Prismjs使用起來很簡單，但對於一些較大的代碼塊可能會導致讀取閃爍或凍結的問題，這些問題可能會更加明顯在舊版的瀏覽器中。為了解決這個問題，我們應該使用異步加載的方式初始化 Prismjs，並且懶加載代碼模塊，以免代碼塊過大導致初始化時卡頓。

  
  

六、Prismjs和highlight
Prismjs 和 highlight.js 都是常用於代碼高亮的js庫，它們的技術實現和代碼結構都很相似。但是，Prismjs比highlight.js具有更好的性能和更少的依賴關係，考慮到不同的實際情況，選擇哪一種庫是個人的決定。
七、Prismjs做自定義指令
Prismjs支持自定義指令，可用於擴展當前語法高亮的庫。在代碼塊添加指令 data-prism-src 和 data-prism-async 可以自定義加載指定內容和異步加載。

  
八、Prismjs顯示行號和語言
顯示行號和語言需要在css中添加指定樣式

  pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; }
  pre.line-numbers > code { position: relative; }
  pre.line-numbers > code:before { content: counter(linenumber); counter-increment: linenumber; position: absolute; left: -3.6em; top: 0px; color: #ccc; font-size: 0.8em; }
  .token { font-weight: bold; color: #1e88e5; }
  .token.operator { color: #1e88e5; }
  .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #1e88e5; }
  .token.string, .token.attr-value { color: #43a047; }
  .token.punctuation { color: #757575; }
  .language-css .token.property, .language-css .token.boolean, .language-css .token.number { color: #f4511e; }
  .language-css .token.selector { color: #9a4b9d; }
  .language-css .token.keyword { color: #1e88e5; }
  .token.tag .token.tag { color: #555; }

再次強調，Prismjs是一個輕量級的高質量的語法高亮庫，它可以輕鬆地解決我們在項目中的編碼高亮問題，並提供了豐富的擴展插件和主題，讓我們可以更加方便地打造自己的代碼美化。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/300383.html