{"id":61773,"date":"2023-05-17T14:21:48","date_gmt":"2023-05-17T13:21:48","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=61773&#038;preview=true&#038;preview_id=61773"},"modified":"2023-08-23T12:23:20","modified_gmt":"2023-08-23T11:23:20","slug":"wordpress-code-anzeigen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/","title":{"rendered":"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst)"},"content":{"rendered":"<p>Zu lernen, wie man Code in WordPress anzeigt, ist f\u00fcr Blogger\/innen und Inhaltsersteller\/innen, die st\u00e4ndig Code f\u00fcr ihre Leser\/innen online ver\u00f6ffentlichen, sehr wichtig. <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/\">Computercode<\/a> ist so konzipiert, dass er im Frontend einer Website etwas anderes darstellt als die Tags, Schr\u00e4gstriche und Klammern, die du in den eigentlichen Codeschnipseln findest.<\/p>\n<p>Das stellt jedoch ein Problem f\u00fcr diejenigen dar, die \u00fcber Entwicklung und Design schreiben, denn du brauchst eine M\u00f6glichkeit, den Code richtig darzustellen, ohne dass er seine eigentliche Aufgabe erf\u00fcllt, wie z. B. das Erstellen einer Schaltfl\u00e4che oder das Hinzuf\u00fcgen von Styling zu einem Absatzblock.<\/p>\n<p>Einfach ausgedr\u00fcckt: Wenn du einen Blogbeitrag schreibst und ein Beispiel f\u00fcr einen Codeschnipsel einf\u00fcgst, solltest du verhindern, dass der Code tats\u00e4chlich funktioniert! Auf diese Weise k\u00f6nnen die Leserinnen und Leser den Code in seiner Rohform sehen, den Code in einem sch\u00f6n formatierten Block betrachten und sogar seinen Inhalt kopieren, um ihn f\u00fcr ihre Entwicklungsarbeit zu verwenden.<\/p>\n<p>In diesem Leitfaden zeigen wir dir genau, wie du Code in WordPress (unabh\u00e4ngig von deinem <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">WordPress-Theme<\/a>) mit verschiedenen Methoden anzeigen kannst, und wir helfen dir zu entscheiden, welche Methode f\u00fcr deinen Arbeitsablauf am besten geeignet ist.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Was passiert, wenn du regul\u00e4ren Code in WordPress einf\u00fcgst?<\/h2>\n<p>Du fragst dich vielleicht, was passiert, wenn du einen Code in den visuellen Editor von WordPress schreibst. Schlie\u00dflich hast du weder mit dem Text- noch mit dem Code-Editor zu tun, sollte dein Codeschnipsel also nicht einfach funktionieren?<\/p>\n<p>Wahrscheinlich nicht.<\/p>\n\n<p>Hier sind einige der ungew\u00f6hnlichen Ergebnisse, die auftreten k\u00f6nnen:<\/p>\n<ul>\n<li>Der Code wird teilweise angezeigt, wobei Teile des Codes im Frontend des Beitrags zu sehen sind und andere verschwinden. Das sieht f\u00fcr die Besucher unprofessionell aus; es bedeutet, dass dein Code nicht korrekt ist.<\/li>\n<li>Es wird \u00fcberhaupt nichts angezeigt, d. h. der Code verschwindet im Backend und wird im Frontend deines Beitrags nicht angezeigt.<\/li>\n<li>Du siehst eine seltsame Formatierung &#8211; oft etwas, das nicht benutzerfreundlich ist oder nicht ver\u00f6ffentlicht werden kann.<\/li>\n<li>Der Code wird vielleicht nur teilweise angezeigt.<\/li>\n<\/ul>\n<p>Um einige dieser Ergebnisse zu veranschaulichen, verwenden wir das folgende <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML-Codefragment<\/a>:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.cities {\nbackground-color: green;\ncolor: white;\nborder: 4px solid black;\nmargin: 10px;\npadding: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Chicago&lt;\/h2&gt;\n&lt;p&gt;A nickname for Chicago is The City of Broad Shoulders.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Los Angeles&lt;\/h2&gt;\n&lt;p&gt;A nickname for Los Angeles is The City of Angels.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;New York&lt;\/h2&gt;\n&lt;p&gt;A nickname for New York is The Big Apple.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Dieser Code-Schnipsel <a href=\"https:\/\/kinsta.com\/de\/blog\/bewaehrte-html-praktiken\/\">verwendet HTML-Stilelemente<\/a>, um drei gr\u00fcne Inhaltsbl\u00f6cke mit \u00dcberschriften und Abs\u00e4tzen zu erzeugen.<\/p>\n<figure id=\"attachment_151531\" aria-describedby=\"caption-attachment-151531\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Klicke um Code zu schreiben und den WordPress Code anzuzeigen\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Zum Schreiben des Codes klicken<\/figcaption><\/figure>\n<p>Wir m\u00f6chten den <em>rohen<\/em> Code jedoch in einem Blogpost anzeigen und ihn nicht in diese Bl\u00f6cke einbauen lassen.<\/p>\n<p>Hier sind die Ergebnisse, wenn wir den Code direkt in den WordPress <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg Block Editor<\/a> einf\u00fcgen:<\/p>\n<figure id=\"attachment_151527\" aria-describedby=\"caption-attachment-151527\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151527 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gutenberg-Editor-results-from-HTML-code.jpg\" alt=\"Gutenberg-Editor Ergebnisse aus HTML-Code\" width=\"928\" height=\"752\"><figcaption id=\"caption-attachment-151527\" class=\"wp-caption-text\">Gutenberg-Editor Ergebnisse aus HTML-Code<\/figcaption><\/figure>\n<p>Wie du siehst, versucht WordPress, den Code f\u00fcr seinen Hauptzweck zu nutzen: Inhalte zu generieren &#8211; aber es entfernt das Styling des Codes, sodass er nicht das Ergebnis liefert, das wir den Lesern zeigen wollten.<\/p>\n<p>Um solche Situationen zu vermeiden, empfehlen wir dir, stattdessen eine der unten aufgef\u00fchrten Methoden zur Anzeige von Code zu verwenden.<\/p>\n<h2>Wie du Code auf deiner WordPress-Seite anzeigst (6 Methoden)<\/h2>\n<p>Diese Methoden sind in der Reihenfolge vom einfachsten bis zum schwierigsten aufgef\u00fchrt. Au\u00dferdem haben wir einige spezielle Methoden f\u00fcr diejenigen, die gerne Code und Inhalte in Markdown-Editoren schreiben (im Gegensatz zu WordPress).<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Methode 1: Verwendung des Gutenberg-Blockeditors (Standard)<\/h3>\n<p>Um die Anzeige von Code in WordPress zu \u00fcben, kannst du den folgenden Codeschnipsel verwenden, der <a href=\"https:\/\/kinsta.com\/de\/blog\/html-lernen\/\">HTML<\/a> und internes CSS verwendet, um ein einfaches Ergebnis mit einer blauen \u00dcberschrift und einem schwarzen Absatz zu erzeugen:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody {background-color: beige;}\nh1 {color: blue;}\np {color: black;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Fun Facts About Otters&lt;\/h1&gt;\n&lt;p&gt;A group of otters in water is called a \"raft,\" since they all link arms to prevent from floating away.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Wenn du den Code in die Tat umsetzt, wird er im Frontend so angezeigt:<\/p>\n<figure id=\"attachment_151528\" aria-describedby=\"caption-attachment-151528\" style=\"width: 979px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151528 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/html-code-rendering-fun-facts-about-otters.jpg\" alt=\"HTML-Code mit lustigen Fakten \u00fcber Otter\" width=\"979\" height=\"359\"><figcaption id=\"caption-attachment-151528\" class=\"wp-caption-text\">Das Ergebnis zeigt einen Titel und einen Text mit Styling<\/figcaption><\/figure>\n<p>In dieser Anleitung erf\u00e4hrst du, wie du den Code selbst anzeigst und nicht das, was der Code im Frontend zeigen soll.<\/p>\n<h4>Schritt 1: Hinzuf\u00fcgen eines Code-Blocks in WordPress<\/h4>\n<p>Der Gutenberg-Editor von WordPress verf\u00fcgt bereits \u00fcber einen eingebauten Code-Block, mit dem du Codeschnipsel anzeigen kannst, ohne dass die Formatierung verloren geht oder der Code tats\u00e4chlich aktiviert wird.<\/p>\n<p>\u00d6ffne dazu einen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-post-id-erhalten\/\">Beitrag oder eine Seite<\/a> in WordPress und klicke auf eine der Schaltfl\u00e4chen <strong>Block hinzuf\u00fcgen<\/strong>.<\/p>\n<figure id=\"attachment_151529\" aria-describedby=\"caption-attachment-151529\" style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151529 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/add-block-buttons.jpg\" alt=\"Schaltfl\u00e4chen Block hinzuf\u00fcgen\" width=\"941\" height=\"486\"><figcaption id=\"caption-attachment-151529\" class=\"wp-caption-text\">Schaltfl\u00e4chen Block hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>Klicke auf eine der Schaltfl\u00e4chen zum Hinzuf\u00fcgen von Bl\u00f6cken<\/p>\n<p>Dadurch wird die Sammlung der verf\u00fcgbaren Bl\u00f6cke angezeigt. Du kannst nach dem Code-Block suchen oder ein Stichwort wie &#8222;Code&#8220; in die Suchleiste eingeben.<\/p>\n<p>Wenn du den <strong>Code-Block<\/strong> siehst (mit den Klammer-Symbolen), klickst du darauf, um einen Teil des Codes in den Beitrag einzuf\u00fcgen.<\/p>\n<figure id=\"attachment_151530\" aria-describedby=\"caption-attachment-151530\" style=\"width: 939px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151530 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/popup-window-to-add-a-block-with-Code-block-option.jpg\" alt=\"Popup-Fenster zum Hinzuf\u00fcgen eines Blocks, mit der Option Code-Block\" width=\"939\" height=\"411\"><figcaption id=\"caption-attachment-151530\" class=\"wp-caption-text\">Popup-Fenster zum Hinzuf\u00fcgen eines Blocks, mit der Option Code-Block<\/figcaption><\/figure>\n<p>Du solltest jetzt ein Feld mit der Aufforderung <strong>&#8222;Code schreiben&#8230;&#8220;<\/strong> sehen.<\/p>\n<figure id=\"attachment_151531\" aria-describedby=\"caption-attachment-151531\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Zum Schreiben von Code klicken\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Zum Schreiben von Code klicken<\/figcaption><\/figure>\n<p>Der WordPress Gutenberg-Editor unterst\u00fctzt Markdown. Du kannst den Code-Block auch finden und einf\u00fcgen, indem du einen Schr\u00e4gstrich (<code>\/<\/code>) in den Editor eingibst und dann &#8222;C&#8220; oder &#8222;Code&#8220; schreibst. WordPress zeigt dann alle relevanten Bl\u00f6cke an, damit du sie schneller einf\u00fcgen kannst.<\/p>\n<p>Es ist leicht, den Code-Block und den Custom HTML-Block zu verwechseln. Der Custom-HTML-Block ist jedoch f\u00fcr das Hinzuf\u00fcgen von benutzerdefiniertem HTML zur Darstellung im Frontend gedacht, nicht f\u00fcr das Hinzuf\u00fcgen von Rohcode zur Anzeige.<\/p>\n<figure id=\"attachment_151532\" aria-describedby=\"caption-attachment-151532\" style=\"width: 933px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151532 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/using-markdown-to-call-the-Code-block.jpg\" alt=\"Mit Markdown den Code-Block aufrufen\" width=\"933\" height=\"380\"><figcaption id=\"caption-attachment-151532\" class=\"wp-caption-text\">Mit Markdown den Code-Block aufrufen<\/figcaption><\/figure>\n<h4>Schritt 2: Einf\u00fcgen des Anzeigecodes in das Feld des Codeblocks<\/h4>\n<p>Kopiere den Code, den du anzeigen m\u00f6chtest, und f\u00fcge ihn in das Feld <strong>&#8222;Code schreiben&#8230;&#8220; <\/strong>ein.<\/p>\n<figure id=\"attachment_151533\" aria-describedby=\"caption-attachment-151533\" style=\"width: 936px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151533 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Write-or-Paste-in-Code-to-Display.jpg\" alt=\"Code zur Anzeige schreiben oder einf\u00fcgen\" width=\"936\" height=\"405\"><figcaption id=\"caption-attachment-151533\" class=\"wp-caption-text\">Um ihn anzuzeigen Code schreiben oder einf\u00fcgen<\/figcaption><\/figure>\n<p>Dein Code erscheint jetzt in dem Feld.<\/p>\n<p>Das Tolle am Code-Block ist, dass er alle Leerzeichen und Tabulatoren beibeh\u00e4lt, die du bereits im Code-Snippet hattest. Daher sollte er nicht anders aussehen als der Quelltext, aus dem du ihn kopiert hast.<\/p>\n<figure id=\"attachment_151534\" aria-describedby=\"caption-attachment-151534\" style=\"width: 919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151534 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Pasted-Snippet-in-the-Code-Block.jpg\" alt=\"Eingef\u00fcgtes Snippet im Code-Block, um WordPress-Code anzuzeigen\" width=\"919\" height=\"840\"><figcaption id=\"caption-attachment-151534\" class=\"wp-caption-text\">Eingef\u00fcgtes Snippet im Code-Block<\/figcaption><\/figure>\n<h4>Schritt 3: Ver\u00f6ffentlichen und Ergebnisse ansehen<\/h4>\n<p>Um deinen Code in deinem WordPress-Beitrag oder auf deiner Seite anzuzeigen, klickst du abschlie\u00dfend auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>.<\/p>\n<p>Du kannst dir auch einen Eindruck davon verschaffen, wie es vor der Ver\u00f6ffentlichung aussieht, indem du auf <strong>Vorschau<\/strong> klickst.<\/p>\n<figure id=\"attachment_151535\" aria-describedby=\"caption-attachment-151535\" style=\"width: 929px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151535 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish.jpg\" alt=\"Klicke auf Ver\u00f6ffentlichen, um den WordPress-Code anzuzeigen\" width=\"929\" height=\"499\"><figcaption id=\"caption-attachment-151535\" class=\"wp-caption-text\">Klick auf Ver\u00f6ffentlichen<\/figcaption><\/figure>\n<p>Sobald du auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong> geklickt hast, besuche die Live-Version des Beitrags, um zu \u00fcberpr\u00fcfen, ob dein Code-Chunk als Rohcode angezeigt wird.<\/p>\n<p>Wie du siehst, ist der Code-Block ziemlich einfach, aber er bietet die notwendigen Funktionen, um die Formatierung beim Ver\u00f6ffentlichen von Code in Blogbeitr\u00e4gen beizubehalten.<\/p>\n<p>Sieh dir den folgenden Screenshot an. In unserem Beispiel hat sich nichts am urspr\u00fcnglichen Codeschnipsel ge\u00e4ndert; er wurde lediglich im Frontend in einem grauen Kasten dargestellt.<\/p>\n<figure id=\"attachment_151536\" aria-describedby=\"caption-attachment-151536\" style=\"width: 1031px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151536 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/grey-box.jpg\" alt=\"Angezeigter Code auf dem Frontend\" width=\"1031\" height=\"1190\"><figcaption id=\"caption-attachment-151536\" class=\"wp-caption-text\">Angezeigter Code auf dem Frontend<\/figcaption><\/figure>\n<h4>Schritt 4: \u00dcberlege dir eine Formatierung des Codeblocks<\/h4>\n<p>Um den Code-Block ein wenig hervorzuheben, solltest du sein Aussehen ver\u00e4ndern.<\/p>\n<p>Um die Styling-Optionen f\u00fcr den Block zu sehen, w\u00e4hle den <strong>Code-Block<\/strong> aus und klicke dann auf die Schaltfl\u00e4che <strong>Einstellungen<\/strong> (Zahnradsymbol). Dadurch wird die Registerkarte <strong>Block<\/strong> ge\u00f6ffnet, die nur die Blockeinstellungen f\u00fcr den ausgew\u00e4hlten Block &#8211; in diesem Fall den Code-Block &#8211; anzeigt.<\/p>\n<figure id=\"attachment_151537\" aria-describedby=\"caption-attachment-151537\" style=\"width: 1056px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151537 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Go-to-Block-Settings-for-Code-Formatting.jpg\" alt=\"Gehe zu den Blockeinstellungen f\u00fcr die Code-Formatierung\" width=\"1056\" height=\"814\"><figcaption id=\"caption-attachment-151537\" class=\"wp-caption-text\">Gehe zu den Blockeinstellungen f\u00fcr die Code-Formatierung<\/figcaption><\/figure>\n<p>Du kannst den Code-Block nach Belieben gestalten, indem du z. B. die Text- und Hintergrundfarbe \u00e4nderst.<\/p>\n<figure id=\"attachment_151538\" aria-describedby=\"caption-attachment-151538\" style=\"width: 1044px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151538 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Edit-Color-and-Background-Settings.jpg\" alt=\"Einstellungen f\u00fcr Farbe und Hintergrund bearbeiten\" width=\"1044\" height=\"758\"><figcaption id=\"caption-attachment-151538\" class=\"wp-caption-text\">Einstellungen f\u00fcr Farbe und Hintergrund bearbeiten<\/figcaption><\/figure>\n<p>Das kannst du auch:<\/p>\n<ul>\n<li>Die Gr\u00f6\u00dfe des Textes \u00e4ndern<\/li>\n<li>Polsterung und R\u00e4nder f\u00fcr das Codefeld hinzuf\u00fcgen<\/li>\n<li>Einen Rahmen mit einer benutzerdefinierten Breite und Farbe einf\u00fcgen<\/li>\n<\/ul>\n<figure id=\"attachment_151539\" aria-describedby=\"caption-attachment-151539\" style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151539 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Settings-for-size-dimensions-and-border.jpg\" alt=\"Einstellungen f\u00fcr Gr\u00f6\u00dfe, Abmessungen und Rahmen\" width=\"1050\" height=\"806\"><figcaption id=\"caption-attachment-151539\" class=\"wp-caption-text\">Einstellungen f\u00fcr Gr\u00f6\u00dfe, Abmessungen und Rahmen<\/figcaption><\/figure>\n<p>Wie immer klickst du auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>, wenn du mit der Bearbeitung des Blocks fertig bist, und siehst dir das Ergebnis im Frontend deines <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-benutzerdefinierte-beitragstypen\/\">WordPress-Beitrags<\/a> an.<\/p>\n<figure id=\"attachment_151540\" aria-describedby=\"caption-attachment-151540\" style=\"width: 1045px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151540 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Frontend-Results.jpg\" alt=\"Frontend-Ergebnisse zur Anzeige von WordPress-Code\" width=\"1045\" height=\"1340\"><figcaption id=\"caption-attachment-151540\" class=\"wp-caption-text\">Frontend-Ergebnisse<\/figcaption><\/figure>\n<h3>Methode 2: Ein Plugin verwenden<\/h3>\n<p>Eine weitere M\u00f6glichkeit, Code in WordPress anzuzeigen, ist die <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-wordpress-plugins\/\">Installation eines Plugins<\/a>.<\/p>\n<p>Diese Methode mag etwas \u00fcberfl\u00fcssig erscheinen, da WordPress bereits einen eingebauten Code-Block hat, aber einige Plugins bieten zus\u00e4tzliche Funktionen und Formatierungswerkzeuge, so dass sich die Arbeit mit einem Plugin lohnt. Kurz gesagt: Du kannst deine Code-Bl\u00f6cke h\u00fcbscher gestalten, als du es mit dem standardm\u00e4\u00dfigen Gutenberg-Code-Block tun w\u00fcrdest.<\/p>\n<p>Au\u00dferdem ist es f\u00fcr manche Nutzer des klassischen WordPress-Editors einfacher, mit einem Plugin zu arbeiten, da es etwas schwieriger ist, Code im klassischen Editor darzustellen.<\/p>\n<p>Zun\u00e4chst musst du ein &#8222;Syntax-Highlighter&#8220;-Plugin ausw\u00e4hlen, was so viel hei\u00dft wie, dass das Plugin deinen Quellcode hervorhebt und seine Formatierung beibeh\u00e4lt.<\/p>\n<p>Hier sind einige bekannte Plugins f\u00fcr die Anzeige von Code in WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/enlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enlighter<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">SyntaxHighlighter Evolved<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/code-prettify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Code Prettify<\/a><\/li>\n<\/ul>\n<p>In diesem Tutorial verwenden wir das Plugin Enlighter, da es neben vielen anderen Styling-Funktionen auch die M\u00f6glichkeit bietet, zu markieren, welche Arten von Code du in deinen Codeboxen anzeigst. Du kannst aber auch gerne die anderen Plugins ausprobieren, da sie alle im Wesentlichen das Gleiche tun.<\/p>\n<h4>Schritt 1: Installiere ein Syntax Highlighter Plugin<\/h4>\n<p>Installiere das Plugin Enlighter &#8211; Customizable Syntax Highlighter auf deiner WordPress-Website mit deiner bevorzugten <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-wordpress-plugins\/\">Plugin-Installationsmethode<\/a>.<\/p>\n<p>Nach der Aktivierung ist das Plugin bereit, Code in jeden Beitrag\/jede Seite mit einem Gutenberg-Block oder einem <strong>Einf\u00fcge-Button<\/strong> im klassischen Editor einzuf\u00fcgen.<\/p>\n<figure id=\"attachment_151541\" aria-describedby=\"caption-attachment-151541\" style=\"width: 945px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151541 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/The-Enlighter-Plugin.jpg\" alt=\"Das Enlighter-Plugin\" width=\"945\" height=\"309\"><figcaption id=\"caption-attachment-151541\" class=\"wp-caption-text\">Das Enlighter-Plugin<\/figcaption><\/figure>\n<h4>Schritt 2: Einf\u00fcgen des Enlighter-Quellcodeblocks in einen Beitrag<\/h4>\n<p>Wenn du den Gutenberg-Block-Editor von WordPress verwendest, \u00f6ffne einen Beitrag, in dem du den Code anzeigen m\u00f6chtest. Klicke auf eine der Schaltfl\u00e4chen zum <strong>Hinzuf\u00fcgen von Bl\u00f6cken<\/strong> (+-Symbol), um die Sammlung der verf\u00fcgbaren Bl\u00f6cke zu \u00f6ffnen.<\/p>\n<p>Suche oder gib ein Schl\u00fcsselwort f\u00fcr den <strong>Enlighten Sourcecode-Block<\/strong> ein. Klicke auf den Block, um ihn in den Beitrag einzuf\u00fcgen.<\/p>\n<figure id=\"attachment_151542\" aria-describedby=\"caption-attachment-151542\" style=\"width: 997px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151542 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Enlighter-Sourcecode-Block.jpg\" alt=\"Enlighter-Quellcode-Block\" width=\"997\" height=\"575\"><figcaption id=\"caption-attachment-151542\" class=\"wp-caption-text\">Enlighter-Quellcode-Block<\/figcaption><\/figure>\n<h4>Schritt 3: F\u00fcge den Code in den Syntax-Highlighter-Block ein<\/h4>\n<p>Der <strong>Enlighter-Highlighter-Block<\/strong> wird dann im Block-Editor angezeigt, mit einem Titel f\u00fcr <strong>&#8222;Generic Highlighting&#8220;<\/strong> und einem Feld f\u00fcr <strong>&#8222;Insert Sourcecode&#8230;&#8220;<\/strong>.<\/p>\n<p>Nimm den Code, den du in WordPress anzeigen m\u00f6chtest, und f\u00fcge ihn in das Feld <strong>&#8222;Quellcode einf\u00fcgen&#8230;&#8220;<\/strong> ein.<\/p>\n<figure id=\"attachment_151543\" aria-describedby=\"caption-attachment-151543\" style=\"width: 1022px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151543 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Use-the-Insert-Sourcecode-Field.jpg\" alt=\"Das Feld \"Quellcode einf\u00fcgen\" verwenden\" width=\"1022\" height=\"381\"><figcaption id=\"caption-attachment-151543\" class=\"wp-caption-text\">Das Feld &#8222;Quellcode einf\u00fcgen&#8220; verwenden<\/figcaption><\/figure>\n<p>Als Syntax-Highlighter beh\u00e4lt das Plugin alle Formatierungsoptionen und Tabulatoren bei. Wenn du mit dem Ergebnis zufrieden bist, klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>.<\/p>\n<figure id=\"attachment_151544\" aria-describedby=\"caption-attachment-151544\" style=\"width: 991px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151544 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish-1.jpg\" alt=\"Klicke auf Ver\u00f6ffentlichen\" width=\"991\" height=\"849\"><figcaption id=\"caption-attachment-151544\" class=\"wp-caption-text\">Klicke auf Ver\u00f6ffentlichen<\/figcaption><\/figure>\n<h4>Schritt 4: Vorschau des Codes auf dem Frontend<\/h4>\n<p>Jetzt kannst du dir das Frontend deines Beitrags ansehen, um zu sehen, was die Besucher deiner Website sehen.<\/p>\n<p>Das Enlighter-Plugin bietet ein minimalistisches Standardtheme f\u00fcr die Anzeige des Codes mit Zeilennummern, die die Organisation und das Auffinden von Referenzen erleichtern.<\/p>\n<figure id=\"attachment_151545\" aria-describedby=\"caption-attachment-151545\" style=\"width: 1098px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151545 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.95cce0abcfa2479e9089506a78f9c684.jpg\" alt=\"Anzeige im Frontend\" width=\"1098\" height=\"728\"><figcaption id=\"caption-attachment-151545\" class=\"wp-caption-text\">Anzeige im Frontend<\/figcaption><\/figure>\n<p>Wie wir bereits erw\u00e4hnt haben, hat die Verwendung eines Plugins zur Anzeige von Code in WordPress Vorteile gegen\u00fcber den anderen Methoden. Die Frontend-Version des Enlighter-Syntax-Plugins hebt zum Beispiel Zeilen hervor, wenn der Nutzer \u00fcber deinen Code scrollt.<\/p>\n<figure id=\"attachment_151546\" aria-describedby=\"caption-attachment-151546\" style=\"width: 1035px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151546 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ffec66ab73594f6a8fcfd86328515232.jpg\" alt=\"Hervorgehobene Codezeilen\" width=\"1035\" height=\"512\"><figcaption id=\"caption-attachment-151546\" class=\"wp-caption-text\">Hervorgehobene Codezeilen<\/figcaption><\/figure>\n<p>Es gibt auch mehrere Schaltfl\u00e4chen in der oberen rechten Ecke des Codefeldes, darunter eine, die den Code im Klartext ohne Zeilennummern anzeigt.<\/p>\n<figure id=\"attachment_151547\" aria-describedby=\"caption-attachment-151547\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151547 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.00b5c3fcfa414d76ae68c0827cb2228c.jpg\" alt=\"Schaltfl\u00e4che Klartext\" width=\"1020\" height=\"468\"><figcaption id=\"caption-attachment-151547\" class=\"wp-caption-text\">Schaltfl\u00e4che Klartext<\/figcaption><\/figure>\n<p>Die zweite Schaltfl\u00e4che hei\u00dft <strong>&#8222;In die<\/strong> <strong>Zwischenablage<\/strong> <strong>kopieren&#8220;<\/strong>. Sie kopiert den gesamten Code sofort in die Zwischenablage des Nutzers, den er dann in jedes beliebige Programm einf\u00fcgen kann.<\/p>\n<figure id=\"attachment_151548\" aria-describedby=\"caption-attachment-151548\" style=\"width: 946px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151548 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6c9ec9750eef4aecbfceee51a4af1cc0.jpg\" alt=\"Schaltfl\u00e4che \"In die Zwischenablage kopieren\"\" width=\"946\" height=\"466\"><figcaption id=\"caption-attachment-151548\" class=\"wp-caption-text\">Schaltfl\u00e4che &#8222;In die Zwischenablage kopieren&#8220;<\/figcaption><\/figure>\n<p>Die dritte Schaltfl\u00e4che schlie\u00dflich \u00f6ffnet den Code in einem neuen Fenster, das ihn in einer reinen Textversion deines Browserfensters darstellt.<\/p>\n<figure id=\"attachment_151549\" aria-describedby=\"caption-attachment-151549\" style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151549 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.777ac0e80acf4dcbb66107daddf8a3b7.jpg\" alt=\"Code in neuem Fenster \u00f6ffnen\" width=\"986\" height=\"456\"><figcaption id=\"caption-attachment-151549\" class=\"wp-caption-text\">Code in neuem Fenster \u00f6ffnen<\/figcaption><\/figure>\n<h4>Schritt 5: Sprache und Zeileneinstellungen f\u00fcr die Code-Box festlegen<\/h4>\n<p>Das Enlighter-Plugin wird mit verschiedenen Themes und leistungsstarken Anpassungswerkzeugen geliefert, mit denen du das Codefeld nach deinen W\u00fcnschen gestalten kannst. Wenn du nicht das Standardtheme verwenden m\u00f6chtest, gehe zur\u00fcck zu deinem Beitrag in WordPress und klicke auf den aktuell ge\u00f6ffneten <strong>Enlighter-Quellcodeblock<\/strong>.<\/p>\n<p>Dadurch wird die <strong>Block-Seitenleiste<\/strong> in WordPress angezeigt. Wenn sie nicht angezeigt wird, klicke auf die Schaltfl\u00e4che <strong>Einstellungen<\/strong> (Zahnradsymbol) in der oberen rechten Ecke des WordPress-Fensters.<\/p>\n<p>Die erste Einstellung, die du anpassen musst, ist das Feld <strong>Sprache<\/strong> &#8211; damit wird dem Plugin mitgeteilt, welche Code-Sprache angezeigt wird, damit es die richtige Formatierung und Hervorhebung anbieten kann.<\/p>\n<figure id=\"attachment_151550\" aria-describedby=\"caption-attachment-151550\" style=\"width: 1148px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151550 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.f2c13dad8c56496597ac3b6a7c51be2c.jpg\" alt=\"Feld Sprache\" width=\"1148\" height=\"733\"><figcaption id=\"caption-attachment-151550\" class=\"wp-caption-text\">Feld Sprache<\/figcaption><\/figure>\n<p>Es gibt eine ganze Reihe von Codesprachen zur Auswahl, also scrolle durch die Liste und w\u00e4hle die am besten geeignete aus.<\/p>\n<figure id=\"attachment_151551\" aria-describedby=\"caption-attachment-151551\" style=\"width: 1171px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151551 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4e8a9a6a7c984e20b6bb154e04f75987.jpg\" alt=\"Ausw\u00e4hlen der Sprache\" width=\"1171\" height=\"886\"><figcaption id=\"caption-attachment-151551\" class=\"wp-caption-text\">Ausw\u00e4hlen der Sprache<\/figcaption><\/figure>\n<p>Das Feld <strong>Spezialzeilen<\/strong> hebt alle von dir angegebenen Zeilen hervor. Dazu gibst du die Zeilennummern durch Kommas getrennt ein.<\/p>\n<figure id=\"attachment_151552\" aria-describedby=\"caption-attachment-151552\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151552 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.17f5c662bffd4955a719bcd12d1afc82.jpg\" alt=\"Besondere Zeilen\" width=\"1024\" height=\"700\"><figcaption id=\"caption-attachment-151552\" class=\"wp-caption-text\">Besondere Zeilen<\/figcaption><\/figure>\n<p>Als Ergebnis sehen die Website-Besucher alle Zeilen hervorgehoben, die du angegeben hast.<\/p>\n<figure id=\"attachment_151553\" aria-describedby=\"caption-attachment-151553\" style=\"width: 982px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151553 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.26424dd29a524fb5bb4e898efbc65609.jpg\" alt=\"Hervorgehobene Zeilen auf dem Frontend\" width=\"982\" height=\"477\"><figcaption id=\"caption-attachment-151553\" class=\"wp-caption-text\">Hervorgehobene Zeilen auf dem Frontend<\/figcaption><\/figure>\n<p>Mit dem Feld <strong>Zeilenversatz <\/strong>kannst du deinen Codeschnipsel an einer bestimmten nummerierten Zeile beginnen. Das ist von Vorteil, wenn du nur einen Teil des Codes anzeigst, der Teil einer gr\u00f6\u00dferen Sammlung von Zeilen ist.<\/p>\n<figure id=\"attachment_151554\" aria-describedby=\"caption-attachment-151554\" style=\"width: 1046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151554 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2fcdd0028fa949ba9294eeb90fee1f99.jpg\" alt=\"Feld Zeilenversatz\" width=\"1046\" height=\"447\"><figcaption id=\"caption-attachment-151554\" class=\"wp-caption-text\">Feld Zeilenversatz<\/figcaption><\/figure>\n<p>Wie du siehst, beginnt die Eingabe von 10 in das Feld <strong>Zeilenversatz<\/strong> den gesamten Code an der Nummer 10.<\/p>\n<figure id=\"attachment_151555\" aria-describedby=\"caption-attachment-151555\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151555 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.29b010d935744289aac79f10b3b2eaf4.jpg\" alt=\"Dokument in einer bestimmten Zeile beginnen\" width=\"900\" height=\"463\"><figcaption id=\"caption-attachment-151555\" class=\"wp-caption-text\">Dokument in einer bestimmten Zeile beginnen<\/figcaption><\/figure>\n<h4>Schritt 6: W\u00e4hle ein Theme<\/h4>\n<p>Das Theme Enlighter ist das Standardtheme dieses Plugins. Im Feld <strong>Theme<\/strong> (immer noch unterhalb des Block-Einstellungsfeldes) findest du jedoch eine gro\u00dfe Auswahl an eingebauten Themes, die du ausw\u00e4hlen kannst.<\/p>\n<figure id=\"attachment_151556\" aria-describedby=\"caption-attachment-151556\" style=\"width: 942px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151556 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a6632b4168ee44ef843640a71644257f.jpg\" alt=\"Theme-Optionen\" width=\"942\" height=\"771\"><figcaption id=\"caption-attachment-151556\" class=\"wp-caption-text\">Theme-Optionen<\/figcaption><\/figure>\n<p>Das Godzilla-Theme zum Beispiel zeigt den Code so an, als ob er auf einem Diagramm oder Zeichenpapier st\u00fcnde.<\/p>\n<figure id=\"attachment_151557\" aria-describedby=\"caption-attachment-151557\" style=\"width: 1007px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151557 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ee85f0bb69e84d96a03ac4d623fd3453.jpg\" alt=\"Das Godzilla-Theme\" width=\"1007\" height=\"563\"><figcaption id=\"caption-attachment-151557\" class=\"wp-caption-text\">Das Godzilla-Theme<\/figcaption><\/figure>\n<p>Und das Atomic-Theme wechselt den Hintergrund zu einem dunklen Theme und bietet haupts\u00e4chlich wei\u00dfen Text und rosa Farbe f\u00fcr Code-Tags.<\/p>\n<figure id=\"attachment_151558\" aria-describedby=\"caption-attachment-151558\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151558 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ebf289e0059f4ac5a19fcfb6c2bfb589.jpg\" alt=\"Atomic-Theme\" width=\"1063\" height=\"646\"><figcaption id=\"caption-attachment-151558\" class=\"wp-caption-text\">Atomic-Theme<\/figcaption><\/figure>\n<p>Ein weiteres Beispiel ist das Classic-Theme, das eine weniger minimalistische Version des Enlighter-Themes mit helleren Farben und klareren Linien ist.<\/p>\n<figure id=\"attachment_151559\" aria-describedby=\"caption-attachment-151559\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151559 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6a3cbf74437e460ba4f884eb05cee863.jpg\" alt=\"Classic Theme\" width=\"1020\" height=\"660\"><figcaption id=\"caption-attachment-151559\" class=\"wp-caption-text\">Classic Theme<\/figcaption><\/figure>\n<h4>Schritt 7: Erw\u00e4ge die Erstellung eines eigenen Themes<\/h4>\n<p>Das Enlighter-Plugin bietet eine Registerkarte im <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Dashboard<\/a>, \u00fcber die du alle Aspekte des Plugins und seine Hervorhebungsfunktionen anpassen kannst.<\/p>\n<p>Um die volle Kontrolle \u00fcber das Design und die Anzeige deiner Codeboxen zu erhalten, gehst du auf die Registerkarte <strong>Enlighter<\/strong> (&lt;&gt; Symbol) und w\u00e4hlst dann <strong>Erscheinungsbild<\/strong> oder <strong>Theme<\/strong>\u00a0<strong>Customizer<\/strong>.<\/p>\n<figure id=\"attachment_151560\" aria-describedby=\"caption-attachment-151560\" style=\"width: 903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151560 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.dae7a301ff6c4263b7608ef0fa6d8266.jpg\" alt=\"Theme Customizer\" width=\"903\" height=\"474\"><figcaption id=\"caption-attachment-151560\" class=\"wp-caption-text\">Theme Customizer<\/figcaption><\/figure>\n<p>Auf der Registerkarte <strong>&#8222;Erscheinungsbild&#8220;<\/strong> kannst du ein Standardthema ausw\u00e4hlen und au\u00dferdem Elemente wie:<\/p>\n<ul>\n<li>Code-Einr\u00fcckung<\/li>\n<li>Text\u00fcberlauf<\/li>\n<li>Zeilennummerierung<\/li>\n<li>Zeilen\u00fcbergangseffekt<\/li>\n<li>RAW-Code bei Doppelklick<\/li>\n<\/ul>\n<figure id=\"attachment_151561\" aria-describedby=\"caption-attachment-151561\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151561 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.abcba1aae5c04c278f1b59b5768b3aa3.jpg\" alt=\"Bereich Erscheinungsbild im Theme Customizer\" width=\"1083\" height=\"830\"><figcaption id=\"caption-attachment-151561\" class=\"wp-caption-text\">Bereich Erscheinungsbild im Theme Customizer<\/figcaption><\/figure>\n<p>Der Abschnitt <strong>Theme<\/strong>\u00a0<strong>Customizer<\/strong>\u00a0enth\u00e4lt eine lange Liste von Registerkarten, mit denen du ein Code-Highlighter-Theme von Grund auf neu erstellen kannst, mit Optionen zur Anpassung von Schaltfl\u00e4chen, Ausdr\u00fccken, Sprachen und mehr.<\/p>\n<figure id=\"attachment_151562\" aria-describedby=\"caption-attachment-151562\" style=\"width: 987px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151562 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e9cf6edb95b34a5ebb1771e2491ad782.jpg\" alt=\"Zus\u00e4tzliche Einstellungen\" width=\"987\" height=\"865\"><figcaption id=\"caption-attachment-151562\" class=\"wp-caption-text\">Zus\u00e4tzliche Einstellungen<\/figcaption><\/figure>\n<h4>Bonus: Verwendung von Enlighter mit dem klassischen Editor<\/h4>\n<p>Das Enlighter-Plugin funktioniert etwas anders f\u00fcr diejenigen, die noch den klassischen WordPress-Editor verwenden.<\/p>\n<p>Wenn du das Enlighter-Plugin installiert hast, gehst du zu einem beliebigen Beitrag oder einer Seite und suchst im Bedienfeld des Editors die Schaltfl\u00e4che <strong>Enlighter-Code einf\u00fcgen<\/strong>.<\/p>\n<figure id=\"attachment_151563\" aria-describedby=\"caption-attachment-151563\" style=\"width: 969px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151563 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.58a5cf5f681c4e638286491be211f678.jpg\" alt=\"Enlighter Code einf\u00fcgen\" width=\"969\" height=\"434\"><figcaption id=\"caption-attachment-151563\" class=\"wp-caption-text\">Enlighter Code einf\u00fcgen<\/figcaption><\/figure>\n<p>Daraufhin \u00f6ffnet sich ein neues Fenster mit dem Namen <strong>Enlighter Code Insert<\/strong>.<\/p>\n<p>F\u00fcge den Code, den du anzeigen m\u00f6chtest, in das gro\u00dfe (unbeschriftete) Feld am unteren Rand ein.<\/p>\n<figure id=\"attachment_151564\" aria-describedby=\"caption-attachment-151564\" style=\"width: 985px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151564 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.169682da2f0f4a80b61a2e195331cedf.jpg\" alt=\"Einf\u00fcgen des Codes\" width=\"985\" height=\"795\"><figcaption id=\"caption-attachment-151564\" class=\"wp-caption-text\">Einf\u00fcgen des Codes<\/figcaption><\/figure>\n<p>Klicke auf das Dropdown-Men\u00fc im Feld <strong>Sprache<\/strong>, um die richtige Programmiersprache auszuw\u00e4hlen.<\/p>\n<figure id=\"attachment_151565\" aria-describedby=\"caption-attachment-151565\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151565 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a9bc4bc75c3941d0a18f51012154c107.jpg\" alt=\"W\u00e4hle eine Sprache\" width=\"983\" height=\"660\"><figcaption id=\"caption-attachment-151565\" class=\"wp-caption-text\">W\u00e4hle eine Sprache<\/figcaption><\/figure>\n<p>Wenn du fertig bist, klicke auf die Schaltfl\u00e4che <strong>OK<\/strong>. Du kannst auch die anderen Funktionen in diesem Fenster anpassen, z. B. den Zeileneinzug hinzuf\u00fcgen.<\/p>\n<figure id=\"attachment_151566\" aria-describedby=\"caption-attachment-151566\" style=\"width: 980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151566 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.34dcd4d4658c4c5b849bbc0271526d65.jpg\" alt=\"Beispiel f\u00fcr den Zeileneinzug\" width=\"980\" height=\"623\"><figcaption id=\"caption-attachment-151566\" class=\"wp-caption-text\">Beispiel f\u00fcr den Zeileneinzug<\/figcaption><\/figure>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong> f\u00fcr den Beitrag und sieh dir dann das Ergebnis im Frontend an. Das Standard-Codefeld f\u00fcr den klassischen Editor ist ein dunkles Theme, aber du kannst das Aussehen deines Codefelds \u00e4ndern und sogar eigene Themes erstellen.<\/p>\n<figure id=\"attachment_151567\" aria-describedby=\"caption-attachment-151567\" style=\"width: 922px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151567 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3a8933d9ff7049568e8e0145998c0410.jpg\" alt=\"Ver\u00f6ffentlichte Version\" width=\"922\" height=\"743\"><figcaption id=\"caption-attachment-151567\" class=\"wp-caption-text\">Ver\u00f6ffentlichte Version<\/figcaption><\/figure>\n<h3>Methode 3: Verwendung eines Encoder-Tools<\/h3>\n<p>Encoder-Tools sind eine Alternative, wenn du versuchst, Code in WordPress anzuzeigen, vor allem, wenn du das nicht so oft machen willst (und dich nicht mit einem Plugin herumschlagen willst).<\/p>\n<p>HTML-Encoder bewahren die Integrit\u00e4t von Codeformaten, insbesondere von solchen mit Sonderzeichen und Tabulatoren. Encoder k\u00f6nnen alle Arten von Code verarbeiten, aber sie \u00fcbersetzen den eingef\u00fcgten Code dann in HTML-f\u00e4higen Code, der sich leicht in WordPress einf\u00fcgen l\u00e4sst.<\/p>\n<p>Es gibt keine zuverl\u00e4ssigen Encoder-Tools als Plugins, aber viele werden als kostenlose Web-Apps von Drittanbietern angeboten. Beachte auch, dass Encoder-Tools keine Styling-Tools bieten, so dass du den Code nur so erh\u00e4ltst, wie er angezeigt werden soll (keine ausgefallenen Boxen oder Funktionen zur Anpassung der Zeilen).<\/p>\n<p>Einige zuverl\u00e4ssige Encoder-Tools sind:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3docs.com\/tools\/html-encoder\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3Docs HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.opinionatedgeek.com\/codecs\/htmlencoder\" target=\"_blank\" rel=\"noopener noreferrer\">Opinionated Geek HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.web2generators.com\/html-based-tools\/online-html-entities-encoder-and-decoder\" target=\"_blank\" rel=\"noopener noreferrer\">Web2Generators HTML Encoder und Decoder<\/a><\/li>\n<\/ul>\n<p>Unsere Tests haben ergeben, dass der W3Docs HTML Encoder der effektivste Encoder ist, deshalb werden wir ihn f\u00fcr dieses Tutorial verwenden.<\/p>\n<h4>Schritt 1: \u00d6ffne den Encoder und w\u00e4hle Einstellungen<\/h4>\n<p>Gehe auf die W3Docs HTML Encoder Website.<\/p>\n<p>Die Seite zeigt zwei nebeneinander liegende Felder. In das Feld auf der linken Seite f\u00fcgst du deinen Code ein. Auf der rechten Seite siehst du die kodierte Version, die du kopieren und in WordPress einf\u00fcgen kannst.<\/p>\n<p>Du musst jedoch zuerst festlegen, welche Art von Code du beibehalten m\u00f6chtest:<\/p>\n<ul>\n<li>W\u00e4hle <strong>JavaScript-Unicode<\/strong>, wenn du Code mit JavaScript-Elementen einf\u00fcgst.<\/li>\n<li>W\u00e4hle <strong>HTML-Symbole<\/strong>, wenn du HTML verwendest.<\/li>\n<\/ul>\n<figure id=\"attachment_151568\" aria-describedby=\"caption-attachment-151568\" style=\"width: 1155px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151568 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b4cf25bd90b44faea5a06da55310d33a.jpg\" alt=\"W\u00e4hle HTML-Symbole\" width=\"1155\" height=\"718\"><figcaption id=\"caption-attachment-151568\" class=\"wp-caption-text\">W\u00e4hle HTML-Symbole<\/figcaption><\/figure>\n<h4>Schritt 2: Einf\u00fcgen und zum Kodieren klicken<\/h4>\n<p>F\u00fcge den Code, den du in WordPress anzeigen m\u00f6chtest, in das linke Feld ein. Klicke dann auf die Schaltfl\u00e4che <strong>Kodieren<\/strong> oben rechts.<\/p>\n<figure id=\"attachment_151569\" aria-describedby=\"caption-attachment-151569\" style=\"width: 1147px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151569 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.be543787ffbc49ea966242ac15528658.jpg\" alt=\"Zum Kodieren klicken\" width=\"1147\" height=\"621\"><figcaption id=\"caption-attachment-151569\" class=\"wp-caption-text\">Zum Kodieren klicken<\/figcaption><\/figure>\n<h4>Schritt 3: Kopiere das dekodierte Ergebnis<\/h4>\n<p>Das fertige Produkt sieht vielleicht verwirrend aus, aber es ist eigentlich eine Kombination aus HTML-Elementen, die jeden Aspekt des von dir eingef\u00fcgten Codes beibeh\u00e4lt, ohne dass der Code aktiviert wird und etwas anderes im Frontend anzeigt.<\/p>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Kopieren<\/strong>.<\/p>\n<figure id=\"attachment_151570\" aria-describedby=\"caption-attachment-151570\" style=\"width: 1156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151570 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4a0e251ebf094c2da66953dcbb53bbf2.jpg\" alt=\"Kopiere den Code\" width=\"1156\" height=\"623\"><figcaption id=\"caption-attachment-151570\" class=\"wp-caption-text\">Kopiere den Code<\/figcaption><\/figure>\n<h4>Schritt 4: F\u00fcge den kodierten HTML-Code in den WordPress Code- oder Texteditor ein<\/h4>\n<p>Gehe zur\u00fcck zu WordPress und \u00f6ffne den gew\u00fcnschten Beitrag oder die Seite.<\/p>\n<p>W\u00e4hle den Men\u00fcpunkt <strong>Optionen<\/strong> (drei vertikale Punkte) in der oberen rechten Ecke. Klicke auf die Option <strong>Code-Editor<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Versuche nicht, den benutzerdefinierten HTML-Block f\u00fcr diesen Vorgang zu verwenden, da er nicht zu funktionieren scheint.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151571\" aria-describedby=\"caption-attachment-151571\" style=\"width: 1087px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151571 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4eb099a1c6eb417bb897b6a0eb5a333a.jpg\" alt=\"Gehe zum Men\u00fc Optionen\" width=\"1087\" height=\"613\"><figcaption id=\"caption-attachment-151571\" class=\"wp-caption-text\">Gehe zum Men\u00fc Optionen<\/figcaption><\/figure>\n<p>Du siehst jetzt den <strong>Code-Editor<\/strong> und nicht mehr den visuellen Block-Editor. Suche den Bereich, in dem du den Code anzeigen m\u00f6chtest, und f\u00fcge dein kodiertes HTML in den Editor ein.<\/p>\n<figure id=\"attachment_151572\" aria-describedby=\"caption-attachment-151572\" style=\"width: 901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151572 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5990861f47e46a3ab2b929258a7f630.jpg\" alt=\"Kodiertes HTML einf\u00fcgen\" width=\"901\" height=\"870\"><figcaption id=\"caption-attachment-151572\" class=\"wp-caption-text\">Kodiertes HTML einf\u00fcgen<\/figcaption><\/figure>\n<p>Wenn du den klassischen WordPress-Editor verwendest, musst du auf die Registerkarte Text gehen, die mit dem Code-Editor des Gutenberg-Blockeditors identisch ist.<\/p>\n<figure id=\"attachment_151573\" aria-describedby=\"caption-attachment-151573\" style=\"width: 967px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151573 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b8d500e6d84b435a851a50cda8ea61c9.jpg\" alt=\"Registerkarte Text\" width=\"967\" height=\"736\"><figcaption id=\"caption-attachment-151573\" class=\"wp-caption-text\">Registerkarte Text<\/figcaption><\/figure>\n<h4>Schritt 5: Ver\u00f6ffentlichen und Anzeigen des Codes<\/h4>\n<p>Klicke auf <strong>Aktualisieren<\/strong> oder <strong>Ver\u00f6ffentlichen<\/strong> f\u00fcr den Beitrag und navigiere dann zum Frontend des Beitrags, um zu sehen, wie er aussieht.<\/p>\n<p>Du solltest den urspr\u00fcnglichen Code sehen, der in den Kodierer eingef\u00fcgt wurde, bevor das Tool HTML-Kodierungselemente hinzugef\u00fcgt hat. Wie bereits erw\u00e4hnt, gibt es bei den Encodern keine Styling-Funktionen, daher ist dies eine wunderbare Methode f\u00fcr ein sauberes, minimalistisches Aussehen.<\/p>\n<figure id=\"attachment_151574\" aria-describedby=\"caption-attachment-151574\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151574 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.321fb9938cf84a1c8308d32fc211b121.jpg\" alt=\"Ver\u00f6ffentlichter Code\" width=\"1083\" height=\"808\"><figcaption id=\"caption-attachment-151574\" class=\"wp-caption-text\">Ver\u00f6ffentlichter Code<\/figcaption><\/figure>\n<h3>Methode 4: Einen benutzerdefinierten Shortcode verwenden<\/h3>\n<p>Wenn du <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-shortcodes\/\">einen benutzerdefinierten Shortcode erstellst<\/a>, kannst du wiederverwendbare Codebausteine einf\u00fcgen, ohne sie kopieren und einf\u00fcgen zu m\u00fcssen. Deshalb bieten benutzerdefinierte Shortcodes eine gute M\u00f6glichkeit, Code in WordPress anzuzeigen.<\/p>\n<p>Hier sind die Vorteile der Verwendung von benutzerdefinierten Shortcodes zur Anzeige von Code:<\/p>\n<ol>\n<li>Mit benutzerdefinierten Shortcodes kannst du komplizierten Code einmal speichern und dann wiederverwenden, sodass du nicht jedes Mal l\u00e4ngere Codeschnipsel eingeben musst.<\/li>\n<li>Du kannst dein eigenes <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">Styling-CSS<\/a> f\u00fcr die Code-Highlighter und Boxen schreiben.<\/li>\n<li>Shortcodes k\u00f6nnen von jedem verwendet werden, so dass andere Mitwirkende die Vorteile deiner Code-Highlighter und Bl\u00f6cke mit einem Klick nutzen k\u00f6nnen.<\/li>\n<\/ol>\n<p>Die Erstellung eines benutzerdefinierten Shortcodes erfordert Erfahrung in der Bearbeitung von <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-ein-wordpress-theme\/#whats-inside-those-wordpress-files\">WordPress-Theme-Dateien<\/a>, in der <a href=\"https:\/\/kinsta.com\/de\/blog\/php-editor\/\">Arbeit mit PHP-Code<\/a> und m\u00f6glicherweise in der Erstellung von WordPress-Plugins. Aufgrund dieser Anforderungen kann die Erstellung eines benutzerdefinierten Shortcodes f\u00fcr WordPress f\u00fcr PHP-Neulinge schwierig sein.<\/p>\n<p>Das fertige Produkt bietet jedoch eine wesentlich einfachere M\u00f6glichkeit, Code in WordPress anzuzeigen.<\/p>\n<figure id=\"attachment_151575\" aria-describedby=\"caption-attachment-151575\" style=\"width: 1558px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151575 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2e11bbe71e8244aaa8d5ecc5d61c3bab.jpg\" alt=\"HTML-Shortcode\" width=\"1558\" height=\"842\"><figcaption id=\"caption-attachment-151575\" class=\"wp-caption-text\">HTML-Shortcode<\/figcaption><\/figure>\n<p>Du kannst den benutzerdefinierten Shortcode benennen, wie du willst, und mehrere Optionen, wie <code>[html] [\/html]<\/code> und <code>[css] [\/css]<\/code>, f\u00fcr verschiedene Programmiersprachen erstellen.<\/p>\n<figure id=\"attachment_151576\" aria-describedby=\"caption-attachment-151576\" style=\"width: 1647px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151576 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.85e96f67d4374def86be5d930973f276.jpg\" alt=\"CSS-Shortcode\" width=\"1647\" height=\"714\"><figcaption id=\"caption-attachment-151576\" class=\"wp-caption-text\">CSS-Shortcode<\/figcaption><\/figure>\n<p>Beachte, dass benutzerdefinierte Shortcodes am besten f\u00fcr die Syntaxhervorhebung funktionieren, wenn du den <strong>Texteditor<\/strong> (in WordPress Classic) oder das Feld f\u00fcr <strong>benutzerdefiniertes<\/strong> <strong>HTML<\/strong> verwendest, wenn du mit dem WordPress Gutenberg Block Editor arbeitest.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Der Shortcode-Block von Gutenberg ist eine Option, aber bei unseren Tests gingen bei einigen Codeschnipseln wichtige Formatierungselemente oder Zeichen verloren.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151577\" aria-describedby=\"caption-attachment-151577\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151577 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5305f76b1754513b54ee4fd2a41e41e.jpg\" alt=\"Text-Editor\" width=\"1063\" height=\"534\"><figcaption id=\"caption-attachment-151577\" class=\"wp-caption-text\">Text-Editor<\/figcaption><\/figure>\n<p>Das Ziel ist es, einen benutzerdefinierten Shortcode zu erstellen, bei dem du Code zwischen den \u00f6ffnenden und schlie\u00dfenden Tags des Shortcodes eingeben oder einf\u00fcgen kannst.<\/p>\n<figure id=\"attachment_151578\" aria-describedby=\"caption-attachment-151578\" style=\"width: 1487px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151578 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.557a5f43cf8d4950ac2bc4212f6aa73b.jpg\" alt=\"In den HTML-Shortcode eingef\u00fcgter Code\" width=\"1487\" height=\"834\"><figcaption id=\"caption-attachment-151578\" class=\"wp-caption-text\">In den HTML-Shortcode eingef\u00fcgter Code<\/figcaption><\/figure>\n<p>Nach der Ver\u00f6ffentlichung werden die Einstellungen f\u00fcr das Styling und die Hervorhebung deines benutzerdefinierten Shortcodes im Frontend angezeigt. Und der Code, den du hinzugef\u00fcgt hast, wird in der Syntaxhervorhebung gut angezeigt.<\/p>\n<figure id=\"attachment_151579\" aria-describedby=\"caption-attachment-151579\" style=\"width: 1357px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151579 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.1123bc1ac4c34faab9809ce3826b2cc9.jpg\" alt=\"Frontend-Ansicht\" width=\"1357\" height=\"897\"><figcaption id=\"caption-attachment-151579\" class=\"wp-caption-text\">Frontend-Ansicht<\/figcaption><\/figure>\n<h3>Methode 5: <code><code><\/code>&lt;code&gt; and &lt;pre&gt;<\/code> Tags verwenden<\/h3>\n<p>Die vielleicht \u00e4lteste &#8211; aber immer noch sehr zuverl\u00e4ssige &#8211; Methode, Code in WordPress anzuzeigen, ist das Hinzuf\u00fcgen bestimmter HTML-Tags um den Codeschnipsel. Diese Methode ist am besten geeignet, wenn du mit dem klassischen WordPress-Editor oder einem beliebigen HTML-Editor arbeitest.<\/p>\n<p>Es gibt zwei M\u00f6glichkeiten:<\/p>\n<ol>\n<li><strong><code>&lt;code&gt;<\/code> tags:<\/strong> Am besten f\u00fcr die Anzeige einer kurzen Codezeile; wird oft innerhalb von Abs\u00e4tzen verwendet<\/li>\n<li><strong><code>&lt;pre&gt;<\/code> tags:<\/strong> Ideal f\u00fcr l\u00e4ngere Codebl\u00f6cke oder wenn du mehr Formatierungsm\u00f6glichkeiten haben m\u00f6chtest<\/li>\n<\/ol>\n<h4>Option 1: <code>&lt;code&gt;<\/code> Tags f\u00fcr Inline-Code-Schnipsel verwenden<\/h4>\n<p>Autoren, die \u00fcber Programmierung schreiben, wollen nicht immer gro\u00dfe Codebl\u00f6cke verwenden. Manchmal ist es sinnvoller, einen kurzen Codeschnipsel in einen Absatz einzuf\u00fcgen.<\/p>\n<p>Trotzdem musst du die Formatierung des Codes hervorheben und beibehalten. Und mancher Code kann zu Problemen mit dem umgebenden Inhalt f\u00fchren, wenn er nicht richtig erhalten bleibt.<\/p>\n<figure id=\"attachment_151580\" aria-describedby=\"caption-attachment-151580\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151580 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.103e5a059b524aa0aa00957a007800de.jpg\" alt=\"Ein &lt;br&gt;-Tag\" width=\"908\" height=\"371\"><figcaption id=\"caption-attachment-151580\" class=\"wp-caption-text\">Ein Umbruch-Tag<\/figcaption><\/figure>\n<p>Nehmen wir zum Beispiel den <code>&lt;br&gt;<\/code> Tag &#8211; ohne den <code>&lt;code&gt;<\/code> Tag w\u00fcrde er einfach einen Umbruch zu deinem Absatz hinzuf\u00fcgen.<\/p>\n<figure id=\"attachment_151581\" aria-describedby=\"caption-attachment-151581\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151581 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a191cc69e4594c76acf394a546c9a1ed.jpg\" alt=\"Ein unerw\u00fcnschter Umbruch\" width=\"1020\" height=\"390\"><figcaption id=\"caption-attachment-151581\" class=\"wp-caption-text\">Ein unerw\u00fcnschter Umbruch<\/figcaption><\/figure>\n<p>Wenn du die Kodierung innerhalb dieser Tags platzierst, wird das Ergebnis viel sauberer:<\/p>\n<pre><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/pre>\n<p>\u00d6ffne dazu einen WordPress-Beitrag und schalte entweder den <strong>Code-Editor<\/strong> (f\u00fcr den Gutenberg-Block-Editor) oder den <strong>Text-Editor<\/strong> (wenn du WordPress Classic verwendest) ein.<\/p>\n<p>F\u00fcge diese Tags irgendwo im Editor ein oder tippe sie ein; f\u00fcge den Code, den du anzeigen m\u00f6chtest, noch nicht ein. F\u00fcge stattdessen ein Leerzeichen zwischen den Tags ein.<\/p>\n<p><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/p>\n<figure id=\"attachment_151582\" aria-describedby=\"caption-attachment-151582\" style=\"width: 1111px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151582 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e37032a750ae40dbb0bae105f49375bc.jpg\" alt=\"Leerzeichen zwischen Code-Tags\" width=\"1111\" height=\"313\"><figcaption id=\"caption-attachment-151582\" class=\"wp-caption-text\">Leerzeichen zwischen Code-Tags<\/figcaption><\/figure>\n<p>Wechsle zum <strong>visuellen<\/strong> <strong>Editor<\/strong> (unabh\u00e4ngig davon, ob du dich in Gutenberg oder im klassischen WordPress befindest).<\/p>\n<p>Du siehst eine kleine graue L\u00fccke innerhalb des visuellen Inhalts. Klicke darauf, um deinen Cursor in diese graue L\u00fccke zu setzen. Hier kannst du den Code f\u00fcr die Anzeige einf\u00fcgen oder eintippen.<\/p>\n<figure id=\"attachment_151583\" aria-describedby=\"caption-attachment-151583\" style=\"width: 988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151583 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.749a378741b34258a4a3c94dcd4e5455.jpg\" alt=\"Graue Fl\u00e4che zum Schreiben des Codes\" width=\"988\" height=\"280\"><figcaption id=\"caption-attachment-151583\" class=\"wp-caption-text\">Graue Fl\u00e4che zum Schreiben des Codes<\/figcaption><\/figure>\n<p>W\u00e4hrend du tippst, erweitert sich der graue Bereich, um den Code-Schnipsel aufzunehmen. Klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong> oder <strong>Aktualisieren<\/strong> f\u00fcr diesen Beitrag.<\/p>\n<figure id=\"attachment_151584\" aria-describedby=\"caption-attachment-151584\" style=\"width: 1019px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151584 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.132a0f507095471dbc4bf516bba70787.jpg\" alt=\"Code in den grauen Bereich eingeben\" width=\"1019\" height=\"367\"><figcaption id=\"caption-attachment-151584\" class=\"wp-caption-text\">Code in den grauen Bereich eingeben<\/figcaption><\/figure>\n<p>Im Frontend des Beitrags siehst du jetzt den Code so, wie er sein sollte, und ohne irgendwelche seltsamen Aktivit\u00e4ten (wie das Hinzuf\u00fcgen eines Umbruchs zu deinem Inhalt).<\/p>\n<figure id=\"attachment_151585\" aria-describedby=\"caption-attachment-151585\" style=\"width: 1163px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151585 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3034b84bc11f4511b65cb87a74b4e92d.jpg\" alt=\"Das Umbruch-Tag wird angezeigt, ohne dass ein Umbruch hinzugef\u00fcgt wird\" width=\"1163\" height=\"449\"><figcaption id=\"caption-attachment-151585\" class=\"wp-caption-text\">Das Umbruch-Tag wird angezeigt, ohne dass ein Umbruch hinzugef\u00fcgt wird<\/figcaption><\/figure>\n<p>Die Formatierung dieser <code>&lt;code&gt;<\/code> Tags ist in der Regel sehr einfach, h\u00e4ngt aber oft von der Gestaltung deines Themes ab. In unserem Beispiel wird zum Beispiel nur die Schriftart ge\u00e4ndert, aber kein grauer Hintergrund eingef\u00fcgt.<\/p>\n<h4>Option 2: Verwende <code>&lt;pre&gt;<\/code> Tags f\u00fcr l\u00e4ngere Codebl\u00f6cke<\/h4>\n<p>L\u00e4ngere Codeschnipsel verdienen eigene Bl\u00f6cke, die von dem Inhalt, den du in Abs\u00e4tzen schreibst, getrennt sind. Daf\u00fcr empfehlen wir dir, die <code>&lt;pre&gt;<\/code> Tags zu verwenden.<\/p>\n<p>Das Hinzuf\u00fcgen eines <code>&lt;pre&gt;<\/code> Tags ist genauso wie bei den <code>&lt;code&gt;<\/code> Tags, aber du hast mehr Platz zum Einf\u00fcgen deines Codes.<\/p>\n<p>Gehe zu einem Beitrag und \u00f6ffne den <strong>Code-<\/strong> (Gutenberg) oder <strong>Text-Editor<\/strong> (klassisches WordPress). F\u00fcge den Code, den du anzeigen m\u00f6chtest, ein oder tippe ihn ein. Umgib den Code dann mit diesen Tags:<\/p>\n<p><code>&lt;pre&gt; &lt;\/pre&gt;<\/code><\/p>\n<figure id=\"attachment_151586\" aria-describedby=\"caption-attachment-151586\" style=\"width: 1099px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151586 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.d24206ad63c045479f1ad67aa2e5ae5d.jpg\" alt=\"Pre-Tags\" width=\"1099\" height=\"596\"><figcaption id=\"caption-attachment-151586\" class=\"wp-caption-text\">Pre-Tags<\/figcaption><\/figure>\n<p>Wechsle zum <strong>visuellen<\/strong> Editor, um zu sehen, wie es aussieht. Du wirst feststellen, dass der Textabschnitt mit dem Label <strong>&#8222;Preformatted&#8220;<\/strong> versehen ist. Das ist genau das, was der <code>&lt;pre&gt;<\/code> Tag bewirken soll.<\/p>\n<figure id=\"attachment_151587\" aria-describedby=\"caption-attachment-151587\" style=\"width: 1021px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151587 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4bc9f2cabf7b45aeba2da63e5bd1f96f.jpg\" alt=\"W\u00e4hle die Option preformatted\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-151587\" class=\"wp-caption-text\">W\u00e4hle die Option preformatted<\/figcaption><\/figure>\n<p>Klicke auf <strong>Ver\u00f6ffentlichen<\/strong> oder <strong>Aktualisieren<\/strong> und wechsle dann zum Frontend, um deinen Code in seiner urspr\u00fcnglichen Form zu sehen. \u00c4hnlich wie bei den <code>&lt;code&gt;<\/code> -Tags sind auch die <code>&lt;pre&gt;<\/code> -Tags schlecht zu formatieren, so dass du mit dem einfachsten Aussehen dastehst. Es gibt jedoch M\u00f6glichkeiten, sie selbst zu formatieren.<\/p>\n<figure id=\"attachment_151588\" aria-describedby=\"caption-attachment-151588\" style=\"width: 1177px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151588 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.12b9304ed5de42298a6474f01813d716.jpg\" alt=\"Frontend-Ergebnisse\" width=\"1177\" height=\"759\"><figcaption id=\"caption-attachment-151588\" class=\"wp-caption-text\">Frontend-Ergebnisse<\/figcaption><\/figure>\n<h5>Tipps zur Gestaltung von &lt;pre&gt; Tags<\/h5>\n<p>Die <code>&lt;pre&gt;<\/code> Tags sind weniger stabil als die <code>&lt;code&gt;<\/code> Tags, daher kann es je nach Art des Codes, den du anzeigen willst, zu Schwierigkeiten kommen.<\/p>\n<p>Mit diesen Tipps kannst du das Aussehen verbessern:<\/p>\n<ul>\n<li>Versuche, Zeilenumbr\u00fcche zu entfernen oder ganz zu vermeiden, da das <code>&lt;pre&gt;<\/code> Tag diese oft nicht erkennt. Im Allgemeinen reagiert es schlecht auf zu viele Zeilenumbr\u00fcche.<\/li>\n<li>\u00dcberlege dir, ob du eine <code>overflow-x:auto;<\/code> Eigenschaft in dein CSS einf\u00fcgst, um den Code des <code>&lt;pre&gt;<\/code> Tags um eine Bildlauffunktion zu erweitern. Dies hilft bei ausufernden Inhalten, da das <code>&lt;pre&gt;<\/code> Tag selbst deinen Code von der Seite weglaufen l\u00e4sst.<\/li>\n<li>Verwende einzeilige Schriftarten.<\/li>\n<\/ul>\n<p>Du kannst auch die Textformatierung und die Box hinter dem Code stilisieren. Hier ist eine erste Vorlage, die du <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/\">in deine CSS-Datei einf\u00fcgen<\/a> kannst:<\/p>\n<pre><code class=\"language-css\">article pre{\nbackground:#ffffff;\nborder:3px #eee solid;\nborder-top:30px #eee solid;\nfont-family:Consolas, courier;\nfont-size:0.8em;\nwhite-space:pre;\noverflow-x:auto;\n}<\/code><\/pre>\n<h3>Methode 6: Verwendung eines Markdown-Editors, der mit WordPress verbunden ist<\/h3>\n<p>Mit Markdown-Editoren kannst du nicht nur schneller tippen und formatieren, viele von ihnen lassen sich auch direkt mit WordPress verbinden, sodass du deinen Text direkt aus dem Editor heraus ver\u00f6ffentlichen kannst.<\/p>\n<p>Viele Autorinnen und Autoren entscheiden sich f\u00fcr Markdown-Editoren, weil sie so schnell Inhalte erstellen k\u00f6nnen. Gl\u00fccklicherweise bieten einige dieser Editoren Markdown f\u00fcr Codebl\u00f6cke an, d. h. du kannst den Code im Markdown-Editor anzeigen und ihn dann direkt an WordPress zur Ver\u00f6ffentlichung senden.<\/p>\n<p>Bedenke, dass <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\">normale Texteditoren<\/a> (wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-sublime-text-benutzt\/\">Sublime Text<\/a>) die Integrit\u00e4t des Codes nicht bewahren, wenn er zur Ver\u00f6ffentlichung in WordPress \u00fcbertragen wird. Und <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlose-html-editoren\/\">HTML-Editoren<\/a> eignen sich zwar hervorragend zum Schreiben und Speichern von Code, bieten aber auch nicht die Hervorhebungsfunktionen, die erforderlich sind, um Code f\u00fcr die Ver\u00f6ffentlichung in WordPress zu erhalten.<\/p>\n<p>Es gibt eine <a href=\"https:\/\/kinsta.com\/de\/blog\/markdown-editoren\/\">Vielzahl von Markdown-Editoren<\/a>, aber die idealen L\u00f6sungen haben zwei Eigenschaften:<\/p>\n<ol>\n<li>Direktes Exportieren zu WordPress<\/li>\n<li>Markdown f\u00fcr Code-Hervorhebung<\/li>\n<\/ol>\n<p>Du kannst dich aber auch f\u00fcr einen Markdown-Editor mit HTML-Export entscheiden, wenn du den direkten WordPress-Export nicht magst.<\/p>\n<p>Die besten Markdown-Editoren mit beiden Funktionen sind:<\/p>\n<ul>\n<li><a href=\"https:\/\/ulysses.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ulysses<\/a> (Mac und iOS)<\/li>\n<li><a href=\"https:\/\/bywordapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ByWord<\/a> (Mac und iOS)<\/li>\n<li><a href=\"https:\/\/obsidian.md\/\" target=\"_blank\" rel=\"noopener noreferrer\">Obsidian<\/a> (Mac, Windows, Linux, und mehr)<\/li>\n<\/ul>\n<p>Ulysses und ByWord sind Premium-Apps, w\u00e4hrend Obsidian sowohl eine kostenlose als auch eine Premium-Version hat.<\/p>\n<p>In der folgenden Anleitung verwenden wir Ulysses.<\/p>\n<h4>Schritt 1: Hinzuf\u00fcgen eines Longform Code Blocks in Ulysses<\/h4>\n<p>W\u00e4hrend du ein Dokument in Ulysses erstellst, gibst du <code>\"<\/code> markdown &#8211; das sind zwei Apostrophe &#8211; ein, wenn du sofort einen Code-Highlighter-Block in das Dokument einf\u00fcgen m\u00f6chtest.<\/p>\n<p>Diese Markdown-Methode ist f\u00fcr l\u00e4ngere Codebl\u00f6cke gedacht. In der Mitte eines Absatzes ist sie nicht verwendbar, du musst also eine neue Zeile erstellen, damit die Markierung aktiviert wird.<\/p>\n<figure id=\"attachment_151589\" aria-describedby=\"caption-attachment-151589\" style=\"width: 2000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151589 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gif-for-code-block.14390a79e7064955b03f88869ec1ffee.gif\" alt=\"Neuer Ulysses Code Markdown\" width=\"2000\" height=\"1126\"><figcaption id=\"caption-attachment-151589\" class=\"wp-caption-text\">Ulysses Code Markdown<\/figcaption><\/figure>\n<p>Sobald der Code-Highlighter erscheint, kannst du alles, was du willst, eintippen oder einf\u00fcgen.<\/p>\n<figure id=\"attachment_151590\" aria-describedby=\"caption-attachment-151590\" style=\"width: 1015px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151590 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5f94d159066484fb7b70b16a1c3c73a.jpg\" alt=\"Code in den Ulysses-Highlighter einf\u00fcgen\" width=\"1015\" height=\"543\"><figcaption id=\"caption-attachment-151590\" class=\"wp-caption-text\">Code in den Ulysses-Highlighter einf\u00fcgen<\/figcaption><\/figure>\n<p>Du kannst den Codeblock auch aktivieren, indem du auf den Men\u00fcpunkt <strong>Markdown<\/strong> (drei horizontale Punkte) klickst und dann die Option <strong>Code<\/strong> ausw\u00e4hlst.<\/p>\n<figure id=\"attachment_151592\" aria-describedby=\"caption-attachment-151592\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151592 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.81ab2e958f054c0798abc43d606aca57.jpg\" alt=\"Verwende das Markdown-Men\u00fc, um die Option Code auszuw\u00e4hlen\" width=\"937\" height=\"398\"><figcaption id=\"caption-attachment-151592\" class=\"wp-caption-text\">Verwende das Markdown-Men\u00fc, um die Option Code auszuw\u00e4hlen<\/figcaption><\/figure>\n<p>Nachdem du auf diesen Men\u00fcpunkt geklickt hast, erscheint das Feld f\u00fcr den Code-Highlighter an der Stelle, an der sich der Cursor zuletzt befand.<\/p>\n<figure id=\"attachment_151593\" aria-describedby=\"caption-attachment-151593\" style=\"width: 977px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151593 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.41e360b297fd4c60be68ccb8bcf0cccf.jpg\" alt=\"Leerer Code-Highlighter\" width=\"977\" height=\"285\"><figcaption id=\"caption-attachment-151593\" class=\"wp-caption-text\">Leerer Code-Highlighter<\/figcaption><\/figure>\n<p>Um Codeschnipsel innerhalb von Abs\u00e4tzen zu platzieren, wendest du dich an die <code>``<\/code> markdown (die fast genauso aussieht, aber eigentlich sind es zwei akute\/graue Akzente statt Apostrophe).<\/p>\n<h4>Schritt 3: Exportieren nach WordPress<\/h4>\n<p>Sobald du dein Dokument fertig hast, ist es an der Zeit, alles nach WordPress zu exportieren.<\/p>\n<p>Das Tolle an Markdown-Editoren, die mit WordPress verbunden sind, ist, dass sie die Codebl\u00f6cke w\u00e4hrend der \u00dcbertragung beibehalten. Du wirst also sch\u00f6n formatierte Code-Highlighter sehen, die du in WordPress ver\u00f6ffentlichen kannst.<\/p>\n<figure id=\"attachment_151594\" aria-describedby=\"caption-attachment-151594\" style=\"width: 996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151594 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.59962c045f204e8990253665628656d0.jpg\" alt=\"Der Code-Highlighter bleibt in WordPress derselbe\" width=\"996\" height=\"723\"><figcaption id=\"caption-attachment-151594\" class=\"wp-caption-text\">Der Code-Highlighter bleibt in WordPress derselbe<\/figcaption><\/figure>\n<p>In Ulysses gehst du zum oberen Rand des Dokuments, um die Symbolleiste zu finden. Klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichungsvorschau<\/strong>.<\/p>\n<figure id=\"attachment_151595\" aria-describedby=\"caption-attachment-151595\" style=\"width: 981px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.927b4b9ed6d54119baebba453248cf41.jpg\" alt=\"W\u00e4hle die Schaltfl\u00e4che Ver\u00f6ffentlichungsvorschau\" width=\"981\" height=\"618\"><figcaption id=\"caption-attachment-151595\" class=\"wp-caption-text\">W\u00e4hle die Schaltfl\u00e4che Ver\u00f6ffentlichungsvorschau<\/figcaption><\/figure>\n<p>Daraufhin wird ein Dropdown-Men\u00fc angezeigt, in dem du die Plattform und die Website ausw\u00e4hlen kannst, auf der du ver\u00f6ffentlichen m\u00f6chtest. Du kannst auch die Option <strong>&#8222;Konten<\/strong> <strong>verwalten&#8220;<\/strong> in diesem Men\u00fc verwenden, um dich vor dem Export bei einer WordPress-Website anzumelden.<\/p>\n<p>Sobald du die richtige Website ausgew\u00e4hlt hast, klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>.<\/p>\n<figure id=\"attachment_151596\" aria-describedby=\"caption-attachment-151596\" style=\"width: 948px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151596 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e00fbece9dc94fea8e8a5e63d1336717.jpg\" alt=\"Ein Konto ausw\u00e4hlen und ver\u00f6ffentlichen\" width=\"948\" height=\"704\"><figcaption id=\"caption-attachment-151596\" class=\"wp-caption-text\">Ein Konto ausw\u00e4hlen und ver\u00f6ffentlichen<\/figcaption><\/figure>\n<p>Gib den Titel des Beitrags, den Zeitplan und alle anderen Informationen ein, die du m\u00f6chtest, wie Kategorien, Tags und besondere Bilder.<\/p>\n<p>Das Wichtigste ist jedoch, den <strong>Status<\/strong> auf <strong>&#8222;Entwurf&#8220;<\/strong> zu setzen, damit du den Beitrag nicht ver\u00f6ffentlichst, ohne ihn vorher in WordPress zu \u00fcberpr\u00fcfen.<\/p>\n<p>Klicke auf <strong>OK<\/strong>, um fortzufahren.<\/p>\n<figure id=\"attachment_151597\" aria-describedby=\"caption-attachment-151597\" style=\"width: 915px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b14f638aa5d94d789d323bfc861dafca.jpg\" alt=\"W\u00e4hle einen Status und klicke dann auf OK\" width=\"915\" height=\"649\"><figcaption id=\"caption-attachment-151597\" class=\"wp-caption-text\">W\u00e4hle einen Status und klicke dann auf OK<\/figcaption><\/figure>\n<p>Innerhalb weniger Sekunden platziert Ulysses das gesamte Dokument in einem neuen WordPress-Beitrag (m\u00f6glicherweise musst du dich in deine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Administration<\/a> einloggen, wenn das Fenster erscheint).<\/p>\n<p>Du siehst, dass die Codebl\u00f6cke bereits konfiguriert und bereit zum Ver\u00f6ffentlichen sind. Klicke auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>, um das Dokument zu ver\u00f6ffentlichen.<\/p>\n<figure id=\"attachment_151598\" aria-describedby=\"caption-attachment-151598\" style=\"width: 1202px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151598 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.9b10519d98304e4b83dfefbefe2955fe.jpg\" alt=\"Codebl\u00f6cke im WordPress-Editor\" width=\"1202\" height=\"788\"><figcaption id=\"caption-attachment-151598\" class=\"wp-caption-text\">Codebl\u00f6cke im WordPress-Editor<\/figcaption><\/figure>\n<p>Im Frontend siehst du, dass die Inline-Codefragmente und die gr\u00f6\u00dferen Codebl\u00f6cke sch\u00f6n hervorgehoben sind und die Formatierung des Codes beibehalten wurde.<\/p>\n<figure id=\"attachment_151599\" aria-describedby=\"caption-attachment-151599\" style=\"width: 916px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.7fe2b1887f1644d7a819d9a68d18481b.jpg\" alt=\"Frontend-Ergebnisse\" width=\"916\" height=\"881\"><figcaption id=\"caption-attachment-151599\" class=\"wp-caption-text\">Frontend-Ergebnisse<\/figcaption><\/figure>\n\n<h2>Zusammenfassung<\/h2>\n<p>Es gibt verschiedene Methoden, um Code in WordPress richtig darzustellen, und es h\u00e4ngt oft von dem verwendeten WordPress-Editor, der gew\u00fcnschten Code-Sprache und der Art und Weise ab, wie du den Code anzeigen und formatieren m\u00f6chtest. Wenn du dich zum Beispiel f\u00fcr ein Plugin entscheidest, kannst du mit Sicherheit kreativere Formatierungen vornehmen als mit dem Standard-Codeblock im WordPress Gutenberg-Editor.<\/p>\n<p>In diesem Artikel haben wir viele verschiedene Methoden vorgestellt, wie du Code in WordPress anzeigen kannst.<\/p>\n<p>Wir empfehlen dir, mit Methode 1 zu beginnen und dich durchzuarbeiten. Methode 2 eignet sich gut, wenn du nach mehr Styling-Optionen suchst, und die Methoden 3-5 sind nur in bestimmten Situationen n\u00fctzlich. Methode 6 ist eine Art Bonusl\u00f6sung f\u00fcr diejenigen, die Markdown-Editoren dem direkten Schreiben in WordPress vorziehen.<\/p>\n<p>Egal, f\u00fcr welche Methode du dich entscheidest, ein <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">zuverl\u00e4ssiger Hosting-Anbieter<\/a> kann dir helfen, deine Website noch weiter zu verbessern. <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">Die WordPress-Hosting-L\u00f6sungen von Kinsta<\/a> bieten <a href=\"https:\/\/kinsta.com\/de\/preise\/\">Angebote f\u00fcr Websites<\/a> aller Formen und Gr\u00f6\u00dfen. Die benutzerfreundliche Plattform &#8211; <a href=\"https:\/\/kinsta.com\/de\/mykinsta\/\">MyKinsta<\/a>, ein eigenes Admin-Dashboard &#8211; macht die Bearbeitung aller Teile deiner Website und ihrer Dateien zu einem Kinderspiel. Au\u00dferdem profitierst du von der erstklassigen <a href=\"https:\/\/kinsta.com\/de\/blog\/cloud-plattform-fuer-entwickler\/\">Geschwindigkeit<\/a>, <a href=\"https:\/\/kinsta.com\/de\/cloudflare-integration\/\">Sicherheit<\/a> und dem <a href=\"https:\/\/kinsta.com\/de\/kinsta-support\/\">Support<\/a> von Kinsta.<\/p>\n<p>Hast du schon einmal versucht, Code in WordPress anzuzeigen? Wenn ja, welche Methode hat f\u00fcr dich am besten funktioniert? Lass es uns in den Kommentaren unten wissen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zu lernen, wie man Code in WordPress anzeigt, ist f\u00fcr Blogger\/innen und Inhaltsersteller\/innen, die st\u00e4ndig Code f\u00fcr ihre Leser\/innen online ver\u00f6ffentlichen, sehr wichtig. Computercode ist so &#8230;<\/p>\n","protected":false},"author":199,"featured_media":61774,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999,1010],"class_list":["post-61773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung","topic-wordpress-tipps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst)\" \/>\n<meta property=\"og:description\" content=\"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T13:21:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T11:23:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"37\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst)\",\"datePublished\":\"2023-05-17T13:21:48+00:00\",\"dateModified\":\"2023-08-23T11:23:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/\"},\"wordCount\":5548,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/\",\"name\":\"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg\",\"datePublished\":\"2023-05-17T13:21:48+00:00\",\"dateModified\":\"2023-08-23T11:23:20+00:00\",\"description\":\"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Tipps\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-tipps\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst) - Kinsta\u00ae","description":"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst)","og_description":"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-05-17T13:21:48+00:00","article_modified_time":"2023-08-23T11:23:20+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Jeremy Holcombe","Gesch\u00e4tzte Lesezeit":"37\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst)","datePublished":"2023-05-17T13:21:48+00:00","dateModified":"2023-08-23T11:23:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/"},"wordCount":5548,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/","name":"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg","datePublished":"2023-05-17T13:21:48+00:00","dateModified":"2023-08-23T11:23:20+00:00","description":"Lerne, wie du mit WordPress Code anzeigen kannst, mit Plugins, Shortcodes und sogar Encoder-Tools. Wir erkunden auch die Verwendung von Markdown-Software.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-display-code.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-code-anzeigen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Tipps","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-tipps\/"},{"@type":"ListItem","position":3,"name":"Wie man Code in WordPress anzeigt (und ihn h\u00fcbsch aussehen l\u00e4sst)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/61773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=61773"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/61773\/revisions"}],"predecessor-version":[{"id":61958,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/61773\/revisions\/61958"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61773\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/61774"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=61773"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=61773"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=61773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}