學習如何在WordPress中顯示程式碼，對於那些持續在網上釋出程式碼供讀者使用的部落格和內容創作者來說是至關重要的。計算機程式碼，根據設計，會在網站的前端顯示一些新的東西，而不是你在實際程式碼片段中發現的標籤、斜線和括號。
然而，這給那些寫開發和設計的人帶來了問題，因為你需要一種方法來正確顯示程式碼，而不需要它做真正的工作，如建立一個按鈕或為一個段落塊新增樣式。
簡單地說，如果你寫了一篇部落格文章，並在其中放了一個程式碼片段的例子，你會想阻止程式碼的實際工作! 這樣一來，讀者就可以看到原始形式的程式碼，在一個格式良好的塊中檢視程式碼，甚至可以複製其內容用於他們的開發工作。
在本指南中，我們將向你展示如何使用幾種不同的方法在WordPress中顯示程式碼（無論你的WordPress主題如何），我們將幫助你決定哪種方法最適合你的工作流程。
當你在WordPress中新增常規程式碼時會發生什麼？
你可能會想，如果你在WordPress的視覺化編輯器中寫一些程式碼，會發生什麼。畢竟，你不是在搞文字或程式碼編輯器，所以你的程式碼片段不是應該很好地工作嗎？
可能不是。
這裡有一些可能發生的不尋常的結果：
- 程式碼部分出現，在文章的前端顯示一些程式碼，而其他的則消失了。這在訪問者看來是不專業的；這意味著你的程式碼是不準確的。
- 完全沒有顯示，程式碼在後臺完全消失，而在文章的前臺沒有顯示任何東西。
- 你看到了奇怪的格式——通常是一些對使用者不友好的東西，或者是對受眾不適合釋出的東西。
- 程式碼可能只是部分呈現
為了說明這些結果中的幾個，我們將使用下面的HTML程式碼片段：
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
這個特殊的程式碼片段使用HTML樣式元素來產生三個帶有標題和段落的綠色內容塊。
點選編寫程式碼
然而，我們想在部落格文章中顯示原始程式碼，而不是讓它實際呈現在這些區塊中。
如果我們把程式碼直接貼上到WordPress的Gutenberg區塊編輯器中，結果如下：
古騰堡編輯器的結果來自HTML程式碼
正如你所看到的，WordPress試圖將程式碼用於它的主要目的：生成內容–然而它卻將程式碼的樣式剝離，所以它沒有提供我們想要展示給讀者的結果。
為了避免這樣的情況，我們鼓勵你改用下面列出的方法之一來顯示程式碼。
如何在你的WordPress網站上顯示程式碼
這些方法從最簡單到最難列出，我們為那些喜歡在降價編輯器中編寫程式碼和內容的人（與WordPress相反）提供了一些特殊的方法。
- 方法1：使用Gutenberg區塊編輯器（預設設定）
- 方法2：使用外掛
- 方法3：使用編碼器工具
- 方法4：使用自定義短程式碼
- 方法5：使用＜code＞和＜pre＞標籤
- 方法6：使用連線到WordPress的Markdown編輯
方法1：使用Gutenberg區塊編輯器（預設設定）
為了練習在WordPress中顯示程式碼，你可以使用下面的程式碼片段，它使用HTML和內部CSS來產生一個簡單的結果，即一個藍色的標題和一個黑色的段落：
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>
當執行時，程式碼會在前端顯示以下內容：
結果顯示帶有樣式的標題和正文
但是，通過學習本教程，您將瞭解如何顯示原始程式碼本身，而不是程式碼應該在前端顯示什麼。
步驟1: 在WordPress中新增程式碼區塊
WordPress Gutenberg編輯器已經有了一個內建的程式碼區塊，它允許您顯示程式碼片段，而不會丟失任何格式或實際啟用程式碼。
首先，在WordPress中開啟一個文章或頁面，然後單擊其中一個“新增區塊”按鈕。
新增區塊按鈕
單擊“新增區塊”按鈕之一
這將顯示可用塊的集合。您可以搜尋“程式碼”區塊，也可以在搜尋欄中鍵入類似“程式碼”的關鍵字。
一旦你看到程式碼區塊（帶有括號圖示），點選它可以在文章中插入一塊程式碼。
彈出視窗新增區塊，帶有程式碼區塊選項
您現在應該會看到一個欄位，並提示“Write code…”。
WordPress Gutenberg編輯器支援markdown，因此您也可以通過在編輯器中鍵入正斜槓（ / ）來找到並插入Code區塊，然後開始編寫“C”或“Code”。WordPress將顯示所有相關的區塊，為您提供更快的插入方式。
很容易混淆程式碼塊和自定義HTML區塊。但是，自定義HTML區塊用於新增要在前端渲染的自定義HTML，而不是用於新增要顯示的原始程式碼。
使用markdown呼叫程式碼區塊
步驟2：將顯示程式碼貼上到程式碼區塊欄位
現在是時候複製您想要顯示的程式碼並將其貼上到寫著“Write Code…”的框中了。
寫入或貼上要顯示的程式碼
您的程式碼現在顯示在框中。
Code區塊的優點在於它尊重程式碼片段中已經存在的所有空格和製表符。因此，它看起來與您複製它的來源沒有任何不同。
貼上在程式碼區塊中的程式碼片段
步驟3：釋出和檢視結果
要在WordPress文章或頁面上顯示您的程式碼，請單擊“釋出”按鈕完成此過程。
您也可以在釋出之前通過選擇“預覽”來了解它的外觀。
單擊“釋出”
點選“釋出”按鈕後，訪問該文章的實時版本，確認您的程式碼塊顯示為原始程式碼。
正如您所看到的，程式碼區塊相當簡單，但它提供了在部落格文章上釋出程式碼時維護格式的必要功能。
請看下面的螢幕截圖。在我們這裡的示例中，與原始程式碼片段相比沒有任何變化；它只是被放在一個灰色盒子的前端。
在前端顯示程式碼
步驟4：考慮格式化程式碼區塊
為了讓程式碼區塊稍微突出一點，可以考慮將其外觀從預設值更改為預設值。
要顯示塊的樣式選項，請選擇“程式碼”區塊，然後選擇“設定”（齒輪圖示）按鈕。這將開啟“區塊”選項卡，該選項卡僅顯示所選塊（在本例中為“程式碼”區塊）的“區塊”設定。
轉到程式碼格式的區塊設定
您可以根據需要設定“程式碼”區塊的樣式，並可以選擇更改文字和背景色等內容。
編輯顏色和背景設定
您還可以：
- 更改文字大小
- 向程式碼框新增填充和邊距
- 包括具有自定義寬度和顏色的邊框
尺寸、尺寸和邊框的設定
和往常一樣，在編輯完區塊後單擊“釋出”按鈕，然後在WordPress文章的前端檢視結果。
前端結果
方法2：使用外掛
在WordPress上顯示程式碼的另一種方式是安裝外掛。
考慮到WordPress已經有了內建的程式碼塊，這種方法可能看起來有點多餘，但一些外掛提供了額外的功能和格式化工具，使使用外掛變得有價值。簡而言之，您可以使您的程式碼塊比標準的古騰堡程式碼塊更漂亮。
此外，一些經典WordPress編輯器使用者可能會發現參與外掛更容易，因為在經典編輯器中顯示程式碼有點棘手。
首先，你必須選擇一個“syntax highlighter”外掛，這是一種很好的說法，即外掛會突出顯示你的原始碼並保持其格式不變。
以下是一些信譽良好的外掛，用於在WordPress上顯示程式碼：
我們將在本教程中使用Enlighter外掛，因為它提供了標記您在程式碼框中顯示的程式碼型別的選項，以及許多其他樣式功能。然而，非常歡迎你嘗試其他人，因為他們大多都做同樣的事情。
步驟1:安裝語法高亮顯示外掛
使用您喜歡的外掛安裝方法在您的WordPress網站上安裝Enlighter–可自定義語法高亮顯示外掛。
啟用後，該外掛可以通過Gutenberg區塊或經典編輯器插入按鈕將程式碼插入任何文章/頁面。
Enlighter外掛
步驟2：將Enlighter原始碼區塊插入文章
如果你正在使用WordPress Gutenberg塊編輯器，開啟一個你想顯示程式碼的文章。單擊其中一個“新增區塊”（+圖示）按鈕以顯示可用塊的集合。
瀏覽或鍵入Enlighten Sourcecode區塊的關鍵字。單擊該區塊將其插入到文章中。
Enlighter Sourcecode區塊
步驟3：將程式碼貼上到語法高亮顯示區塊
然後，Enlighter Highlighter區塊顯示在塊編輯器中，標題為“Generic Highlighting”，欄位為“Insert Sourcecode…”
取你想在WordPress上顯示的任何程式碼，並將其貼上/鍵入“Insert Sourcecode…”欄位。
使用Insert Sourcecode欄位
作為語法高亮顯示，該外掛保留了所有格式選項和選項卡。一旦您對結果感到滿意，請單擊“釋出”按鈕。
點選發布
步驟4：在前端預覽程式碼
有了這個，你可以檢視你文章的前端，看看網站訪問者看到了什麼。
Enlighter外掛為程式碼顯示提供了一個最低限度的預設主題，並帶有行號以幫助組織和引用。
顯示在前端
正如我們提到的，使用外掛在WordPress上顯示程式碼確實比其他方法有優勢。例如，當使用者滾動程式碼時，Enlighter語法外掛的前端版本會突出顯示行。
高亮顯示的程式碼行
程式碼框的右上角還有幾個按鈕，其中一個按鈕以純文字顯示程式碼，沒有行號。
純文字按鈕
第二個按鈕被稱為“複製到剪貼簿”，它可以立即將程式碼框中的所有內容複製到使用者的剪貼簿，使用者可以將其複製並貼上到他們想要的任何程式中。
“複製到剪貼簿”按鈕
最後，第三個按鈕在一個新視窗中開啟程式碼，並將其顯示在瀏覽器視窗的純文字版本中。
在新視窗中開啟程式碼
步驟5：設定程式碼框的語言和行設定
Enlighter外掛提供了各種主題和強大的自定義工具，使程式碼框看起來隨心所欲。如果你不想使用預設主題，請返回WordPress內的文章，點選當前開啟的Enlighter Sourcecode區塊。
這揭示了WordPress中的區塊側邊欄。如果沒有顯示，請務必單擊WordPress視窗右上角的“設定”（齒輪圖示）按鈕。
第一個要自定義的設定是Language欄位，它告訴外掛顯示的是哪種程式碼語言，以便它可以提供適當的格式和突出顯示。
Language欄位
有很多編碼語言可供選擇，所以滾動列表並選擇最合適的一種。
選擇語言
“Specialines”欄位高亮顯示您指定的任何行。要做到這一點，請鍵入用逗號分隔的行號。
特別行
因此，站點訪問者會看到您指定的所有行的高亮顯示行。
前端突出顯示的行號
Lineoffset欄位是一種從特定編號行開始編碼片段的方法，如果您只顯示更大行集合中的一部分程式碼子集，這將是有益的。
Lineoffset欄位
如您所見，在Lineoffset欄位中鍵入10將在數字10處啟動整個程式碼框。
在特定行開始文件
步驟6：選擇主題
Enlighter主題是該外掛的預設主題。但是，“Theme”欄位（仍位於“區塊設定”面板下方）提供了一系列可供選擇的內建主題。
主題選項
例如，Godzilla主題顯示的程式碼就好像它在圖形或繪圖紙上一樣。
Godzilla主題
Atomic主題將背景切換為深色主題，同時為程式碼標籤提供主要的白色文字和粉紅色。
Atomic主題
另一個例子是經典主題，這是Enlighter主題的一個不那麼極簡的版本，顏色更明亮，線條更清晰。
經典主題
步驟7：考慮構建自定義主題
Enlighter外掛在WordPress儀表盤內提供了一個選項卡，用於自定義外掛的各個方面及其突出顯示功能。
要完全控制程式碼框的設計和顯示，請轉到Enlighter選項卡（<>圖示），然後選擇外觀或主題自定義程式。
主題自定義程式
“外觀”選項卡允許您選擇標準主題，同時還允許您調整元素，如：
- 程式碼縮排
- 文字溢位
- 線條編號
- 線條懸停效果
- 雙擊時的RAW程式碼
主題自定義程式的外觀部分
“主題自定義程式”部分包括一長串選項卡，用於從頭開始構建程式碼高亮主題，並提供調整按鈕、表示式、語言等選項。
其他設定
使用Enlighter與經典編輯器
對於那些仍在使用經典WordPress編輯器的人來說，Enlighter外掛的工作原理略有不同。
安裝完Enlighter外掛後，轉到任何文章或頁面，在編輯器的控制面板中找到Enlighter Code Insert按鈕。
Enlighter程式碼插入
這將開啟一個名為Enlighter Code Insert的新視窗。
將要顯示的程式碼貼上到底部的大（未標記）欄位中。
貼上程式碼
單擊Language（語言）欄位中的下拉選單，選擇正確的編碼語言。
選擇一種語言
完成後，單擊“OK”按鈕。您還可以對該視窗中的其他功能進行調整，例如新增線條縮排。
線條縮排示例
單擊文章的“釋出”按鈕，然後在前端檢視結果。經典編輯器的預設程式碼框是深色主題，但您可以更改程式碼框的外觀，甚至可以構建自己的主題。
已釋出版本
方法3：使用編碼器工具
當你嘗試在WordPress中顯示程式碼時，編碼器工具可以作為替代選項，尤其是如果你不打算經常這樣做（也不想破壞外掛）。
HTML編碼器保留了程式碼格式的完整性，尤其是那些具有特殊字元和選項卡的程式碼格式。編碼器可以處理所有型別的程式碼，但它們可以將插入的程式碼轉換為易於貼上到WordPress中的HTML程式碼。
沒有任何可靠的編碼器工具作為外掛，但許多都是作為免費的第三方網路應用程式提供的。還要注意，Encoder工具不提供任何樣式工具，因此您只會收到應該顯示的程式碼（沒有花哨的框或行自定義功能）。
一些可靠的編碼器工具包括：
根據我們的測試，最有效的編碼器工具是W3Docs HTML編碼器，所以我們將在本教程中使用它。
步驟1：開啟編碼器並選擇設定
轉到W3Docs HTML編碼器網站。
該頁面顯示兩個並排的框欄位。左邊的是貼上程式碼的位置。右邊的顯示要複製並貼上到WordPress中的編碼版本。
但是，您必須首先設定要保留的程式碼型別：
- 如果貼上帶有JavaScript元素的程式碼，請選擇JavaScript unicode。
- 使用HTML時使用HTML symbols。
選擇HTML符號
步驟2：貼上並單擊以編碼
將你想在WordPress中顯示的任何程式碼貼上到左側欄位中。然後找到並單擊上面右側的“Encode”按鈕。
單擊以編碼
步驟3：複製解碼結果
最終的產品可能看起來很混亂，但實際上它是HTML元素的組合，可以保留您插入的程式碼的每一個方面，而不會導致程式碼啟用並在前端顯示其他內容。
單擊“Copy”按鈕。
複製程式碼
步驟4：將編碼的HTML貼上到WordPress程式碼或文字編輯器中
返回WordPress，開啟所需的文章或頁面。
選擇右上角的選項（三個垂直點）選單項。單擊“Code Editor”選項。
注：不要嘗試在這個過程中使用自定義HTML塊，因為它似乎不起作用。
轉到“選項”選單
現在，您將看到Code Editor，而不是視覺化的區塊編輯器。找到要顯示程式碼的區域，並將編碼的HTML貼上到編輯器中。
貼上編碼HTML
如果您使用的是經典WordPress編輯器，則必須轉到“文字”選項卡，這與古騰堡區塊編輯器中的“程式碼編輯器”相同。
“文字”選項卡
步驟5：釋出並檢視程式碼
單擊文章的“更新”或“釋出”，然後導航到該文章的前端以檢視其外觀。
在工具新增HTML編碼元素之前，您應該看到貼上到編碼器中的原始程式碼。如前所述，編碼器沒有任何造型功能，所以這是一個乾淨、簡約的外觀的好方法。
釋出code
方法4：使用自定義短程式碼
建立一個自定義的短程式碼可以插入大量可重複使用的程式碼，而無需複製和貼上。這就是為什麼自定義短程式碼為在WordPress上顯示程式碼提供了一個堅實的機會。
以下是使用自定義短程式碼顯示程式碼的好處：
- 自定義短程式碼可以讓您儲存一次複雜的程式碼，然後重用它，從而無需每次鍵入更長的程式碼片段。
- 您可以為程式碼熒光筆和方框編寫自己的樣式CSS。
- 任何人都可以使用短程式碼，所以其他貢獻者只需點選一個按鈕就可以利用你的程式碼高亮器和塊。
建立自定義短程式碼需要有編輯WordPress主題檔案、使用PHP程式碼以及建立WordPress外掛的經驗。由於這些要求，對於那些剛接觸PHP的人來說，為WordPress製作自定義的短程式碼可能很困難。
然而，最終產品以一種明顯更容易的方式在WordPress上顯示程式碼。
HTML短程式碼
您可以隨心所欲地命名自定義短程式碼，併為不同的編碼語言建立多個選項，如 [html] [/html] 和 [css] [/css]。
CSS短程式碼
請記住，當使用文字編輯器（在WordPress經典版中）或使用WordPress古騰堡區塊編輯器時，自定義短程式碼最適合語法高亮顯示。
Info：Gutenberg的短程式碼區塊是一個選項，但在我們的測試中，一些程式碼片段丟失了關鍵的格式元素或字元。
文字編輯器
目標是建立一個自定義的短程式碼，您可以在快捷程式碼的開始和結束標記之間鍵入或貼上程式碼。
貼上在HTML短碼中的程式碼
釋出後，您的自定義短程式碼樣式和突出顯示設定將顯示在前端。您新增的程式碼在語法高亮顯示中顯示得很好。
前端顯示
方法5：使用 <code> 和 <pre> 標籤
也許在WordPress上顯示程式碼最古老但仍然非常可靠的方法是在程式碼片段周圍新增特定的HTML標記。這種方法最適合使用經典的WordPress編輯器或任何HTML編輯器。
有兩種選擇：
<code>標籤: 最適合顯示一小段程式碼；經常在段落中使用<pre>標籤: 非常適合較長的程式碼塊，或者當您想要更多的格式選項時
選項1：將 <code> 標記用於內聯程式碼段
寫編碼的內容創作者並不總是想使用大的程式碼塊。有時，在段落中快速包含一些程式碼會更有意義。
但是，您仍然需要突出顯示並保留該程式碼的格式。有些程式碼如果儲存不好，可能會導致周圍內容出現問題。
一個br標記
以 <br> 標記為例，如果沒有 <code> 標記，它只會在段落中新增一個換行符。
不必要的換行
將編碼放在這些標籤中可以得到更乾淨的結果：
<code> </code>要做到這一點，請開啟一篇WordPress文章，然後開啟程式碼編輯器（用於古騰堡區塊編輯器）或文字編輯器（當使用WordPress經典時）。
將這些標籤貼上或鍵入編輯器中的某個位置；現在還不要插入要顯示的程式碼。相反，在標記之間新增一個空格。
<code> </code>
程式碼標記之間的間距
切換到視覺編輯器（無論您是在古騰堡還是經典WordPress）。
您將在視覺內容中看到一個小的灰色區域。單擊以將游標放置在灰色區域中。這是您可以貼上或鍵入程式碼以進行顯示的地方。
寫入程式碼的灰色區域
當您鍵入時，灰色空間會擴充套件以容納程式碼片段。單擊該文章的“釋出”或“更新”按鈕。
在灰色區域內中鍵入程式碼
在文章的前端，您現在可以看到程式碼保持原樣，沒有任何奇怪的活動（比如在內容中新增br）。
顯示的br標記沒有實際新增換行
這些 <code> 標籤的格式通常很簡單，但通常取決於您的主題樣式。例如，我們的示例只更改字型，但不包括灰色背景。
選項2：將 <pre> 標記用於較長的程式碼塊
更長的程式碼片段應該有自己的塊，與你寫進段落的內容分開。對於這些，我們建議使用 <pre> 標籤。
新增 <pre> 標記的過程與 <code> 標記一樣，但在插入程式碼時，您有更多的空間可以使用。
轉到一篇文章，開啟程式碼（古騰堡）或文字（經典WordPress）編輯器。貼上或鍵入要顯示的程式碼。然後，用以下標籤包圍程式碼：
<pre> </pre>
Pre標籤
切換到Visual編輯器以檢視它的外觀。您會注意到，文字部分將有一個“預格式化”標籤，這正是 <pre> 標籤的作用。
選擇預格式化選項
單擊“釋出”或“更新”，然後切換到前端以檢視原始形式的程式碼。與 <code> 標記類似，<pre> 標記的格式很糟糕，因此您只能看到最簡單的外觀。然而，有一些方法可以讓你自己將這些風格化。
＜pre＞標籤設計技巧
<pre> 標籤不如 <code> 標籤穩定，因此您可能會遇到困難，這取決於您試圖顯示的程式碼型別。
使用這些提示來改善它的外觀：
- 儘量刪除或完全避免換行符，因為
<pre>標記通常無法識別這些換行符。總的來說，它對過多的斷線反應不佳。 - 考慮新增
overflow-x:auto;屬性，為<pre>標記程式碼新增滾動功能。這有助於處理溢位的內容，因為<pre>標記本身就允許您的程式碼在頁面外執行。 - 堅持使用單格字型。
您也可以設定文字格式和程式碼後面的框的樣式。這裡有一個啟動模板，你可以將其新增到你的CSS檔案中：
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}
方法6：使用連線到WordPress的Markdown編輯器
Markdown編輯器不僅提供了更快的打字和格式化的能力，而且它們中的許多直接連線到WordPress，以便從編輯器中即時釋出。
由於這種快速的內容建立過程，許多作家轉向了markdown編輯器。幸運的是，其中一些編輯器為程式碼塊提供了markdown，這意味著你可以在markdown編輯器中顯示程式碼，然後將其直接傳送到WordPress進行釋出。
請記住，普通的文字編輯器（如Sublime Text）在傳輸到WordPress上進行釋出時，並不能保持程式碼的完整性。而HTML編輯器，雖然在編寫和儲存程式碼方面很出色，但也不會提供為WordPress釋出保留程式碼所需的高亮功能。
有大量的markdown編輯器可供選擇，但理想的解決方案有兩個特點：
- 直接輸出到WordPress
- 用於程式碼高亮的markdown
然而，如果你不喜歡直接匯出WordPress，你可以選擇一個帶有HTML匯出的markdown編輯器。
具有這兩個功能的最好的markdown編輯器是：
Ulysses和ByWord是高階應用，而Obsidian有免費和高階版本。
在下面的教程中，我們將使用Ulysses。
第1步：在Ulysses中新增一個長格式程式碼塊
在Ulysses中起草文件時，只要你想在文件中立即新增一個程式碼高亮塊，就輸入 " markdown –也就是兩個撇號。
這種markdown方法是針對較長的程式碼塊的。它不能在段落的中間使用，所以你必須建立一個新的行，以便啟用標記。
Ulysses程式碼標記
一旦程式碼高亮顯示，你可以在其中輸入或貼上任何你想要的東西。
將程式碼貼上到Ulysses高亮顯示區
另一種開啟程式碼塊的方法是點選Markdown（三個橫點）選單項，然後選擇Code選項。
使用Markdown選單選擇 “Code” 專案
點選該選單項後，在游標最後停留的地方出現程式碼高亮欄位。
空的程式碼高亮器
要在段落中放置程式碼片段，你會轉向 `` markdown標記（看起來幾乎一樣，但它實際上是兩個急性/嚴重的重音而不是撇號）。
第2步：匯出到WordPress
一旦你準備好了你的檔案，就該把所有的東西都匯出到WordPress。
與WordPress連線的markdown編輯器的奇妙之處在於，它們在整個傳輸過程中保持著程式碼區塊。所以，你會看到格式很好的程式碼高亮顯示，準備在WordPress中釋出。
程式碼高亮器在WordPress中保持不變
在Ulysses中，到文件的頂部找到工具欄。點選 “Publishing Preview” 按鈕。
選擇 “釋出預覽” 按鈕
這就會出現一個下拉選單，選擇一個平臺和網站來發布。你也可以使用該選單中的管理賬戶（Manage Accounts）選項，在匯出之前登入到一個WordPress網站。
一旦你有了合適的網站，點選釋出按鈕。
選擇一個賬戶併發布
填寫文章的標題、時間表和你想要的任何其他資訊，如類別、標籤和特色圖片。
然而，最重要的部分是將狀態設定為草稿，以便在沒有先在WordPress上審查的情況下，不釋出該文章。
點選 “OK” 繼續。
選擇一個狀態，然後點選確定
在幾秒鐘內，Ulysses將整個文件放入一個新的WordPress文章中（當它彈出時，你可能需要登入到你的WordPress管理後臺）。
你會看到程式碼塊已經配置好並準備好釋出。點選 “釋出” 按鈕，使其生效。
WordPress編輯器中的程式碼區塊
在前端，你會看到內聯的程式碼片段和較大的程式碼區塊被很好地突出顯示，而且程式碼的格式也被保留了。
前端輸出結果
小結
有幾種方法可以在WordPress上正確地顯示程式碼，這通常取決於所使用的WordPress編輯器，你想顯示的程式碼語言，以及你想如何顯示和格式化這些程式碼。例如，選擇一個外掛肯定會比WordPress Gutenberg編輯器中的標準程式碼塊提供一個更有創意的格式化體驗。
在這篇文章中，我們涵蓋了許多不同的方法，說明如何在WordPress中顯示程式碼。
我們通常建議從方法1開始，並通過你的方式。如果你想尋找更多的樣式選擇，方法2可以很好地為你服務，而方法3-5只在特殊情況下有用。方法6是一個額外的解決方案，是為那些喜歡markdown編輯器而不是直接寫進WordPress的人準備的。
評論留言
脣槍舌劍 (1)
明月登楼
2023.5.23 13:05
好久没来了，才发现，竟然注册过账号了！