如何在WordPress註釋中添加語法突出顯示


您是否要在WordPress註釋中添加語法突出顯示? 默認情況下,WordPress的註釋,帖子或頁面沒有語法高亮顯示。

如果您的網站上有關於編碼或編程的文章,那麼有時您的用戶可能希望在註釋中留下代碼示例。

在本文中,我們將向您展示如何輕鬆地在WordPress註釋中添加語法突出顯示。

在WordPress註釋中添加語法突出顯示

為什麼以及何時需要在WordPress註釋中突出顯示語法

出於安全原因,WordPress不允許您僅在文章中粘貼代碼段。

您可以通過使用塊編輯器在您的帖子或頁面中添加代碼塊來顯示一些代碼示例。

添加代碼塊

之後,您可以在代碼塊的文本區域內添加代碼段。

在WordPress代碼塊中添加代碼

現在,您可以將更改保存到您的帖子或頁面上,並進行預覽以查看實際的代碼。

根據您的WordPress主題,它通常會以非常簡單的文本形式顯示,並且不會突出顯示任何語法。

一個簡單的默認代碼塊

這看起來不太好,並且對您的用戶不是很有幫助。

語法高亮是一種通常用於顯示代碼的樣式格式。 它添加了行號和顏色以突出顯示代碼模式,從而使其易於理解。

這是帶有一些語法高亮顯示的代碼片段的示例。 請注意用於突出顯示代碼中不同元素的行號和顏色:


	
		My Awesome Website
	
	
		

Welcome to My Homepage

現在,如果您運行有關編碼或編程的WordPress博客,則需要突出顯示語法以正確顯示文章中的代碼。

您可能還希望您的用戶能夠在註釋中使用相同的語法突出顯示,這將使註釋更加有趣並吸引用戶。

話雖這麼說,讓我們看一下如何在WordPress註釋,帖子和頁面中添加語法突出顯示。

在WordPress中添加語法突出顯示

在WordPress中添加語法突出顯示的最簡單方法是使用“語法突出顯示工具”。 它非常易於使用,並允許您在WordPress帖子,頁面和評論中啟用語法突出顯示。

首先,您需要安裝並激活Syntax Highlighter Evolved插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要編輯要在其中添加代碼的帖子或頁面。 在帖子編輯屏幕上,單擊(+)圖標以添加新塊,然後將“ SyntaxHighlighter Code”塊插入您的內容區域。

在WordPress中添加語法突出顯示代碼塊

現在,您將在帖子編輯器中看到一個新的代碼塊,您可以在其中輸入代碼。 添加代碼後,您需要從右列中選擇塊設置。

語法突出顯示塊設置

在這裡,您可以選擇代碼的編程語言,顯示或隱藏行號,使鏈接可單擊等。

完成後,繼續並保存您的帖子或頁面。 現在,您可以訪問您的網站,以突出顯示語法的代碼。

帖子中啟用了語法突出顯示

那很容易,不是嗎?

但是,WordPress註釋不支持塊編輯器。 讓我們看看您的用戶如何將Syntax Highlighter Evolved與他們的註釋一起使用。

在WordPress註釋中添加語法突出顯示

默認情況下,已為WordPress註釋啟用語法標註突出顯示。 但是,為了在註釋中使用它,需要將代碼包裝在短代碼周圍。

該插件帶有一些以所有流行的編程和腳本語言命名的短代碼。

只需使用語言名稱將代碼包裝在方括號中即可。 例如,如果要添加PHP代碼,則將如下添加:

[php]
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

同樣,如果您想添加HTML代碼,則可以將其包裝在HTML短代碼周圍,如下所示:

[html]
Demo website

[/html]

在註釋表單中添加語法突出顯示通知

雖然可以很容易地在短代碼中使用語法突出顯示,但是問題是您的用戶不知道他們可以做到這一點。

幸運的是,有一種快速的方法可以讓他們知道他們可以對短代碼使用語法高亮顯示。

為此,您需要向WordPress網站添加自定義代碼段。 如果您之前沒有做過,請查看我們的指南,了解如何在WordPress中添加自定義代碼。

您將需要在代碼片段插件,functions.php文件或特定於站點的插件中添加以下代碼。

function wpbeginner_comment_text_before($arg) {

$arg['comment_notes_before'] .= "

You can use shortcodes for syntax highlighting when adding code. For example, [php][/php] or [html][/html]

"; return $arg; } add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

此代碼僅在WordPress註釋表單中的註釋字段之前顯示一個通知。 但是,它不會顯示已登錄用戶的通知。

現在,您可以在隱身模式下打開一個新的瀏覽器窗口,或者直接註銷WordPress管理區域。 之後,您可以訪問博客上的任何帖子,以查看語法高亮顯示中的注意事項。

在註釋字段之前添加語法熒光筆通知

您還可以添加自定義CSS來設置此文本的樣式。 我們已在演示站點上使用了以下自定義CSS代碼,請隨時將其用作起點。

p.comment-notice {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

我們希望本文能幫助您在WordPress註釋中添加語法突出顯示。 您可能還希望查看我們的指南,以了解如何允許用戶以WordPress註釋上傳圖像,以及一些方便的技巧來設置WordPress註釋表單的樣式。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。