如何在頁面上優雅的展示代碼？
在日常開發中，一些應用需要在頁面上顯示代碼，這時就需要用到代碼語法高亮。代碼語法高亮使代碼更易于閱讀、編寫和調試。通過直觀地區分不同的程序元素，例如關鍵字、注釋和字符串，語法高亮可以幫助開發人員快速理解代碼的結構和邏輯。本文就來分享 3 個代碼語法高亮庫，并探討它們的功能和特點。
1、Highlight.js
Highlight.js 是一個用 JavaScript 編寫的語法高亮庫。它可以在瀏覽器和服務端上使用。它可以與幾乎任何標記語言一起使用，不依賴于其他框架，并且具有自動語言檢測的功能。它是 Web 開發人員使用最廣泛、維護最積極的語法高亮庫。
Highlight.js 支持 190 多種編程語言，并且可以選擇添加第三方語言定義以支持更多語言。它可以定制超過 240 種顏色主題，以滿足風格偏好。它的工作原理是掃描網頁中 <pre><code> 標簽內標記的代碼塊或在 class 屬性中顯式定義的語言，并對它們應用語法高亮。該庫還允許開發人員確定哪些代碼塊應該手動應用語法突出顯示以及應該使用什么顏色主題，從而提供了更大的靈活性。
雖然 Highlight.js 因其許多優點而成為眾多項目普遍青睞的庫，但它也具有一些局限性：
- 相對較大的尺寸會增加應用的頁面加載時間
- 對現代 JavaScript 框架的支持有限
圖片
Github：https://github.com/highlightjs/highlight.js
2、Prism
Prism 是一個輕量級且功能強大的語法高亮庫。它用于在網頁上實現代碼塊的語法高亮顯示，并具有以下特點：
- 廣泛支持的語言：Prism 支持多種編程語言，包括常見的 C、Java、Python、JavaScript 等，以及其他一些較為特殊的語言。
- 易于使用：Prism 的使用非常簡單，只需要添加相應的 CSS 和 JavaScript 文件，并對代碼塊進行標記即可實現語法高亮效果。
- 豐富的樣式主題：Prism 提供了多個內置的樣式主題，可以輕松地設置代碼塊的外觀，同時也支持自定義樣式。
- 插件擴展性：Prism 支持插件機制，可以通過添加插件擴展庫的功能，例如行號顯示、復制代碼等。
- 輕量級和快速：Prism 的代碼庫很小并且高效，加載和渲染速度較快，適用于在網頁上顯示大量的代碼塊。
圖片
Github：https://github.com/PrismJS/prism
3、Rainbow
Rainbow 是一個用 Javascript 編寫的代碼語法高亮庫。它被設計為輕量級（~2.5kb）、易于使用且可擴展，完全可以通過 CSS 進行主題化。
Rainbow 目前支持的語言包括 C、C#、Coffeescript、CSS、D、Go、Haskell、HTML、Java、JavaScript、JSON、Lua、PHP、Python、R、Ruby、Scheme、Shell、Smalltalk。
圖片
Github：https://github.com/ccampbell/rainbow
