{"id":50776,"date":"2023-05-17T14:21:46","date_gmt":"2023-05-17T13:21:46","guid":{"rendered":"https:\/\/kinsta.com\/dk\/?p=50776&#038;preview=true&#038;preview_id=50776"},"modified":"2023-08-24T10:15:00","modified_gmt":"2023-08-24T09:15:00","slug":"wordpress-vis-kode","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/","title":{"rendered":"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud)"},"content":{"rendered":"<p>At l\u00e6re at vise kode i WordPress er afg\u00f8rende for bloggere og indholdsskabere, der konsekvent offentligg\u00f8r kode online, som deres l\u00e6sere kan bruge. <a href=\"https:\/\/kinsta.com\/dk\/blog\/redigeres-wordpress-kode\/\">Computerkode<\/a> gengiver efter design noget nyt p\u00e5 frontend af et websted i stedet for de tags, skr\u00e5streger og parenteser, du finder i de faktiske kodestumper.<\/p>\n<p>Dette udg\u00f8r imidlertid et problem for dem, der skriver om udvikling og design, da du har brug for en m\u00e5de at vise koden korrekt p\u00e5, uden at den udf\u00f8rer sit egentlige arbejde, f.eks. at oprette en knap eller tilf\u00f8je styling til en paragrafblok.<\/p>\n<p>Kort sagt, hvis du skriver et blogindl\u00e6g og l\u00e6gger et eksempel p\u00e5 et kodestykke deri, skal du forhindre, at koden rent faktisk virker! P\u00e5 denne m\u00e5de kan l\u00e6serne se koden i sin r\u00e5 form, se koden i en p\u00e6nt formateret blok og endda kopiere indholdet til brug i deres udviklingsarbejde.<\/p>\n<p>I denne vejledning viser vi dig pr\u00e6cis, hvordan du kan vise kode i WordPress (uanset <a href=\"https:\/\/kinsta.com\/blog\/how-to-customize-wordpress-theme\/\">dit WordPress-tema<\/a>) ved hj\u00e6lp af flere forskellige metoder, og vi hj\u00e6lper dig med at beslutte, hvilken metode der fungerer bedst for din arbejdsgang.<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>Hvad sker der, n\u00e5r du tilf\u00f8jer almindelig kode i WordPress?<\/h2>\n<p>Du undrer dig m\u00e5ske over, hvad der ville ske, hvis du skrev noget kode i den visuelle WordPress-editor. Du roder jo ikke med tekst- eller kodeeditorerne, s\u00e5 burde dit kodestykke ikke fungere fint?<\/p>\n<p>Sandsynligvis ikke.<\/p>\n\n<p>Her er nogle af de us\u00e6dvanlige resultater, der kan forekomme:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Koden vises delvist, idet dele af koden vises p\u00e5 forsiden af indl\u00e6gget, mens andre forsvinder. Dette ser uprofessionelt ud for bes\u00f8gende; det betyder, at din kode ikke er korrekt.<\/li>\n<li>Der vises slet ikke noget, og koden forsvinder helt fra synet i backend&#8217;en og viser ikke noget p\u00e5 forsiden af dit indl\u00e6g.<\/li>\n<li>Du ser m\u00e6rkelig formatering &#8211; ofte noget, der ikke er brugervenligt eller kan offentligg\u00f8res for et publikum.<\/li>\n<li>Koden gengives m\u00e5ske kun delvist.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>For at illustrere et par af disse resultater bruger vi f\u00f8lgende <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML-kodesnipsel<\/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>Dette s\u00e6rlige kodestykke <a href=\"https:\/\/kinsta.com\/blog\/html-best-practices\/\">bruger HTML-stylingelementer<\/a> til at producere tre gr\u00f8nne indholdsblokke med header og afsnit.<\/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=\"Klik for at skrive kode og vise det i WordPress kode\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Klik for at skrive kode<\/figcaption><\/figure>\n<p>Vi vil dog gerne vise den <em>r\u00e5<\/em> kode i et blogindl\u00e6g, og ikke have den til at blive gengivet i disse blokke.<\/p>\n<p>Her er resultaterne, hvis vi inds\u00e6tter koden direkte i WordPress <a href=\"https:\/\/kinsta.com\/dk\/blog\/gutenberg-wordpress-editor\/\">Gutenberg Block Editor<\/a>:<\/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-resultater for at vise WordPress-kode\" width=\"928\" height=\"752\"><figcaption id=\"caption-attachment-151527\" class=\"wp-caption-text\">Gutenberg Editor resultater fra HTML-kode<\/figcaption><\/figure>\n<p>Som du kan se, fors\u00f8ger WordPress at bruge koden til sit hovedform\u00e5l: at generere indhold &#8211; men den fratager koden sin styling, s\u00e5 den giver ikke det resultat, som vi \u00f8nskede at vise l\u00e6serne.<\/p>\n<p>For at undg\u00e5 situationer som denne, opfordrer vi dig til i stedet at bruge en af de metoder, der er anf\u00f8rt nedenfor, til at vise kode.<\/p>\n<h2>S\u00e5dan viser du kode p\u00e5 dit WordPress-websted (6 metoder)<\/h2>\n<p>Disse metoder er listet fra det nemmeste til det sv\u00e6reste, og vi har nogle s\u00e6rlige metoder til dem, der nyder at skrive kode og indhold i markdown-editorer (i mods\u00e6tning til WordPress).<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Metode 1: Brug af Gutenberg-blokeditor (standard)<\/h3>\n<p>Hvis du vil \u00f8ve dig i at vise kode i WordPress, kan du bruge f\u00f8lgende kodestump, som <a href=\"https:\/\/kinsta.com\/blog\/learn-html\/\">bruger HTML<\/a> og intern CSS til at producere et simpelt resultat med en bl\u00e5 overskrift og et sort afsnit:<\/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>N\u00e5r koden s\u00e6ttes i gang, viser den dette p\u00e5 frontend:<\/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-kode, der viser sjove fakta om otters\" width=\"979\" height=\"359\"><figcaption id=\"caption-attachment-151528\" class=\"wp-caption-text\">Resultater viser en titel og br\u00f8dtekst med styling<\/figcaption><\/figure>\n<p>Men ved at f\u00f8lge denne vejledning l\u00e6rer du at vise selve den r\u00e5 kode, ikke hvad koden skal vise p\u00e5 frontend.<\/p>\n<h4>Trin 1: Tilf\u00f8j en kodeblok i WordPress<\/h4>\n<p>WordPress Gutenberg-editoren har allerede en indbygget kodeblok, som giver dig mulighed for at vise kodestumper uden at miste noget af formateringen eller faktisk aktivere koden.<\/p>\n<p>For at begynde skal du \u00e5bne et <a href=\"https:\/\/kinsta.com\/blog\/wordpress-get-post-id\/\">indl\u00e6g eller en side<\/a> i WordPress og derefter klikke p\u00e5 en af knapperne <strong>Tilf\u00f8j blok<\/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=\"tilf\u00f8j blok knapper\" width=\"941\" height=\"486\"><figcaption id=\"caption-attachment-151529\" class=\"wp-caption-text\">Knapper til Tilf\u00f8j blok<\/figcaption><\/figure>\n<p>Klik p\u00e5 en af knapperne Tilf\u00f8j blok<\/p>\n<p>Dette viser den tilg\u00e6ngelige samling af blokke. Du kan s\u00f8ge efter blokken Kode eller skrive et n\u00f8gleord som &#8220;kode&#8221; i s\u00f8gelinjen.<\/p>\n<p>N\u00e5r du ser blokken <strong>Kode<\/strong> (med parentesikoner), skal du klikke p\u00e5 den for at inds\u00e6tte en del af koden i indl\u00e6gget.<\/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-vindue til tilf\u00f8jelse af en blok, med mulighed for kodeblok\" width=\"939\" height=\"411\"><figcaption id=\"caption-attachment-151530\" class=\"wp-caption-text\">Popup-vindue til tilf\u00f8jelse af en blok, med mulighed for kodeblok<\/figcaption><\/figure>\n<p>Du b\u00f8r nu se et felt med indledningen <strong>&#8220;Skriv kode&#8230;&#8221;<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Klik for at skrive kode\" width=\"937\" height=\"437\"><\/p>\n<p>WordPress Gutenberg-editoren underst\u00f8tter markdown, s\u00e5 du kan ogs\u00e5 finde og inds\u00e6tte Code-blokken ved at skrive en skr\u00e5streg fremad (<code>\/<\/code>) i editoren og derefter begynde at skrive &#8220;C&#8221; eller &#8220;Code&#8221;. WordPress vil derefter vise alle relevante blokke, hvilket giver dig en hurtigere m\u00e5de at inds\u00e6tte dem p\u00e5.<\/p>\n<p>Det er let at forveksle Kodeblokken og den brugerdefinerede HTML-blok. Men Custom HTML-blokken er til at tilf\u00f8je brugerdefineret HTML til rendering p\u00e5 frontend, ikke til at tilf\u00f8je r\u00e5 kode til visning.<\/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=\"Brug af markdown til at kalde blokken Kode\" width=\"933\" height=\"380\"><figcaption id=\"caption-attachment-151532\" class=\"wp-caption-text\">Brug af markdown til at kalde blokken Kode<\/figcaption><\/figure>\n<h4>Trin 2: Inds\u00e6t visningskode i feltet Kodeblok<\/h4>\n<p>Nu er det tid til at kopiere den kode, du gerne vil vise, og inds\u00e6tte den i feltet, hvor der st\u00e5r <strong>&#8220;Write Code&#8230;&#8221; (Skriv kode&#8230;)<\/strong>.<\/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=\"Skriv eller inds\u00e6t den kode, der skal vises\" width=\"936\" height=\"405\"><figcaption id=\"caption-attachment-151533\" class=\"wp-caption-text\">Skriv eller inds\u00e6t den kode, der skal vises<\/figcaption><\/figure>\n<p>Din kode vises nu inde i feltet.<\/p>\n<p>Det gode ved blokken Kode er, at den respekterer alle mellemrum og tabulatorer, som du allerede havde i kodestumpen. Som f\u00f8lge heraf b\u00f8r den ikke se anderledes ud end den kilde, du kopierede den fra.<\/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=\"Indsat uddrag i kodeblokken for at vise WordPress-kode\" width=\"919\" height=\"840\"><figcaption id=\"caption-attachment-151534\" class=\"wp-caption-text\">Indsat uddrag i kodeblokken<\/figcaption><\/figure>\n<h4>Trin 3: Offentligg\u00f8r og se resultaterne<\/h4>\n<p>For at vise din kode p\u00e5 dit WordPress-indl\u00e6g eller din WordPress-side skal du afslutte processen ved at klikke p\u00e5 knappen <strong>Udgiv<\/strong>.<\/p>\n<p>Du kan ogs\u00e5 f\u00e5 en id\u00e9 om, hvordan det ser ud, f\u00f8r du offentligg\u00f8r, ved at v\u00e6lge <strong>Vis udskrift<\/strong>.<\/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=\"Klik p\u00e5 Udgiv for at f\u00e5 vist WordPress-kode\" width=\"929\" height=\"499\"><figcaption id=\"caption-attachment-151535\" class=\"wp-caption-text\">Klik p\u00e5 Udgiv<\/figcaption><\/figure>\n<p>N\u00e5r du har trykket p\u00e5 knappen <strong>Udgiv<\/strong>, skal du bes\u00f8ge live-versionen af det p\u00e5g\u00e6ldende indl\u00e6g for at bekr\u00e6fte, at din kodeklump vises som r\u00e5kode.<\/p>\n<p>Som du kan se, er blokken Kode ret enkel, men den giver den n\u00f8dvendige funktionalitet til at bevare formateringen, n\u00e5r du udgiver kode i blogindl\u00e6g.<\/p>\n<p>Tag et kig p\u00e5 nedenst\u00e5ende sk\u00e6rmbillede. I vores eksempel her er der intet \u00e6ndret i forhold til den oprindelige kodestump; den er blot blevet pr\u00e6senteret p\u00e5 frontend i en gr\u00e5 boks.<\/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=\"Vist WordPress kode p\u00e5 frontend\" width=\"1031\" height=\"1190\"><figcaption id=\"caption-attachment-151536\" class=\"wp-caption-text\">Vist kode p\u00e5 frontend<\/figcaption><\/figure>\n<h4>Trin 4: Overvej at formatere kodeblokken<\/h4>\n<p>For at f\u00e5 kodeblokken til at skille sig lidt ud, kan du overveje at \u00e6ndre dens udseende i forhold til standarden.<\/p>\n<p>For at f\u00e5 vist stilindstillingerne for blokken skal du v\u00e6lge blokken <strong>Kode<\/strong> og derefter v\u00e6lge knappen <strong>Indstillinger<\/strong> (tandhjulsikon). Dette \u00e5bner fanen <strong>Blok<\/strong>, som kun viser blokindstillingerne for den valgte blok &#8211; i dette tilf\u00e6lde blokken Kode.<\/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=\"G\u00e5 til Bloker indstillinger for kodeformatering og for at vise WordPress-kode\" width=\"1056\" height=\"814\"><figcaption id=\"caption-attachment-151537\" class=\"wp-caption-text\">G\u00e5 til blokindstillinger for kodeformatering<\/figcaption><\/figure>\n<p>Du kan style blokken Kode som du vil, med muligheder for at \u00e6ndre ting som tekst- og baggrundsfarver.<\/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=\"Rediger farve- og baggrundsindstillinger\" width=\"1044\" height=\"758\"><figcaption id=\"caption-attachment-151538\" class=\"wp-caption-text\">Rediger farve- og baggrundsindstillinger<\/figcaption><\/figure>\n<p>Du kan ogs\u00e5:<\/p>\n<ul>\n<li>Du kan ogs\u00e5 \u00e6ndre st\u00f8rrelsen p\u00e5 teksten<\/li>\n<li>Tilf\u00f8je padding og marginer til kodeboksen<\/li>\n<li>Medtage en kant med en brugerdefineret bredde og farve<\/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=\"Indstillinger for st\u00f8rrelse, dimensioner og norder\" width=\"1050\" height=\"806\"><figcaption id=\"caption-attachment-151539\" class=\"wp-caption-text\">Indstillinger for st\u00f8rrelse, dimensioner og border<\/figcaption><\/figure>\n<p>Som altid skal du klikke p\u00e5 knappen <strong>Udgiv<\/strong>, n\u00e5r du er f\u00e6rdig med at redigere blokken, og derefter se resultaterne p\u00e5 frontend af dit <a href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-brugerdefinerede-indlaegstyper\/\">WordPress-indl\u00e6g<\/a>.<\/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-resultater for at vise WordPress-kode\" width=\"1045\" height=\"1340\"><figcaption id=\"caption-attachment-151540\" class=\"wp-caption-text\">Resultater p\u00e5 frontend<\/figcaption><\/figure>\n<h3>Metode 2: Brug af et plugin<\/h3>\n<p>En anden m\u00e5de at vise kode p\u00e5 WordPress p\u00e5 er ved at <a href=\"https:\/\/kinsta.com\/blog\/how-to-install-wordpress-plugins\/\">installere et plugin<\/a>.<\/p>\n<p>Denne metode kan virke en smule overfl\u00f8dig i betragtning af at WordPress allerede har en indbygget kodeblok, men nogle plugins tilbyder yderligere funktioner og formateringsv\u00e6rkt\u00f8jer, der g\u00f8r det v\u00e6rd at arbejde med et plugin. Kort sagt kan du g\u00f8re dine kodeblokke smukkere end det, du ville f\u00e5 med standard Gutenberg-kodeblokken.<\/p>\n<p>Desuden kan nogle brugere af Classic WordPress Editor m\u00e5ske finde det lettere at partere med et plugin, da det er lidt vanskeligere at vise kode i Classic Editor.<\/p>\n<p>Til at begynde med skal du v\u00e6lge et &#8220;syntakshighlighter&#8221;-plugin, hvilket er en finere m\u00e5de at sige, at plugin&#8217;et vil fremh\u00e6ve din kildekode og holde dens formatering intakt.<\/p>\n<p>Her er nogle velrenommerede plugins til visning af kode p\u00e5 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>Vi vil bruge Enlighter-plugin&#8217;et i denne vejledning, da det tilbyder muligheder for at markere, hvilke typer kode du viser i dine kodebokse, sammen med mange andre stylingfunktioner. Du er dog mere end velkommen til at pr\u00f8ve de andre, da de alle for det meste g\u00f8r det samme.<\/p>\n<h4>Trin 1: Installer et Syntax Highlighter-plugin<\/h4>\n<p>Installer Enlighter &#8211; Customizable Syntax Highlighter plugin p\u00e5 dit WordPress-websted ved hj\u00e6lp af din foretrukne <a href=\"https:\/\/kinsta.com\/blog\/how-to-install-wordpress-plugins\/\">plugin-installationsmetode<\/a>.<\/p>\n<p>Efter aktivering er plugin&#8217;et klar til at inds\u00e6tte kode i ethvert indl\u00e6g \/ side med en Gutenberg-blok eller Classic Editor <strong>Insert-knap<\/strong>.<\/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=\"Enlighter-plugin'et\" width=\"945\" height=\"309\"><figcaption id=\"caption-attachment-151541\" class=\"wp-caption-text\">Enlighter-plugin&#8217;et<\/figcaption><\/figure>\n<h4>Trin 2: Inds\u00e6t Enlighter-kildekodeblokken i et indl\u00e6g<\/h4>\n<p>Hvis du bruger WordPress Gutenberg Block Editor, skal du \u00e5bne et indl\u00e6g, hvor du gerne vil vise kode. Klik p\u00e5 en af knapperne <strong>Tilf\u00f8j blok<\/strong> (+ ikon) for at vise samlingen af tilg\u00e6ngelige blokke.<\/p>\n<p>Gennemse eller indtast et n\u00f8gleord for <strong>Enlighten Sourcecode-blokken<\/strong>. Klik p\u00e5 den p\u00e5g\u00e6ldende blok for at inds\u00e6tte den i indl\u00e6gget.<\/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 Sourcecode Block til at vise WordPress kode\" width=\"997\" height=\"575\"><figcaption id=\"caption-attachment-151542\" class=\"wp-caption-text\">Enlighter Sourcecode-blok<\/figcaption><\/figure>\n<h4>Trin 3: Inds\u00e6t kode i Syntax Highlighter-blokken<\/h4>\n<p><strong>Enlighter Highlighter-blokken<\/strong> vises derefter i blokredigeringsprogrammet med en titel for <strong>&#8220;Generic Highlighting&#8221;<\/strong> og et felt til <strong>&#8220;Insert Sourcecode&#8230;&#8221;<\/strong>.<\/p>\n<p>Tag den kode, du gerne vil vise p\u00e5 WordPress, og inds\u00e6t\/skriv den i feltet <strong>&#8220;Insert Sourcecode&#8230;&#8221;<\/strong>.<\/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=\"Brug feltet Inds\u00e6t kildekode\" width=\"1022\" height=\"381\"><figcaption id=\"caption-attachment-151543\" class=\"wp-caption-text\">Brug feltet Inds\u00e6t kildekode<\/figcaption><\/figure>\n<p>Som en syntakshighlighter bevarer plugin&#8217;et alle formateringsvalg og faner. N\u00e5r du er tilfreds med resultatet, skal du klikke p\u00e5 knappen <strong>Udgiv<\/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=\"Klik p\u00e5 Udgiv for at vise WordPress kode\" width=\"991\" height=\"849\"><figcaption id=\"caption-attachment-151544\" class=\"wp-caption-text\">Klik p\u00e5 Udgiv<\/figcaption><\/figure>\n<h4>Trin 4: Vis et eksempel p\u00e5 kode p\u00e5 frontend<\/h4>\n<p>Med det kan du se frontend af dit indl\u00e6g for at se, hvad webstedets bes\u00f8gende ser.<\/p>\n<p>Enlighter pluginnet tilbyder et minimalistisk standardtema til visning af kode med linjenumre, der hj\u00e6lper med organisering og henvisning.<\/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=\"Vise WordPress-kode p\u00e5 frontend\" width=\"1098\" height=\"728\"><figcaption id=\"caption-attachment-151545\" class=\"wp-caption-text\">Vises p\u00e5 frontend<\/figcaption><\/figure>\n<p>Som vi n\u00e6vnte, har brugen af et plugin til visning af kode p\u00e5 WordPress sine fordele i forhold til de andre metoder. For eksempel fremh\u00e6ver frontend-versionen af Enlighter-syntaks-plugin&#8217;et linjer, n\u00e5r brugeren ruller over din kode.<\/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=\"Fremh\u00e6vede linjer af kode\" width=\"1035\" height=\"512\"><figcaption id=\"caption-attachment-151546\" class=\"wp-caption-text\">Fremh\u00e6vede linjer af kode<\/figcaption><\/figure>\n<p>Der er ogs\u00e5 flere knapper i det \u00f8verste h\u00f8jre hj\u00f8rne af kodeboksen, herunder en, der viser koden i ren tekst uden linjenumre.<\/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=\"Knappen Almindelig tekst\" width=\"1020\" height=\"468\"><figcaption id=\"caption-attachment-151547\" class=\"wp-caption-text\">Knappen Almindelig tekst<\/figcaption><\/figure>\n<p>Den anden knap hedder <strong>Copy<\/strong> <strong>To<\/strong> <strong>Clipboard (Kopier<\/strong> <strong>til<\/strong> <strong>udklipsholder)<\/strong>, som straks kopierer alt i kodeboksen til brugerens udklipsholder, som brugeren kan tage og inds\u00e6tte i et hvilket som helst program, som han\/hun \u00f8nsker.<\/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=\"Kopier til udklipsholder-knappen\" width=\"946\" height=\"466\"><figcaption id=\"caption-attachment-151548\" class=\"wp-caption-text\">Kopier til udklipsholder-knappen<\/figcaption><\/figure>\n<p>Endelig \u00e5bner den tredje knap koden i et nyt vindue, hvor den pr\u00e6senteres i en ren tekstversion af dit browservindue.<\/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=\"\u00c5bn kode i nyt vindue\" width=\"986\" height=\"456\"><figcaption id=\"caption-attachment-151549\" class=\"wp-caption-text\">\u00c5bn kode i nyt vindue<\/figcaption><\/figure>\n<h4>Trin 5: Indstil sprog- og linjeindstillinger for kodeboksen<\/h4>\n<p>Enlighter-pluginet leveres med forskellige temaer og kraftfulde tilpasningsv\u00e6rkt\u00f8jer til at f\u00e5 kodeboksen til at se ud, som du \u00f8nsker det. Hvis du hellere vil undg\u00e5 at bruge standardtemaet, skal du g\u00e5 tilbage til dit indl\u00e6g i WordPress og klikke p\u00e5 den aktuelt \u00e5bne <strong>Enlighter-kildekodeblok<\/strong>.<\/p>\n<p>Dette afsl\u00f8rer <strong>bloksidebaren<\/strong> i WordPress. Hvis den ikke vises, skal du s\u00f8rge for at klikke p\u00e5 knappen <strong>Indstillinger<\/strong> (tandhjulsikonet) \u00f8verst til h\u00f8jre i WordPress-vinduet.<\/p>\n<p>Den f\u00f8rste indstilling, der skal tilpasses, er feltet <strong>Sprog<\/strong> &#8211; dette fort\u00e6ller plugin&#8217;et hvilket kodesprog der vises, s\u00e5 det kan tilbyde den korrekte formatering og fremh\u00e6vning.<\/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=\"Sprogfelt\" width=\"1148\" height=\"733\"><figcaption id=\"caption-attachment-151550\" class=\"wp-caption-text\">Sprogfeltet<\/figcaption><\/figure>\n<p>Der er en hel del kodningssprog at v\u00e6lge imellem, s\u00e5 rul gennem listen og v\u00e6lg det, der er mest passende.<\/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=\"Valg af sproget\" width=\"1171\" height=\"886\"><figcaption id=\"caption-attachment-151551\" class=\"wp-caption-text\">Valg af sprog<\/figcaption><\/figure>\n<p>Feltet <strong>Speciallines<\/strong> fremh\u00e6ver alle de linjer, du angiver. For at f\u00e5 dette til at ske, skal du skrive linjenumre adskilt af kommaer.<\/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=\"S\u00e6rlige linjer\" width=\"1024\" height=\"700\"><figcaption id=\"caption-attachment-151552\" class=\"wp-caption-text\">S\u00e6rlige linjer<\/figcaption><\/figure>\n<p>Som et resultat heraf ser webstedets bes\u00f8gende fremh\u00e6vede linjer for alle de linjer, du har angivet.<\/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=\"Linjer fremh\u00e6vet p\u00e5 frontend\" width=\"982\" height=\"477\"><figcaption id=\"caption-attachment-151553\" class=\"wp-caption-text\">Linjer fremh\u00e6vet p\u00e5 frontend<\/figcaption><\/figure>\n<p>Feltet <strong>Lineoffset <\/strong>er en m\u00e5de at starte dit kodningsudsnit ved en bestemt nummereret linje, hvilket er en fordel, hvis du kun viser en delm\u00e6ngde af kode, der er en del af en st\u00f8rre samling af linjer.<\/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=\"Lineoffset-felt\" width=\"1046\" height=\"447\"><figcaption id=\"caption-attachment-151554\" class=\"wp-caption-text\">Lineoffset-feltet<\/figcaption><\/figure>\n<p>Som du kan se, starter hele kodefeltet ved at skrive 10 i feltet <strong>Lineoffset<\/strong> ved 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=\"Start dokumentet p\u00e5 en bestemt linje\" width=\"900\" height=\"463\"><figcaption id=\"caption-attachment-151555\" class=\"wp-caption-text\">Start dokumentet p\u00e5 en bestemt linje<\/figcaption><\/figure>\n<h4>Trin 6: V\u00e6lg et tema<\/h4>\n<p>Enlighter-temaet er standardtemaet fra dette plugin. <strong>Tema-feltet<\/strong> (stadig under panelet med blokindstillinger) viser dog en lang r\u00e6kke indbyggede temaer, som du kan v\u00e6lge.<\/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=\"Temaindstillinger\" width=\"942\" height=\"771\"><figcaption id=\"caption-attachment-151556\" class=\"wp-caption-text\">Temaindstillinger<\/figcaption><\/figure>\n<p>For eksempel viser Godzilla-temaet kode, som om den var oven p\u00e5 diagram- eller tegnepapir.<\/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=\"Godzilla-temaet\" width=\"1007\" height=\"563\"><figcaption id=\"caption-attachment-151557\" class=\"wp-caption-text\">Godzilla-temaet<\/figcaption><\/figure>\n<p>Og Atomic-temaet skifter baggrunden til et m\u00f8rkt tema, mens det hovedsageligt tilbyder hvid tekst og pink farve til kodetags.<\/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-tema\" width=\"1063\" height=\"646\"><figcaption id=\"caption-attachment-151558\" class=\"wp-caption-text\">Atomic-tema<\/figcaption><\/figure>\n<p>Et andet eksempel er Classic-temaet, som er en mindre minimalistisk version af Enlighter-temaet med lysere farver og mere definerede linjer.<\/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=\"Klassisk tema\" width=\"1020\" height=\"660\"><figcaption id=\"caption-attachment-151559\" class=\"wp-caption-text\">Klassisk tema<\/figcaption><\/figure>\n<h4>Trin 7: Overvej at bygge et brugerdefineret tema<\/h4>\n<p>Enlighter-pluginet giver en fane inde i <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">WordPress-dashboardet<\/a> til at tilpasse alle aspekter af plugin&#8217;et og dets fremh\u00e6vningsfunktioner.<\/p>\n<p>For at f\u00e5 fuld kontrol over design og visning af dine kodebokse skal du g\u00e5 til fanen <strong>Enlighter<\/strong> (&lt;&gt;-ikonet) og derefter v\u00e6lge <strong>Appearance<\/strong> eller <strong>Theme<\/strong> <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=\"Tematilpasningsv\u00e6rkt\u00f8j\" width=\"903\" height=\"474\"><figcaption id=\"caption-attachment-151560\" class=\"wp-caption-text\">Tematilpasningsv\u00e6rkt\u00f8j<\/figcaption><\/figure>\n<p>Fanen <strong>Udseende<\/strong> giver dig mulighed for at v\u00e6lge et standardtema og giver dig samtidig adgang til at justere elementer som f.eks:<\/p>\n<ul>\n<li>Indrykning af kode<\/li>\n<li>Tekstoverl\u00f8b<\/li>\n<li>Linjenummerering<\/li>\n<li>Effekt af linjeskydning<\/li>\n<li>RAW-kode ved dobbeltklik<\/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=\"Udseende-sektionen i temaets customizer\" width=\"1083\" height=\"830\"><figcaption id=\"caption-attachment-151561\" class=\"wp-caption-text\">Udseende-sektionen i temaets customizer<\/figcaption><\/figure>\n<p><strong>Tematilpasningssektionen<\/strong> indeholder en lang liste af faner til opbygning af et kodehighlighter-tema fra bunden, med muligheder for at justere knapper, udtryk, sprog og meget mere.<\/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=\"Yderligere indstillinger\" width=\"987\" height=\"865\"><figcaption id=\"caption-attachment-151562\" class=\"wp-caption-text\">Yderligere indstillinger<\/figcaption><\/figure>\n<h4>Bonus: Brug af Enlighter med den klassiske editor<\/h4>\n<p>Enlighter-pluginet fungerer lidt anderledes for dem, der stadig bruger den klassiske WordPress-editor.<\/p>\n<p>N\u00e5r du har installeret Enlighter-plugin&#8217;et, skal du g\u00e5 til et hvilket som helst indl\u00e6g eller side og finde knappen <strong>Enlighter Code Insert<\/strong> i kontrolpanelet i editoren.<\/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 Insert\" width=\"969\" height=\"434\"><figcaption id=\"caption-attachment-151563\" class=\"wp-caption-text\">Enlighter Code Insert<\/figcaption><\/figure>\n<p>Dette \u00e5bner et nyt vindue kaldet <strong>Enlighter Code Insert<\/strong>.<\/p>\n<p>Inds\u00e6t den kode, du \u00f8nsker at vise, i det store (um\u00e6rkede) felt nederst.<\/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=\"Inds\u00e6t koden\" width=\"985\" height=\"795\"><figcaption id=\"caption-attachment-151564\" class=\"wp-caption-text\">Inds\u00e6t koden<\/figcaption><\/figure>\n<p>Klik p\u00e5 dropdown-menuen fra feltet <strong>Sprog<\/strong> for at v\u00e6lge det rigtige kodningssprog.<\/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=\"V\u00e6lg et sprog\" width=\"983\" height=\"660\"><figcaption id=\"caption-attachment-151565\" class=\"wp-caption-text\">V\u00e6lg et sprog<\/figcaption><\/figure>\n<p>N\u00e5r du er f\u00e6rdig, skal du klikke p\u00e5 <strong>OK-knappen<\/strong>. Du kan ogs\u00e5 foretage justeringer af de andre funktioner i dette vindue, f.eks. tilf\u00f8je linjeindrykning.<\/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=\"Eksempel p\u00e5 linjeindrykning\" width=\"980\" height=\"623\"><figcaption id=\"caption-attachment-151566\" class=\"wp-caption-text\">Eksempel p\u00e5 linjeindrykning<\/figcaption><\/figure>\n<p>Klik p\u00e5 knappen <strong>Udgiv<\/strong> for indl\u00e6gget, og se derefter resultaterne p\u00e5 frontend. Standardkodeboksen for Classic Editor er et m\u00f8rkt tema, men du kan \u00e6ndre kodeboksens udseende og endda oprette dine egne temaer.<\/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=\"Udgivet version\" width=\"922\" height=\"743\"><figcaption id=\"caption-attachment-151567\" class=\"wp-caption-text\">Udgivet version<\/figcaption><\/figure>\n<h3>Metode 3: Brug af et kodningsv\u00e6rkt\u00f8j<\/h3>\n<p>Encoder-v\u00e6rkt\u00f8jer tjener som alternative muligheder, n\u00e5r du fors\u00f8ger at vise kode i WordPress, is\u00e6r hvis du ikke har til hensigt at g\u00f8re det s\u00e5 ofte (og hellere vil undg\u00e5 at rode med et plugin).<\/p>\n<p>HTML-enkodere bevarer integriteten af kodeformater, is\u00e6r dem med specialtegn og tabulatorer. Encodere kan h\u00e5ndtere alle typer kode, men de overs\u00e6tter derefter den indsatte kode til HTML-klar kode, som er let at inds\u00e6tte i WordPress.<\/p>\n<p>Der findes ikke p\u00e5lidelige encoder-v\u00e6rkt\u00f8jer som plugins, men mange tilbydes som gratis webapps fra tredjeparter. Bem\u00e6rk ogs\u00e5, at encoder-v\u00e6rkt\u00f8jer ikke tilbyder nogen stylingv\u00e6rkt\u00f8jer, s\u00e5 du modtager kun koden, som den skal vises (ingen smarte bokse eller funktioner til tilpasning af linjer).<\/p>\n<p>Nogle p\u00e5lidelige encoder-v\u00e6rkt\u00f8jer omfatter bl.a:<\/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 og Decoder<\/a><\/li>\n<\/ul>\n<p>Baseret p\u00e5 vores test er det mest effektive encoder-v\u00e6rkt\u00f8j W3Docs HTML Encoder, s\u00e5 vi vil bruge det i denne vejledning.<\/p>\n<h4>Trin 1: \u00c5bn encoderen og v\u00e6lg indstillinger<\/h4>\n<p>G\u00e5 til W3Docs HTML Encoder-webstedet.<\/p>\n<p>P\u00e5 siden vises to boksfelter side om side. Det til venstre er det, hvor du skal inds\u00e6tte din kode. Det til h\u00f8jre viser den kodede version, som du skal kopiere og inds\u00e6tte i WordPress.<\/p>\n<p>Du skal dog f\u00f8rst indstille, hvilken type kode du \u00f8nsker at bevare:<\/p>\n<ul>\n<li>V\u00e6lg <strong>JavaScript unicode<\/strong>, hvis du inds\u00e6tter kode med JavaScript-elementer.<\/li>\n<li>G\u00e5 med <strong>HTML-symboler<\/strong>, hvis du bruger HTML.<\/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=\"V\u00e6lg HTML-symboler\" width=\"1155\" height=\"718\"><figcaption id=\"caption-attachment-151568\" class=\"wp-caption-text\">V\u00e6lg HTML-symboler<\/figcaption><\/figure>\n<h4>Trin 2: Inds\u00e6t og klik for at kode<\/h4>\n<p>Inds\u00e6t den kode, du gerne vil have vist i WordPress, i det venstre felt. Find og klik derefter p\u00e5 knappen <strong>Encode<\/strong> ovenfor til h\u00f8jre.<\/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=\"klik p\u00e5 Encode\" width=\"1147\" height=\"621\"><figcaption id=\"caption-attachment-151569\" class=\"wp-caption-text\">Klik for at indkode<\/figcaption><\/figure>\n<h4>Trin 3: Kopier det afkodede resultat<\/h4>\n<p>Det f\u00e6rdige produkt kan se forvirrende ud, men det er faktisk en kombination af HTML-elementer, der bevarer alle aspekter af den kode, du har indsat, alt sammen uden at f\u00e5 koden til at blive aktiveret og vise noget andet p\u00e5 frontend.<\/p>\n<p>Klik p\u00e5 knappen <strong>Kopier<\/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=\"Kopier koden\" width=\"1156\" height=\"623\"><figcaption id=\"caption-attachment-151570\" class=\"wp-caption-text\">Kopier koden<\/figcaption><\/figure>\n<h4>Trin 4: Inds\u00e6t kodet HTML i WordPress-kode- eller teksteditor<\/h4>\n<p>G\u00e5 tilbage til WordPress, og \u00e5bn det \u00f8nskede indl\u00e6g eller den \u00f8nskede side.<\/p>\n<p>V\u00e6lg menupunktet <strong>Indstillinger<\/strong> (tre lodrette prikker) i \u00f8verste h\u00f8jre hj\u00f8rne. Klik p\u00e5 indstillingen <strong>Code<\/strong> <strong>Editor<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Undlad at fors\u00f8ge at bruge Custom HTML-blokken til denne proces, da det ikke ser ud til at virke.<\/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=\"G\u00e5 til menuen Indstillinger\" width=\"1087\" height=\"613\"><figcaption id=\"caption-attachment-151571\" class=\"wp-caption-text\">G\u00e5 til menuen Indstillinger<\/figcaption><\/figure>\n<p>Du vil nu se <strong>kodeeditoren<\/strong> i stedet for den visuelle blokeditor. Find det omr\u00e5de, du gerne vil have koden vist, og inds\u00e6t din kodede HTML-kode i editoren.<\/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=\"Inds\u00e6t kodet HTML\" width=\"901\" height=\"870\"><figcaption id=\"caption-attachment-151572\" class=\"wp-caption-text\">Inds\u00e6t kodet HTML<\/figcaption><\/figure>\n<p>Hvis du bruger den klassiske WordPress-editor, skal du g\u00e5 til fanen Tekst, som er den samme som kodeeditoren fra Gutenberg-blokeditoren.<\/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=\"Fanen Tekst\" width=\"967\" height=\"736\"><figcaption id=\"caption-attachment-151573\" class=\"wp-caption-text\">Fanen Tekst<\/figcaption><\/figure>\n<h4>Trin 5: Udgiv og se koden<\/h4>\n<p>Klik p\u00e5 <strong>Opdater<\/strong> eller <strong>Udgiv<\/strong> for indl\u00e6gget, og naviger derefter til frontend for det p\u00e5g\u00e6ldende indl\u00e6g for at se, hvordan det ser ud.<\/p>\n<p>Du b\u00f8r se den oprindelige kode, der blev indsat i koderen, f\u00f8r v\u00e6rkt\u00f8jet tilf\u00f8jede HTML-kodningselementer. Som n\u00e6vnt er der ingen stylingfunktioner med encoderne, s\u00e5 dette er en vidunderlig metode til et rent og minimalistisk udseende.<\/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=\"Offentliggjort kode\" width=\"1083\" height=\"808\"><figcaption id=\"caption-attachment-151574\" class=\"wp-caption-text\">Offentliggjort kode<\/figcaption><\/figure>\n<h3>Metode 4: Brug af en brugerdefineret genvejskode<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-shortcoder\/\">Oprettelse af en brugerdefineret genvejskode<\/a> g\u00f8r arbejdet med at inds\u00e6tte stykker af genanvendelig kode, uden at du beh\u00f8ver at kopiere og inds\u00e6tte. Derfor tilbyder brugerdefinerede genvejskoder en solid mulighed for at vise kode p\u00e5 WordPress.<\/p>\n<p>Her er fordelene ved at bruge brugerdefinerede genvejskoder til at vise kode:<\/p>\n<ol>\n<li>Brugerdefinerede genvejskoder giver dig mulighed for at gemme kompliceret kode \u00e9n gang og derefter genbruge den, hvilket eliminerer behovet for at skrive l\u00e6ngere kodestumper hver gang.<\/li>\n<li>Du kan skrive din egen styling <a href=\"https:\/\/kinsta.com\/dk\/blog\/css-bedste-praksisser\/\">CSS<\/a> til kodehighlighterne og boksene.<\/li>\n<li>Shortcodes kan bruges af alle, s\u00e5 andre bidragydere kan drage fordel af dine kodehighlightere og blokke med et klik p\u00e5 en knap.<\/li>\n<\/ol>\n<p>Oprettelse af en brugerdefineret genvejskode kr\u00e6ver erfaring med redigering af <a href=\"https:\/\/kinsta.com\/blog\/what-is-a-wordpress-theme\/#whats-inside-those-wordpress-files\">WordPress-temafiler<\/a>, <a href=\"https:\/\/kinsta.com\/dk\/blog\/php-editor\/\">arbejde med PHP-kode<\/a> og muligvis oprettelse af WordPress-plugins. P\u00e5 grund af disse krav kan det v\u00e6re sv\u00e6rt for dem, der er nye i PHP, at lave en brugerdefineret genvejskode til WordPress.<\/p>\n<p>Det f\u00e6rdige produkt resulterer dog i en betydeligt nemmere m\u00e5de at vise kode p\u00e5 WordPress p\u00e5.<\/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-genvejskode\" width=\"1558\" height=\"842\"><figcaption id=\"caption-attachment-151575\" class=\"wp-caption-text\">HTML-genvejskode<\/figcaption><\/figure>\n<p>Du kan navngive den brugerdefinerede genvejskode som du vil, og oprette flere muligheder, som <code>[html] [\/html]<\/code> og <code>[css] [\/css]<\/code>, for forskellige kodningssprog.<\/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-genvejskode\" width=\"1647\" height=\"714\"><figcaption id=\"caption-attachment-151576\" class=\"wp-caption-text\">CSS-genvejskode<\/figcaption><\/figure>\n<p>Husk, at brugerdefinerede genvejskoder fungerer bedst til syntaksmarkering, n\u00e5r du bruger <strong>teksteditoren<\/strong> (i WordPress Classic) eller feltet <strong>Custom<\/strong> <strong>HTML<\/strong>, n\u00e5r du arbejder med WordPress Gutenberg Block Editor.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Shortcode-blokken fra Gutenberg er en mulighed, men under vores tests mistede nogle kodestumper vigtige formateringselementer eller tegn i nogle kodeuddrag.<\/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=\"Tekst editor\" width=\"1063\" height=\"534\"><figcaption id=\"caption-attachment-151577\" class=\"wp-caption-text\">Tekst editor<\/figcaption><\/figure>\n<p>M\u00e5let er at opbygge en brugerdefineret shortcode, hvor du kan skrive eller inds\u00e6tte kode mellem sen shortcodes \u00e5bnings- og lukningstags.<\/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=\"Kode indsat i HTML-kortkode for at vise WordPress-kode\" width=\"1487\" height=\"834\"><figcaption id=\"caption-attachment-151578\" class=\"wp-caption-text\">Kode indsat i HTML-kortkode<\/figcaption><\/figure>\n<p>N\u00e5r den er offentliggjort, bliver din brugerdefinerede genvejskodes styling og fremh\u00e6vningsindstillinger vist p\u00e5 frontend. Og den kode, du har tilf\u00f8jet, vises p\u00e6nt i syntakshighlighteren.<\/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-visning til at vise WordPress-kode\" width=\"1357\" height=\"897\"><figcaption id=\"caption-attachment-151579\" class=\"wp-caption-text\">Visning p\u00e5 frontend<\/figcaption><\/figure>\n<h3>Metode 5: Brug af <code><code><\/code>&lt;code&gt; and &lt;pre&gt;<\/code> Tags<\/h3>\n<p>Den m\u00e5ske \u00e6ldste &#8211; men stadig utrolig p\u00e5lidelige &#8211; m\u00e5de at vise kode p\u00e5 WordPress er ved blot at tilf\u00f8je specifikke HTML-tags omkring kodestumpen. Denne metode er bedst, n\u00e5r du arbejder med den klassiske WordPress-editor, eller i enhver HTML-editor.<\/p>\n<p>Der er to muligheder:<\/p>\n<ol>\n<li><strong><code>&lt;code&gt;<\/code> tags:<\/strong> Bedst til visning af en kort kodelinje; bruges ofte i afsnit<\/li>\n<li><strong><code>&lt;pre&gt;<\/code> tags:<\/strong> Ideel til l\u00e6ngere blokke af kode, eller n\u00e5r du gerne vil have flere formateringsmuligheder<\/li>\n<\/ol>\n<h4>Mulighed 1: Brug <code>&lt;code&gt;<\/code> Tags til Inline Code Snippets<\/h4>\n<p>Indholdsskabere, der skriver om kodning, \u00f8nsker ikke altid at bruge store kodeblokke. Nogle gange giver det mere mening at inkludere en hurtig kode i et afsnit.<\/p>\n<p>Du skal dog stadig fremh\u00e6ve og bevare den p\u00e5g\u00e6ldende kodes formatering. Og noget kode kan give problemer med det omgivende indhold, hvis det ikke bevares korrekt.<\/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=\"Et &lt;br&gt; tag\" width=\"908\" height=\"371\"><figcaption id=\"caption-attachment-151580\" class=\"wp-caption-text\">Et &lt;br \/&gt;-tag<\/figcaption><\/figure>\n<p>Lad os f.eks. tage <code>&lt;br&gt;<\/code> -tagget &#8211; uden <code>&lt;code&gt;<\/code> -tags ville det blot tilf\u00f8je et brud til dit afsnit.<\/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=\"Et u\u00f8nsket brud\" width=\"1020\" height=\"390\"><figcaption id=\"caption-attachment-151581\" class=\"wp-caption-text\">Et u\u00f8nsket brud<\/figcaption><\/figure>\n<p>Ved at placere kodningen inden for disse tags f\u00e5r du et meget mere rent resultat:<\/p>\n<pre><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/pre>\n<p>For at g\u00f8re det skal du \u00e5bne et WordPress-indl\u00e6g og enten aktivere <strong>kodeeditoren<\/strong> (for Gutenberg Block Editor) eller <strong>teksteditoren<\/strong> (n\u00e5r du bruger WordPress Classic).<\/p>\n<p>Inds\u00e6t eller skriv disse tags et sted i editoren; inds\u00e6t ikke den kode, du vil vise, endnu. Tilf\u00f8j i stedet et mellemrum mellem tagsene.<\/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=\"Mellemrum mellem kodetags\" width=\"1111\" height=\"313\"><figcaption id=\"caption-attachment-151582\" class=\"wp-caption-text\">Mellemrum mellem kodetags<\/figcaption><\/figure>\n<p>Skift til den <strong>visuelle<\/strong> <strong>editor<\/strong> (uanset om du er i Gutenberg eller Classic WordPress).<\/p>\n<p>Du vil se et lille gr\u00e5t mellemrum inde i det visuelle indhold. Klik for at placere din mark\u00f8r inden for det gr\u00e5 rum. Det er her, du kan inds\u00e6tte eller indtaste koden til visning.<\/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=\"Gr\u00e5t felt til at vise kode\" width=\"988\" height=\"280\"><figcaption id=\"caption-attachment-151583\" class=\"wp-caption-text\">Gr\u00e5t felt til at skrive kode<\/figcaption><\/figure>\n<p>N\u00e5r du skriver, udvides det gr\u00e5 felt, s\u00e5 det kan rumme kodestumpen. Klik p\u00e5 knappen <strong>Udgiv<\/strong> eller <strong>Opdater<\/strong> for det p\u00e5g\u00e6ldende indl\u00e6g.<\/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=\"Indtastning af kode i det gr\u00e5 felt\" width=\"1019\" height=\"367\"><figcaption id=\"caption-attachment-151584\" class=\"wp-caption-text\">Indtastning af kode i det gr\u00e5 felt<\/figcaption><\/figure>\n<p>P\u00e5 forsiden af indl\u00e6gget kan du nu se koden bevaret, som den skal v\u00e6re, og uden nogen m\u00e6rkelig aktivitet (som f.eks. tilf\u00f8jelse af en pause til dit indhold).<\/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=\"Break-tagget vises uden at der faktisk tilf\u00f8jes et break\" width=\"1163\" height=\"449\"><figcaption id=\"caption-attachment-151585\" class=\"wp-caption-text\">Break-tagget vises uden at der faktisk tilf\u00f8jes et break<\/figcaption><\/figure>\n<p>Formateringen af disse <code>&lt;code&gt;<\/code> -tags er normalt barebones, men det afh\u00e6nger ofte af dit temas styling. Vores eksempel \u00e6ndrer f.eks. kun skrifttypen, men indeholder ikke en gr\u00e5 baggrund.<\/p>\n<h4>Mulighed 2: Brug <code>&lt;pre&gt;<\/code> -tags til l\u00e6ngere kodeblokke<\/h4>\n<p>L\u00e6ngere kodestumper fortjener deres egne blokke, der er adskilt fra det indhold, du skriver, i afsnit. Til dem anbefaler vi, at du holder dig til <code>&lt;pre&gt;<\/code> -tags.<\/p>\n<p>Processen med at tilf\u00f8je et <code>&lt;pre&gt;<\/code> -tag er ligesom med <code>&lt;code&gt;<\/code> -tags, men du har mere plads at arbejde med, n\u00e5r du skal inds\u00e6tte din kode.<\/p>\n<p>G\u00e5 til et indl\u00e6g, og \u00e5bn <strong>kode-<\/strong> (Gutenberg) eller <strong>tekst-<\/strong> (klassisk WordPress) <strong>editor<\/strong>. Inds\u00e6t eller skriv den kode, du gerne vil vise, ind. Omgiv derefter koden med disse 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 til at vise WordPress-kode\" width=\"1099\" height=\"596\"><figcaption id=\"caption-attachment-151586\" class=\"wp-caption-text\">Pre-tags<\/figcaption><\/figure>\n<p>Skift til den <strong>visuelle<\/strong> editor for at se, hvordan det ser ud. Du vil bem\u00e6rke, at tekststykket vil have en <strong>&#8220;Preformatted&#8221;<\/strong> -m\u00e6rkning, hvilket er pr\u00e6cis, hvad <code>&lt;pre&gt;<\/code> -tagget skal g\u00f8re.<\/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=\"V\u00e6lg preformatted indstilling\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-151587\" class=\"wp-caption-text\">V\u00e6lg preformatted indstilling<\/figcaption><\/figure>\n<p>Klik p\u00e5 <strong>Udgiv<\/strong> eller <strong>Opdater<\/strong>, og skift derefter til frontend for at se din kode i sin oprindelige form. I lighed med <code>&lt;code&gt;<\/code> -tags er <code>&lt;pre&gt;<\/code> -tags elendige med formatering, s\u00e5 du st\u00e5r tilbage med det enkleste mulige udseende. Der er dog m\u00e5der, hvorp\u00e5 du selv kan stilisere dem.<\/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-resultater for at vise WordPress-kode\" width=\"1177\" height=\"759\"><figcaption id=\"caption-attachment-151588\" class=\"wp-caption-text\">Resultater p\u00e5 frontend<\/figcaption><\/figure>\n<h5>Tips til styling af &lt;pre&gt;-tags<\/h5>\n<p><code>&lt;pre&gt;<\/code> -tags er mindre stabile end <code>&lt;code&gt;<\/code> -tags, s\u00e5 du kan st\u00f8de p\u00e5 vanskeligheder afh\u00e6ngigt af den type kode, du fors\u00f8ger at vise.<\/p>\n<p>Brug disse tips til at forbedre, hvordan det ser ud:<\/p>\n<ul>\n<li>Pr\u00f8v at g\u00f8re dit bedste for at fjerne eller helt undg\u00e5 linjeskift, da <code>&lt;pre&gt;<\/code> -tagget ofte ikke genkender disse. Generelt reagerer den d\u00e5rligt p\u00e5 for mange linjeskift.<\/li>\n<li>Overvej at tilf\u00f8je en <code>overflow-x:auto;<\/code> -egenskab i din CSS for at tilf\u00f8je rullefunktionalitet til <code>&lt;pre&gt;<\/code> -tagkoden. Dette hj\u00e6lper ved overfyldt indhold, da <code>&lt;pre&gt;<\/code> -tagget i sig selv lader din kode l\u00f8be ud over siden.<\/li>\n<li>Hold dig til skrifttyper med en enkelt skrifttype.<\/li>\n<\/ul>\n<p>Du kan ogs\u00e5 stilisere tekstformateringen og boksen bag koden. Her er en startskabelon, som du kan <a href=\"https:\/\/kinsta.com\/dk\/blog\/redigeres-wordpress-kode\/\">tilf\u00f8je til din CSS-fil<\/a>:<\/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>Metode 6: Brug af en Markdown-editor, der opretter forbindelse til WordPress<\/h3>\n<p>Markdown-editorer giver ikke kun mulighed for at skrive og formatere hurtigere, men mange af dem forbinder direkte til WordPress for \u00f8jeblikkelig offentligg\u00f8relse direkte fra editoren.<\/p>\n<p>Mange skribenter vender sig til markdown-editorer p\u00e5 grund af denne hurtige indholdsoprettelsesproces. Og heldigvis tilbyder nogle af disse redakt\u00f8rer markdown til kodeblokke, hvilket betyder, at du kan vise kode i markdown-editoren og derefter sende den direkte til WordPress til udgivelse.<\/p>\n<p>Husk p\u00e5, at <a href=\"https:\/\/kinsta.com\/dk\/blog\/bedste-teksteditorer\/\">normale tekstredigeringsprogrammer<\/a> (som <a href=\"https:\/\/kinsta.com\/blog\/how-to-use-sublime-text\/\">Sublime Text<\/a>) ikke bevarer kodens integritet, n\u00e5r den overf\u00f8res til offentligg\u00f8relse p\u00e5 WordPress. Og <a href=\"https:\/\/kinsta.com\/dk\/blog\/gratis-html-editors\/\">HTML-redigeringsprogrammer<\/a> er ganske vist fremragende til at skrive og lagre kode, men de har heller ikke de fremh\u00e6vningsfunktioner, der er n\u00f8dvendige for at bevare koden til WordPress-udgivelse.<\/p>\n<p>Der er <a href=\"https:\/\/kinsta.com\/blog\/markdown-editor\/\">masser af markdown-editorer<\/a> at v\u00e6lge imellem, men de ideelle l\u00f8sninger har to funktioner til f\u00e6lles:<\/p>\n<ol>\n<li>Direkte eksport til WordPress<\/li>\n<li>Markdown til fremh\u00e6vning af kode<\/li>\n<\/ol>\n<p>Du kan dog v\u00e6lge en markdown-editor med HTML-eksport, hvis du ikke er vild med direkte WordPress-eksport.<\/p>\n<p>De bedste markdown-editorer med begge funktioner er:<\/p>\n<ul>\n<li><a href=\"https:\/\/ulysses.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ulysses<\/a> (Mac og iOS)<\/li>\n<li><a href=\"https:\/\/bywordapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ByWord<\/a> (Mac og iOS)<\/li>\n<li><a href=\"https:\/\/obsidian.md\/\" target=\"_blank\" rel=\"noopener noreferrer\">Obsidian<\/a> (Mac, Windows, Linux og mere)<\/li>\n<\/ul>\n<p>Ulysses og ByWord er premium-apps, mens Obsidian har b\u00e5de gratis og premium-versioner.<\/p>\n<p>I den f\u00f8lgende vejledning vil vi bruge Ulysses.<\/p>\n<h4>Trin 1: Tilf\u00f8j en Longform Code Block i Ulysses<\/h4>\n<p>Mens du udarbejder et dokument i Ulysses, skal du skrive <code>\"<\/code> markdown &#8211; det er to apostroffer &#8211; n\u00e5r du straks vil tilf\u00f8je en kodehighlighterblok inde i et dokument.<\/p>\n<p>Denne markdown-metode er beregnet til l\u00e6ngere kodeblokke. Den kan ikke bruges midt i et afsnit, s\u00e5 du skal oprette en ny linje, for at markdown kan blive aktiveret.<\/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=\"Ulysses-kode markdown\" width=\"2000\" height=\"1126\"><figcaption id=\"caption-attachment-151589\" class=\"wp-caption-text\">Ulysses-kode markdown<\/figcaption><\/figure>\n<p>N\u00e5r kodehighlighteren vises, kan du skrive eller inds\u00e6tte hvad du vil i den.<\/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=\"Inds\u00e6t for at vise WordPress-kode i Ulysses highlighteren\" width=\"1015\" height=\"543\"><figcaption id=\"caption-attachment-151590\" class=\"wp-caption-text\">Inds\u00e6t kode i Ulysses-markeringsfeltet<\/figcaption><\/figure>\n<p>En anden m\u00e5de at sl\u00e5 kodeblokken til p\u00e5 er ved at klikke p\u00e5 menupunktet <strong>Markdown<\/strong> (tre vandrette prikker) og derefter v\u00e6lge indstillingen <strong>Code<\/strong>.<\/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=\"Brug Markdown-menuen til at v\u00e6lge punktet Kode\" width=\"937\" height=\"398\"><figcaption id=\"caption-attachment-151592\" class=\"wp-caption-text\">Brug Markdown-menuen til at v\u00e6lge punktet Kode<\/figcaption><\/figure>\n<p>N\u00e5r du har klikket p\u00e5 dette menupunkt, vises feltet med kodehighlighter der, hvor mark\u00f8ren sidst var.<\/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=\"Tomme kodehighlighter\" width=\"977\" height=\"285\"><figcaption id=\"caption-attachment-151593\" class=\"wp-caption-text\">Tomme kodehighlighter<\/figcaption><\/figure>\n<p>Hvis du vil placere kodestumper i afsnit, skal du bruge <code>``<\/code> markdown (som ser n\u00e6sten det samme ud, men det er faktisk to akutte\/grave accenter i stedet for apostroffer).<\/p>\n<h4>Trin 3: Eksporter til WordPress<\/h4>\n<p>N\u00e5r du har dit dokument klar, er det tid til at eksportere det hele til WordPress.<\/p>\n<p>Det vidunderlige ved markdown-redigeringsprogrammer, der er forbundet med WordPress, er, at de bevarer kodeblokkene under hele overf\u00f8rslen. S\u00e5 du vil se p\u00e6nt formaterede kodehighlightere klar til at offentligg\u00f8re i WordPress.<\/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=\"Kodehighlighteren forbliver den samme i WordPress\" width=\"996\" height=\"723\"><figcaption id=\"caption-attachment-151594\" class=\"wp-caption-text\">Kodehighlighteren forbliver den samme i WordPress<\/figcaption><\/figure>\n<p>I Ulysses skal du g\u00e5 til toppen af dokumentet for at finde v\u00e6rkt\u00f8jslinjen. Klik p\u00e5 knappen <strong>Publishing<\/strong> <strong>Preview (udgivelseseksempel)<\/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=\"V\u00e6lg knappen Udgivelseseksempel for at f\u00e5 vist WordPress-kode\" width=\"981\" height=\"618\"><figcaption id=\"caption-attachment-151595\" class=\"wp-caption-text\">V\u00e6lg knappen Publishing Preview (udgivelseseksempel)<\/figcaption><\/figure>\n<p>Dette viser en rullemenu, hvor du kan v\u00e6lge en platform og et websted, som du vil udgive p\u00e5. Du kan ogs\u00e5 bruge indstillingen <strong>Administrer<\/strong> <strong>konti<\/strong> i denne menu til at logge ind p\u00e5 et WordPress-websted, f\u00f8r du eksporterer.<\/p>\n<p>N\u00e5r du har valgt det rigtige websted, skal du klikke p\u00e5 knappen <strong>Udgiv<\/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=\"V\u00e6lg en konto, og udgiv\" width=\"948\" height=\"704\"><figcaption id=\"caption-attachment-151596\" class=\"wp-caption-text\">V\u00e6lg en konto, og udgiv<\/figcaption><\/figure>\n<p>Udfyld titlen p\u00e5 indl\u00e6gget, tidsplanen og eventuelle andre oplysninger, som du \u00f8nsker, f.eks. kategorier, tags og fremh\u00e6vede billeder.<\/p>\n<p>Den vigtigste del er dog at indstille <strong>Status<\/strong> til <strong>Udkast<\/strong>, s\u00e5 du ikke offentligg\u00f8r indl\u00e6gget uden at have gennemg\u00e5et det p\u00e5 WordPress f\u00f8rst.<\/p>\n<p>Klik p\u00e5 <strong>OK<\/strong> for at forts\u00e6tte.<\/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=\"V\u00e6lg en status, og klik derefter p\u00e5 OK for at f\u00e5 vist WordPress-kode\" width=\"915\" height=\"649\"><figcaption id=\"caption-attachment-151597\" class=\"wp-caption-text\">V\u00e6lg en status, og klik derefter p\u00e5 OK<\/figcaption><\/figure>\n<p>I l\u00f8bet af f\u00e5 sekunder placerer Ulysses hele dokumentet i et nyt WordPress-indl\u00e6g (du skal muligvis logge ind i din <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">WordPress-administrator<\/a>, n\u00e5r det dukker op).<\/p>\n<p>Du vil se kodeblokkene, der allerede er konfigureret og klar til at blive offentliggjort. Klik p\u00e5 knappen <strong>Udgiv<\/strong> for at tage det live.<\/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=\"Kodeblokke i WordPress-editor\" width=\"1202\" height=\"788\"><figcaption id=\"caption-attachment-151598\" class=\"wp-caption-text\">Kodeblokke i WordPress-editoren<\/figcaption><\/figure>\n<p>P\u00e5 frontend vil du se, at inline-kodesnippets og st\u00f8rre kodeblokke er p\u00e6nt fremh\u00e6vet, og formateringen fra denne kode er bevaret.<\/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-resultater for at vise wordpress-kode\" width=\"916\" height=\"881\"><figcaption id=\"caption-attachment-151599\" class=\"wp-caption-text\">Resultater p\u00e5 frontend<\/figcaption><\/figure>\n\n<h2>Oversigt<\/h2>\n<p>Der er flere metoder til korrekt visning af kode p\u00e5 WordPress, og det afh\u00e6nger ofte af den WordPress-editor, der bruges, det kodesprog, du \u00f8nsker at vise, og hvordan du \u00f8nsker at vise og formatere koden. Hvis du for eksempel v\u00e6lger et plugin, vil det helt sikkert give en mere kreativ formateringsoplevelse end standardkodeblokken i WordPress Gutenberg-editoren.<\/p>\n<p>I denne artikel har vi d\u00e6kket mange forskellige metoder, der illustrerer, hvordan man viser kode i WordPress.<\/p>\n<p>Vi anbefaler typisk, at du starter med metode 1 og arbejder dig igennem. Metode 2 tjener dig godt, hvis du leder efter flere stylingmuligheder, og metoder 3-5 er kun nyttige i s\u00e6rlige situationer. Metode 6 er lidt af en bonusl\u00f8sning, beregnet til dem, der foretr\u00e6kker markdown-editorer frem for at skrive direkte i WordPress.<\/p>\n<p>Uanset hvilken metode du v\u00e6lger, kan en <a href=\"https:\/\/kinsta.com\/dk\/wordpress-hosting\/\">p\u00e5lidelig hostingudbyder<\/a> hj\u00e6lpe dig med at finpudse dit websted endnu mere. <a href=\"https:\/\/kinsta.com\/dk\/wordpress-hosting\/\">Kinsta&#8217;s WordPress-hostingl\u00f8sninger<\/a> tilbyder <a href=\"https:\/\/kinsta.com\/dk\/prissaetning\/\">planer til websteder<\/a> i alle former og st\u00f8rrelser, og den brugervenlige platform &#8211; <a href=\"https:\/\/kinsta.com\/dk\/mykinsta\/\">MyKinsta<\/a>, et propriet\u00e6rt admin dashboard &#8211; g\u00f8r det nemt at redigere enhver del af dit websted og dets filer. Derudover f\u00e5r du de ekstra fordele ved Kinsta&#8217;s <a href=\"https:\/\/kinsta.com\/dk\/blog\/cloud-platform-for-udviklere\/\">hastighed<\/a>, <a href=\"https:\/\/kinsta.com\/dk\/cloudflare-integration\/\">sikkerhed<\/a> og <a href=\"https:\/\/kinsta.com\/dk\/kinsta-support\/\">support<\/a> i verdensklasse.<\/p>\n<p>Har du tidligere fors\u00f8gt at vise kode i WordPress? Hvis ja, hvilken metode fungerede bedst for dig? Lad os vide det i kommentarfeltet nedenfor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At l\u00e6re at vise kode i WordPress er afg\u00f8rende for bloggere og indholdsskabere, der konsekvent offentligg\u00f8r kode online, som deres l\u00e6sere kan bruge. Computerkode gengiver efter &#8230;<\/p>\n","protected":false},"author":199,"featured_media":50777,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[765,754],"class_list":["post-50776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-tips","topic-wordpress-udvikling"],"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>S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af 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\/dk\/blog\/wordpress-vis-kode\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud)\" \/>\n<meta property=\"og:description\" content=\"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af markdown software.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T13:21:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T09:15:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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=\"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af markdown software.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"37 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud)\",\"datePublished\":\"2023-05-17T13:21:46+00:00\",\"dateModified\":\"2023-08-24T09:15:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/\"},\"wordCount\":5517,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg\",\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/\",\"url\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/\",\"name\":\"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg\",\"datePublished\":\"2023-05-17T13:21:46+00:00\",\"dateModified\":\"2023-08-24T09:15:00+00:00\",\"description\":\"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af markdown software.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress tips\",\"item\":\"https:\/\/kinsta.com\/dk\/emner\/wordpress-tips\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/dk\/#website\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"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\/dk\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud) - Kinsta\u00ae","description":"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af 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\/dk\/blog\/wordpress-vis-kode\/","og_locale":"da_DK","og_type":"article","og_title":"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud)","og_description":"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af markdown software.","og_url":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_published_time":"2023-05-17T13:21:46+00:00","article_modified_time":"2023-08-24T09:15:00+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af markdown software.","twitter_image":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg","twitter_creator":"@kinsta_dk","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Jeremy Holcombe","Estimeret l\u00e6setid":"37 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud)","datePublished":"2023-05-17T13:21:46+00:00","dateModified":"2023-08-24T09:15:00+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/"},"wordCount":5517,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg","inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/","url":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/","name":"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg","datePublished":"2023-05-17T13:21:46+00:00","dateModified":"2023-08-24T09:15:00+00:00","description":"L\u00e6r hvordan du bruger WordPress til at vise kode, uden plugins, shortcodes og selv uden encoder v\u00e6rkt\u00f8jer. Vi udforsker ogs\u00e5 brugen af markdown software.","breadcrumb":{"@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#primaryimage","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/05\/wordpress-display-code.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/dk\/blog\/wordpress-vis-kode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"WordPress tips","item":"https:\/\/kinsta.com\/dk\/emner\/wordpress-tips\/"},{"@type":"ListItem","position":3,"name":"S\u00e5dan viser du kode i WordPress (og f\u00e5r det til at se p\u00e6nt ud)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/dk\/#website","url":"https:\/\/kinsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","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\/dk\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/50776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/comments?post=50776"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/50776\/revisions"}],"predecessor-version":[{"id":50868,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/50776\/revisions\/50868"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/translations\/dk"},{"href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/50776\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media\/50777"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media?parent=50776"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/tags?post=50776"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/topic?post=50776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}