在WordPress網(wǎng)站中展示代碼片段是技術(shù)博客和開發(fā)者網(wǎng)站的常見需求。本文將介紹幾種在WordPress文章中顯示代碼的有效方法，確保代碼格式清晰、語法高亮且易于閱讀。
一、使用WordPress內(nèi)置的代碼塊
WordPress 5.0以上版本引入了古騰堡編輯器，其中包含專門的代碼塊：
- 在編輯器中點擊”+“按鈕添加新塊
- 搜索并選擇”代碼”塊
- 粘貼你的代碼內(nèi)容
<!-- 示例HTML代碼 -->
<div class="container">
<h1>歡迎來到我的網(wǎng)站</h1>
</div>
二、使用SyntaxHighlighter插件
SyntaxHighlighter是最受歡迎的代碼高亮插件之一：
- 安裝并激活”SyntaxHighlighter Evolved”插件
- 在文章中使用短代碼包裹代碼：
[code language="python"]
def hello_world():
print("Hello, World!")
[/code]
三、使用Prism.js實現(xiàn)高級高亮
對于更專業(yè)的需求，可以手動集成Prism.js：
- 在主題的
functions.php中添加：
function add_prism() {
wp_enqueue_style('prism-css', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css');
wp_enqueue_script('prism-js', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js');
}
add_action('wp_enqueue_scripts', 'add_prism');
- 然后在文章中使用
<pre><code class="language-php">標(biāo)簽包裹代碼
四、使用Gutenberg自定義HTML塊
對于簡單的內(nèi)聯(lián)代碼，可以使用反引號：
echo "Hello World";
對于多行代碼，使用自定義HTML塊：
// JavaScript示例
function calculateSum(a, b) {
return a + b;
}
最佳實踐建議
- 始終對代碼中的特殊字符進(jìn)行轉(zhuǎn)義
- 為代碼塊添加適當(dāng)?shù)恼Z言類名以實現(xiàn)語法高亮
- 考慮添加”復(fù)制代碼”功能提升用戶體驗
- 保持代碼塊寬度適中，避免水平滾動條
- 為移動設(shè)備優(yōu)化代碼顯示效果
通過以上方法，你可以在WordPress文章中專業(yè)地展示各種編程語言的代碼片段，提升技術(shù)內(nèi)容的可讀性和專業(yè)性。
