在技術(shù)博客或開(kāi)發(fā)教程類(lèi)網(wǎng)站中，代碼高亮是提升閱讀體驗(yàn)的重要功能。WordPress作為廣泛使用的內(nèi)容管理系統(tǒng)，提供了多種方式實(shí)現(xiàn)代碼高亮。本文將介紹常用的插件方案和手動(dòng)實(shí)現(xiàn)方法。
一、推薦插件方案
1. SyntaxHighlighter Evolved
- 特點(diǎn)：支持多種編程語(yǔ)言，短代碼調(diào)用簡(jiǎn)單（如
[php][/php]），兼容性強(qiáng)。 - 安裝：通過(guò)WordPress后臺(tái)插件庫(kù)搜索安裝，或上傳ZIP文件。
2. WP Githuber MD
- 特點(diǎn)：集成Markdown編輯器，支持代碼高亮和行號(hào)顯示，適合技術(shù)文檔撰寫(xiě)。
3. Enlighter
- 優(yōu)勢(shì)：可視化配置界面，支持自定義主題，性能優(yōu)化較好。
二、手動(dòng)實(shí)現(xiàn)代碼高亮
使用Prism.js
- 下載Prism.js庫(kù)（官網(wǎng)），上傳至主題目錄。
- 在
header.php或子主題中引入CSS和JS文件：
<link rel="stylesheet" href="/path/to/prism.css">
<script src="/path/to/prism.js"></script>
- 在文章中用
<pre><code class="language-php">...</code></pre>包裹代碼。
三、注意事項(xiàng)
- 性能優(yōu)化：選擇輕量插件，避免加載過(guò)多資源。
- 兼容性：測(cè)試插件與主題的兼容性，尤其是古騰堡編輯器。
通過(guò)以上方法，可以輕松為WordPress網(wǎng)站添加專(zhuān)業(yè)的代碼高亮功能，提升內(nèi)容可讀性。
