如何在 WordPress 中顯示代碼 - 3 種方法（有和沒有插件）

您想在您的網站上顯示一些代碼，但不確定最好的方法嗎？ 這篇文章是給你的。 在本指南中，我們將向您展示在 WordPress 中輕鬆顯示代碼的不同方法。

為什麼在 WordPress 中顯示代碼很困難？

如果您有一個向用戶發布有用指南的網站，您可能需要在博客文章中展示代碼片段。 問題是它不像粘貼代碼那麼簡單。 實際上，例如，如果您將 HTML 片段粘貼到您的博客文章中，它將無法正常工作。 如您所知，WordPress 文本編輯器是基於 HTML 的編輯器，因此它會自動處理代碼並打印出來。

同樣，如果您複製並粘貼簡碼，WordPress 將顯示該功能，而不是簡單地顯示寫入的簡碼。

如果您想顯示代碼並且可能導致格式不佳，這並不理想。 例如，如果您想通過 WordPress 經典編輯器在您的文章中嵌入一些 HTML 代碼，編輯器將處理這些代碼並將其顯示在內容中。

解決此問題的最佳方法是為您的代碼片段使用專用樣式。 這就是我們將在本文中向您展示的內容。

如何在 WordPress 中顯示代碼

在 WordPress 中顯示代碼有 3 種主要方法：

1. 使用 WordPress 編輯器
   1. 古騰堡
   2. 經典編輯器
2. 使用專用的 WordPress 插件
3. 手動插入代碼

讓我們看一下每種方法，並逐步向您展示如何在您的網站上顯示代碼。

1) 使用 WordPress 編輯器

在 WordPress 中顯示代碼的最簡單方法是使用 WordPress 編輯器。 在本節中，我們將向您展示如何同時使用 Gutenberg 和 Classic Editor。

1.1) 古騰堡

首先，登錄您的 WordPress 網站並打開要顯示代碼的帖子。 搜索一個名為Code的塊並選擇它。

您可以在那裡開始編寫代碼，完成後發布帖子。 在前端，您將看到代碼。

這就是您可以使用 Gutenberg 編輯器在您的網站上顯示代碼的方式。

1.2) 經典編輯器

如果您仍在使用經典編輯器，您還可以使用預格式化文本選項顯示代碼片段。 首先，使用經典編輯器打開要包含代碼的帖子。

然後，選擇代碼片段並從下拉列表中選擇預格式化文本選項。

你會看到文本是如何變化的。 然後，發布文章並從前端檢查頁面，您將在自定義框中看到代碼，如下所示。

這樣，您可以在 WordPress 網站上顯示任何代碼。

如您所見，使用 WordPress 編輯器簡單明了。 但是，如果您想要更多選項來顯示不同類型的代碼，則需要其他東西。

2) 使用 WordPress 插件顯示代碼

在 WordPress 中顯示代碼的另一種方法是使用專用插件。 那裡有很多選擇，但對於這個演示，我們將使用一個名為 SyntaxHighighter Evolved 的免費工具。

首先，您需要安裝插件，因此登錄到您的站點後，轉到Plugins > Add New 。 搜索 SyntaxHighlighter Evolved 插件，安裝並激活它。

在 WordPress 設置部分下，您將看到插件的配置選項。

在插件的設置頁面上，您將看到幾個自定義選項：

• 版本控制
• 顏色主題
• 畫筆加載
• 各種各樣的
• 額外的 CSS 類
• 起始行號
• 行號填充
• 標籤大小
• 標題

如果您是基本用戶，默認配置就足夠了，而如果您是高級用戶，您可能需要查看設置並根據需要進行調整。 更改設置後，保存更改。 在實時預覽部分下，您將看到一個帶有高亮效果的示例代碼。

此時，該過程會因您使用的編輯器而異。 讓我們看看兩者。

2.1) 古騰堡編輯器

激活插件後，您將在編輯器中看到一個名為SyntaxHighlighter Code的新塊。

您可以使用該塊在帖子中顯示不同類型的代碼。 只需選擇塊，然後在設置面板中，您將看到選擇要顯示的語言的選項。 您會看到有幾十種語言可供您選擇。

在本例中，我們將顯示一個 CSS 代碼片段，因此我們將從下拉列表中選擇 CSS。

您還可以從塊部分更改代碼語言。

選擇代碼語言後，將腳本粘貼到塊中。

此外，您可以從右側面板的“高級”部分調整插件的默認設置並更改樣式。

完成後，發布（或更新）帖子並從前端檢查帖子以查看結果。

正如你在上面的截圖中看到的，我們已經成功地突出了我們帖子中的 CSS 代碼。 這樣，您只需從塊設置中選擇正確的代碼語言，即可在 WordPress 中顯示您想要的任何代碼。

2.2) 經典編輯器

如果您不使用 Gutenberg 編輯器，則需要手動輸入語言代碼。 要使用經典編輯器顯示 Syntaxhighlighter 代碼，我們將使用簡碼。 如果您不熟悉短代碼，我們建議您查看本指南。

首先，使用經典編輯器打開任何帖子或創建新帖子。 例如，要顯示 HTML 內容，請使用[html] [/html]短代碼並將代碼粘貼在它們之間，如下所示並發布帖子。

[html]
<a href=”quadlayers.com”>QuadLayers</a>
[/html]

如果您從前端查看帖子，您將看到突出顯示的 HTML 代碼。

這是您可以使用 HTML 嵌入功能的方式，但您可以對任何其他代碼語言執行相同的操作。 例如，要顯示 PHP 片段，請使用[php] [/php]短代碼、 [css] [/css]短代碼來顯示 CSS，等等。

這樣，您可以修改短代碼並顯示您喜歡的任何代碼片段。 讓我們在一篇文章中展示一個示例 PHP 代碼片段：

[php]
<?php
?>
[/php]

如您所見，您可以更改代碼並在 WordPress 網站上顯示任何片段。

注意：如果要更改代碼的字體、字體大小和字體粗細，需要為 Syntaxhighlighter 插件添加自定義 CSS 類。 您可以從插件的設置中執行此操作，然後通過 WordPress 定制器或主題編輯器添加 CSS 代碼來定制它。

3) 手動顯示代碼

如果您有編碼技能，您可以手動在 WordPress 中顯示代碼。 這是一種更高級的方法，為您提供了很大的靈活性。 對於這個演示，我們將使用<pre>和<code>標籤在帖子中顯示代碼。

首先，您需要使用外部工具將文本轉換為 HTML。 我們將使用 MotherEff，但您可以使用您喜歡的任何其他 HTML 編碼器。

然後，將您的 HTML 片段粘貼到解碼框中，該工具將為您提供編碼版本。

對於這個例子，我們的代碼是：

 <p><a href="/quadlayers">訪問我們的投資組合</a></p>

該工具將其轉換為：

代碼看起來不友好，但它會完成這項工作。

然後，在您的 WordPress 儀表板中打開經典編輯器並切換到文本編輯器。

使用<pre>和<code>打開標籤和</code>和</pre>將編碼的代碼粘貼到那里以關閉它們。 例如，我們的示例代碼將如下所示：

然後，發布帖子，在前端，您將看到突出顯示的代碼，如下所示。

這樣，您可以在任何 WordPress 帖子中手動顯示代碼。

注意：Gutenberg 用戶將無法使用此方法。 您只能使用經典編輯器執行此操作。

獎勵：如何在段落中顯示代碼

除了在 WordPress 帖子中顯示代碼之外，另一個有趣的選擇是在段落中顯示代碼。 在本節中，我們將向您展示如何做到這一點。 為此，我們將使用一些 CSS 和 HTML。

首先，您需要向您的網站添加一個簡單的 CSS 代碼。 您可以使用 WordPress 定制器或特定於站點的插件，例如代碼片段。 對於這個演示，我們將轉到外觀 > 自定義 > 附加 CSS並將我們的代碼粘貼到那裡。

 代碼 {
 字體大小：1.2em；
 顏色：#1e1e1e；
 位置：相對；
 邊框半徑：4px；
 背景：#e1e1e1
 } 

發布更改後，打開要編輯的任何帖子。 然後，選擇要突出顯示的內容。 例如，我們將在本段中將短語“開始博客”顯示為代碼。

切換到文本編輯器並將內容包裝在<code>和</code>標記內。 按照我們的示例，我們的代碼將如下所示：

<code>開始寫博客</code>

然後，發布或更新更改並檢查前端以查看更改。

這樣，您可以突出顯示特定的單詞或句子。 如果您想修改代碼的 CSS 樣式，請隨時編輯我們在此處使用的 CSS 腳本。

結論

總而言之，在您的網站上展示代碼並不像粘貼腳本那麼簡單。 但是，在本指南中，我們向您展示了在 WordPress 中顯示代碼的不同方法：

1. 使用 WordPress 內容編輯器
2. 帶有專用插件
3. 手動

如果您想要一個快速簡單的解決方案，WordPress 內容編輯器為您提供了在任何帖子上展示腳本的工具。 但是，如果您需要更多自定義選項，SyntaxHighligher Evolved 插件是您的最佳選擇。 另一方面，如果你有編碼技能，你可以手動添加你的代碼片段，並在前端使用一些 CSS 自定義樣式。

最後，如果要突出顯示段落中的特定句子或單詞，可以將文本包裝在<code> </code>標記中。

有關如何在您的網站上編輯代碼的更多信息，請查看以下在 WordPress 中編輯 HTML 的指南。

你覺得這篇文章有幫助嗎？ 您更喜歡哪種方法在您的網站上顯示代碼？ 在下面的評論部分讓我們知道。