如何在您的 WordPress 網站上顯示突出顯示的代碼片段

幾乎每個技術博主、內容創建者或開發人員有時都需要在他們的博客上顯示突出顯示的代碼片段。 這本身就令人頭疼。 但是，突出顯示該片段中的一行或多行也是必要的，不幸的是，該功能不是大多數代碼嵌入的一部分。 幸運的是，存在 SyntaxHighlighter Evolved 插件。 我們將向您展示如何使用它來保持代碼盡可能乾淨和可讀。

訂閱我們的 YouTube 頻道

SyntaxHighlighter 進化

安裝和激活插件很簡單。 您可以在 WP.org 插件存儲庫中找到它，但請確保由Alex Mills (Viper007Bond) 完成。 有很多具有相似名稱和功能的插件，但我們知道這個插件是可靠的並且是最新的。 另外，這個帶有一個專門用於古騰堡編輯器的塊。 更不用說可以讓您自定義體驗的許多參數，這些參數使其成為此類任務的選擇。

在 WordPress 儀表板的設置菜單下，您會發現一個標有SyntaxHighlighter的新項目。 繼續並單擊它。 在那裡，您可以調整將代碼片段嵌入 WordPress 網站所需的每一件小事。

語法高亮設置

插件的設置頁面相對簡單。 我們喜歡這個插件的一個特殊元素是，您可以獲得大量關於代碼如何在您的網站上顯示的自定義。 您可以向嵌入中添加 CSS 類、調整行號填充、選擇顏色主題、使用智能選項卡和自動換行，以及決定如何在站點範圍內加載單個編碼語言突出顯示。

我們確實想列出我們認為大多數人應該知道的三個特定設置。

插件版本、行號和標籤大小

首先是您加載的插件版本。 雖然插件本身在 repo 上不斷更新，但根據您希望如何最好地顯示代碼，您可以在插件的 2.x 和 3.x 版本之間進行選擇。 兩者都是安全的，但是，它們每個都提供另一個沒有的特定功能（至少在撰寫本文時）。

如果用戶複製您的代碼是最重要的，那麼 3.x 版就可以了。 但是，如果您的更多是用於顯示而不是實際實用程序，那麼 2.x 版的自動換行可能更適合您，因為它避免了在大段代碼上使用滾動條的需要。

然後您可以決定是否顯示行號。 對於大量代碼和教程，行號是無價的。 但是，當您有簡短的代碼片段時，就沒有必要將它們連續標記為第 1 行和第 2 行。刪除它們可以使代碼的外觀變得更加整潔。

然後是一直有爭議的tab size 。 該選項默認為 4，但您可以將其更改為您想要的任何數字。 包括正確的值 2。（是的，我們意識到沒有正確的值。我們只是喜歡 2 個空格作為製表符。）

您的代碼和簡碼

如果滾動到“設置”頁面的底部，您將看到一個大的代碼預覽，以及大量的短代碼參數。 您將花費大量時間瀏覽它們，只是為了看看所有插件可以做什麼來突出顯示您的代碼片段。 此外，您在上面對代碼在上述設置中的顯示方式所做的任何更改都將反映在此處。 因此，請務必在更改任何選項後點擊保存。

雖然有些人不是短代碼的最大粉絲，因為它們可以將您與某些插件聯繫起來，但我們認為這些非常值得使用，因為它們很聰明而且很容易記住。 如果不出意外，您需要記住兩件事，然後插件將為您發揮最佳性能。

• 或者

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  ，它已格式化並突出顯示。

  使用簡碼

  任何可以渲染短代碼的地方，都可以使用這些。 在 Divi 或經典編輯器中，您可以使用文本模塊或 TinyMCE 編輯器，只需將代碼粘貼到短代碼之間即可。 由於 Visual 選項卡的工作方式，我們建議您使用文本選項卡來維護特殊字符格式。

  

  如果您是 Gutenberg/Block Editor 用戶，事情也同樣簡單。 您也可以為此使用文本塊。 比這更簡單的是自定義 HTML 塊。 就像上面一樣，將代碼粘貼到短代碼標籤中。

  

  然而，比這更好的是 SyntaxHighlighter Evolved 塊本身。 插件安裝中包含它自己的 Gutenberg Block，因此如果您不是短代碼人並且不想擺弄參數，則不必。 只需找到格式下的塊並將其插入到您的帖子或頁面中。

  

  無論您如何插入代碼，您都會在 WordPress 網站的前端看到相同的渲染。

  

  整理起來

  您可能需要向觀眾展示代碼片段的原因有很多。 也許您編寫了教程，或者您發布了常見問題的修復程序，供公眾根據需要獲取和使用。 但有時 GitHub 嵌入並不能為您的用戶提供您想要的確切體驗。 那時你需要像 SyntaxHighlighter Evolved 這樣的插件。 只需點擊幾下，稍加定制，加上古騰堡塊或短代碼，您的觀眾就會毫無問題地瀏覽您的代碼。

  您可以在您的網站上找到什麼用途來突出顯示這樣的代碼？

  Adil Bouyghajden/shutterstock.com 提供的文章特色圖片