Möchten Sie in WordPress-Kommentaren Syntaxhervorhebungen hinzufügen? Standardmäßig enthält WordPress keine Syntaxhervorhebung für Kommentare, Beiträge oder Seiten.
Wenn Sie auf Ihrer Website Artikel über Codierung oder Programmierung haben, möchten Ihre Benutzer manchmal Codebeispiele in Kommentaren hinterlassen.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Syntaxhervorhebungen in WordPress-Kommentaren hinzufügen.
Warum und wann Sie Syntax-Highlighting in WordPress-Kommentaren benötigen
WordPress erlaubt es Ihnen aus Sicherheitsgründen nicht, Code-Snippets einfach in Ihre Artikel einzufügen.
Sie können einige Codebeispiele anzeigen, indem Sie den Codeblock mit dem Blockeditor zu Ihrem Beitrag oder Ihren Seiten hinzufügen.
Danach können Sie Ihr Code-Snippet in den Textbereich des Codeblocks einfügen.
Sie können jetzt Änderungen an Ihrem Beitrag oder Ihrer Seite speichern und eine Vorschau anzeigen, um Ihren Code in Aktion zu sehen.
Abhängig von Ihrem WordPress-Theme wird es normalerweise in einem sehr einfachen Textblock und ohne Syntaxhervorhebung angezeigt.
Das sieht nicht gut aus und ist für Ihre Benutzer nicht sehr hilfreich.
Syntaxhervorhebung ist ein Formatierungsformat, das häufig zum Anzeigen von Code verwendet wird. Es fügt Zeilennummern und Farben hinzu, um Codemuster hervorzuheben, was es leicht verständlich macht.
Hier ist ein Beispiel für ein Code-Snippet mit einigen Syntaxhervorhebungen. Beachten Sie die Zeilennummern und Farben, die verwendet werden, um verschiedene Elemente im Code hervorzuheben:
<html> <head> <title>My Awesome Website</title> </head> <body> <h1>Welcome to My Homepage</h1> </body> </html>
Wenn Sie nun einen WordPress-Blog über Codierung oder Programmierung betreiben, benötigen Sie Syntax-Highlighting, um den Code in Ihren Artikeln richtig anzuzeigen.
Möglicherweise möchten Sie auch, dass Ihre Benutzer die gleiche Syntaxhervorhebung in Kommentaren verwenden können, wodurch Kommentare für Benutzer interessanter und ansprechender werden.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie in WordPress-Kommentaren, -Beiträgen und -Seiten Syntaxhervorhebungen hinzufügen.
Syntax-Highlighter in WordPress hinzufügen
Der einfachste Weg, um Syntax-Highlighting in WordPress hinzuzufügen, ist die Verwendung der Syntax Highlighter entwickelt. Es ist super einfach zu bedienen und ermöglicht es Ihnen, die Syntaxhervorhebung in WordPress-Posts, -Seiten und -Kommentaren zu aktivieren.
Zuerst müssen Sie die installieren und aktivieren Syntax Highlighter entwickelt Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie den Beitrag oder die Seite bearbeiten, auf der Sie Code hinzufügen möchten. Klicken Sie im Nachbearbeitungsbildschirm auf das Symbol (+), um einen neuen Block hinzuzufügen, und fügen Sie dann den Block „SyntaxHighlighter Code“ in Ihren Inhaltsbereich ein.
Sie sehen nun im Post-Editor einen neuen Codeblock, in den Sie Ihren Code eingeben können. Nachdem Sie den Code hinzugefügt haben, müssen Sie die Blockeinstellungen aus der rechten Spalte auswählen.
Von hier aus können Sie die Programmiersprache für Ihren Code auswählen, Zeilennummern ein- oder ausblenden, Links anklickbar machen und vieles mehr.
Wenn Sie fertig sind, fahren Sie fort und speichern Sie Ihren Beitrag oder Ihre Seite. Sie können jetzt Ihre Website besuchen, um Ihren Code mit Syntaxhervorhebung anzuzeigen.
Das war einfach, nicht wahr?
WordPress-Kommentare bieten jedoch keine Unterstützung für Blockeditoren. Sehen wir uns an, wie Ihre Benutzer Syntax Highlighter Evolved mit ihren Kommentaren verwenden können.
Hinzufügen von Syntax-Highlighting in WordPress-Kommentaren
Syntax Highlighter Evolved ist standardmäßig für WordPress-Kommentare aktiviert. Um es jedoch in den Kommentaren verwenden zu können, muss der Code um Shortcodes gewickelt werden.
Das Plugin enthält mehrere Shortcodes, die nach allen gängigen Programmier- und Skriptsprachen benannt sind.
Umschließen Sie Ihren Code einfach mit dem Sprachnamen in eckige Klammern. Wenn Sie beispielsweise PHP-Code hinzufügen möchten, fügen Sie ihn wie folgt hinzu:
[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]
Wenn Sie einen HTML-Code hinzufügen möchten, wickeln Sie ihn ähnlich wie folgt um den HTML-Shortcode:
[html]
<a href="https://example.com">Demo website</a>
[/html]
Hinweis zur Syntaxhervorhebung im Kommentarformular hinzufügen
Obwohl es einfach ist, Syntax-Highlighting mit Shortcodes zu verwenden, besteht das Problem darin, dass Ihre Benutzer nicht wissen, dass sie dies tun können.
Glücklicherweise gibt es eine schnelle Möglichkeit, ihnen mitzuteilen, dass sie Syntax-Highlighting mit Shortcodes verwenden können.
Dazu müssen Sie Ihrer WordPress-Site ein benutzerdefiniertes Code-Snippet hinzufügen. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick auf unsere Anleitung zum Hinzufügen von benutzerdefiniertem Code in WordPress.
Sie müssen den folgenden Code im Code-Snippets-Plugin, in der Datei functions.php oder in einem Site-spezifischen Plugin hinzufügen.
function wpbeginner_comment_text_before($arg) { $arg['comment_notes_before'] .= "<p class="comment-notice">You can use shortcodes for syntax highlighting when adding code. For example, [php][/php] or [html][/html]</p>"; return $arg; } add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Dieser Code zeigt einfach einen Hinweis direkt vor dem Kommentarfeld im WordPress-Kommentarformular an. Der Hinweis für angemeldete Benutzer wird jedoch nicht angezeigt.
Sie können nun im Inkognito-Modus ein neues Browserfenster öffnen oder sich einfach aus Ihrem WordPress-Adminbereich ausloggen. Danach können Sie jeden Post in Ihrem Blog besuchen, um die Syntax-Highlighting-Hinweise in Aktion zu sehen.
Sie können auch benutzerdefiniertes CSS hinzufügen, um diesen Text zu formatieren. Wir haben den folgenden benutzerdefinierten CSS-Code auf unserer Demo-Site verwendet. Sie können diesen gerne als Ausgangspunkt verwenden.
p.comment-notice { font-size: 14px; color: #555; line-height: 1.5; }
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Syntaxhervorhebungen in WordPress-Kommentaren hinzuzufügen. Vielleicht möchten Sie auch unseren Leitfaden zum Hochladen von Bildern in WordPress-Kommentaren und einige praktische Tipps zum Gestalten von WordPress-Kommentarformularen lesen.