{"id":52981,"date":"2023-05-17T13:22:02","date_gmt":"2023-05-17T13:22:02","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=52981&#038;preview=true&#038;preview_id=52981"},"modified":"2023-09-21T12:24:58","modified_gmt":"2023-09-21T12:24:58","slug":"wordpress-visa-kod","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/","title":{"rendered":"S\u00e5 h\u00e4r visar du kod i WordPress (och g\u00f6r den vacker)"},"content":{"rendered":"<p>Att l\u00e4ra sig att visa kod i WordPress \u00e4r exempelvis viktigt f\u00f6r bloggare och inneh\u00e5llsskapare som st\u00e4ndigt publicerar kod online. Deras l\u00e4sare m\u00e5ste ju trots allt kunna anv\u00e4nda den. <a href=\"https:\/\/kinsta.com\/blog\/edit-wordpress-code\/\">Datorkoden<\/a> visar n\u00e5got nytt p\u00e5 en webbplats i st\u00e4llet f\u00f6r de taggar, snedstreck och parenteser som du hittar i de faktiska kodutdragen.<\/p>\n<p>Detta inneb\u00e4r dock ett problem f\u00f6r dem som skriver om utveckling och design. De beh\u00f6ver ju n\u00e4mligen ett s\u00e4tt att visa koden p\u00e5 r\u00e4tt s\u00e4tt utan att den g\u00f6r sitt egentliga jobb. Det kan exempelvis liknas med att skapa en knapp eller att l\u00e4gga till styling till ett stycke block.<\/p>\n<p>Enkelt uttryckt: Om du skriver ett blogginl\u00e4gg och l\u00e4gger in ett exempel p\u00e5 ett kodutdrag vill du f\u00f6rhindra att koden faktiskt fungerar! P\u00e5 s\u00e5 s\u00e4tt kan l\u00e4sarna se koden i sin r\u00e5form och se koden i ett snyggt formaterat block. De kan till och med kopiera dess inneh\u00e5ll f\u00f6r att anv\u00e4nda det i sitt utvecklingsarbete.<\/p>\n<p>I den h\u00e4r guiden visar vi dig exakt hur du kan visa kod i WordPress (oavsett <a href=\"https:\/\/kinsta.com\/se\/blog\/sa-har-anpassar-wordpress-tema\/\">ditt WordPress-tema<\/a>) med hj\u00e4lp av flera olika metoder. Vi hj\u00e4lper dig dessutom att best\u00e4mma vilken metod som fungerar b\u00e4st f\u00f6r ditt arbetsfl\u00f6de.<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>Vad h\u00e4nder n\u00e4r du l\u00e4gger till vanlig kod i WordPress?<\/h2>\n<p>Du kanske undrar vad som skulle h\u00e4nda om du skrev lite kod i WordPress visuella redigerare. N\u00e4r allt kommer omkring s\u00e5 r\u00f6r du ju inte text- eller kodredigerarna. Borde inte detta inneb\u00e4ra att ditt kodutdrag fungerar helt okej?<\/p>\n<p>F\u00f6rmodligen inte.<\/p>\n\n<p>H\u00e4r \u00e4r n\u00e5gra av de ovanliga resultat som kan uppst\u00e5:<\/p>\n<ul>\n<li>Koden visas delvis. Delar av koden visas p\u00e5 inl\u00e4ggets frontend och andra delar f\u00f6rsvinner. Detta ser oprofessionellt ut f\u00f6r bes\u00f6karna och betyder dessutom att din kod inte \u00e4r korrekt.<\/li>\n<li>Ingenting visas. Koden f\u00f6rsvinner helt och h\u00e5llet i backend och syns inte p\u00e5 frontend av ditt inl\u00e4gg.<\/li>\n<li>Du ser en konstig formatering &#8211; ofta n\u00e5got som inte \u00e4r anv\u00e4ndarv\u00e4nligt eller publicerbart f\u00f6r en publik.<\/li>\n<li>Koden kanske bara \u00e5terges delvis.<\/li>\n<\/ul>\n<p>F\u00f6r att illustrera ett par av dessa resultat anv\u00e4nder vi f\u00f6ljande <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML-kodutdrag<\/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>I detta kodutdrag <a href=\"https:\/\/kinsta.com\/blog\/html-best-practices\/\">anv\u00e4nds HTML-formatelement<\/a> f\u00f6r att skapa tre gr\u00f6na inneh\u00e5llsblock med rubriker och stycken.<\/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=\"Klicka f\u00f6r att skriva kod\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Klicka f\u00f6r att skriva kod<\/figcaption><\/figure>\n<p>Vi vill dock visa den <em>obearbetade<\/em> koden i ett blogginl\u00e4gg, utan att den faktiskt ska \u00e5terges i dessa block.<\/p>\n<p>H\u00e4r \u00e4r resultatet om vi klistrar in koden direkt i WordPress <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-gutenberg-redigeraren\/\">Gutenberg Blockredigerare<\/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-redigeringsresultat fr\u00e5n HTML-kod\" width=\"928\" height=\"752\"><figcaption id=\"caption-attachment-151527\" class=\"wp-caption-text\">Gutenberg-redigeringsresultat fr\u00e5n HTML-kod<\/figcaption><\/figure>\n<p>Som du kan se f\u00f6rs\u00f6ker WordPress anv\u00e4nda koden f\u00f6r sitt huvudsyfte: att generera inneh\u00e5ll &#8211; men den tar bort stilen fr\u00e5n koden, s\u00e5 den ger d\u00e4rf\u00f6r inte det resultat som vi ville visa l\u00e4sarna.<\/p>\n<p>F\u00f6r att undvika situationer som denna uppmanar vi dig att ist\u00e4llet anv\u00e4nda en av metoderna nedan f\u00f6r att visa kod.<\/p>\n<h2>S\u00e5 h\u00e4r visar du kod p\u00e5 din WordPress-webbplats (6 metoder)<\/h2>\n<p>Metoderna \u00e4r listade fr\u00e5n l\u00e4ttast till sv\u00e5rast. Vi har dessutom n\u00e5gra speciella metoder f\u00f6r dem som gillar att skriva kod och inneh\u00e5ll i markdown-redigerare (ist\u00e4llet f\u00f6r WordPress).<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Metod 1: Anv\u00e4nda Gutenberg\u2019s blockredigerare (standard)<\/h3>\n<p>F\u00f6r att \u00f6va p\u00e5 att visa kod i WordPress kan du anv\u00e4nda f\u00f6ljande kodutdrag. Det\u00a0<a href=\"https:\/\/kinsta.com\/blog\/learn-html\/\">anv\u00e4nder HTML<\/a> och intern CSS f\u00f6r att producera ett enkelt resultat med en bl\u00e5 rubrik och ett svart stycke:<\/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\u00e4r koden anv\u00e4nds visar den detta 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=\"Resultatet visar en rubrik och en text med stil\" width=\"979\" height=\"359\"><figcaption id=\"caption-attachment-151528\" class=\"wp-caption-text\">Resultatet visar en rubrik och en text med stil<\/figcaption><\/figure>\n<p>Men genom att f\u00f6lja den h\u00e4r handledningen l\u00e4r du dig hur du visar sj\u00e4lva r\u00e5koden, inte vad koden ska visa p\u00e5 frontend.<\/p>\n<h4>Steg 1: L\u00e4gg till ett kodblock i WordPress<\/h4>\n<p>WordPress Gutenberg-redigerare har redan ett inbyggt kodblock. Det g\u00f6r att du exempelvis kan visa kodstycken utan att f\u00f6rlora n\u00e5gon av dess formatering eller faktiskt aktivera koden.<\/p>\n<p>F\u00f6r att b\u00f6rja \u00f6ppnar du ett <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-inlaggs-id\/\">inl\u00e4gg eller en sida<\/a> i WordPress och klickar sedan p\u00e5 en av knapparna f\u00f6r att\u00a0<strong>L\u00e4gga till block<\/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=\"Knappar f\u00f6r att l\u00e4gga till block\" width=\"941\" height=\"486\"><figcaption id=\"caption-attachment-151529\" class=\"wp-caption-text\">Knappar f\u00f6r att l\u00e4gga till block<\/figcaption><\/figure>\n<p>Klicka p\u00e5 en av knapparna f\u00f6r att l\u00e4gga till block.<\/p>\n<p>D\u00e5 visas de tillg\u00e4ngliga blocken. Du kan s\u00f6ka efter blocket Kod eller skriva ett nyckelord som &#8221;kod&#8221; i s\u00f6kf\u00e4ltet.<\/p>\n<p>N\u00e4r du ser <strong>kodblocket<\/strong> (med parentesikoner) klickar du p\u00e5 det f\u00f6r att infoga en bit kod i inl\u00e4gget.<\/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-f\u00f6nster f\u00f6r att l\u00e4gga till ett block, med alternativet Kodblock\" width=\"939\" height=\"411\"><figcaption id=\"caption-attachment-151530\" class=\"wp-caption-text\">Popup-f\u00f6nster f\u00f6r att l\u00e4gga till ett block, med alternativet Kodblock<\/figcaption><\/figure>\n<p>Du b\u00f6r nu se ett f\u00e4lt med uppmaningen <strong>&#8221;Skriv kod&#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=\"Klicka p\u00e5 Skriv kod\" width=\"937\" height=\"437\"><\/p>\n<p>WordPress Gutenberg-redigeraren st\u00f6der markdown. Som ett resultat kan du hitta och infoga kodblocket genom att skriva ett snedstreck fram\u00e5t (<code>\/<\/code>) i redigeraren och sedan b\u00f6rja skriva &#8221;C&#8221; eller &#8221;Code&#8221;. WordPress kommer d\u00e5 att visa alla relevanta block, vilket ger dig ett snabbare s\u00e4tt att infoga dem.<\/p>\n<p>Det \u00e4r l\u00e4tt att f\u00f6rv\u00e4xla kodblocket och det anpassade HTML-blocket. Blocket Anpassad HTML \u00e4r dock till f\u00f6r att l\u00e4gga till anpassad HTML som ska \u00e5terges p\u00e5 frontend, inte f\u00f6r att l\u00e4gga till r\u00e5kod f\u00f6r 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=\"Anv\u00e4ndning av markdown f\u00f6r att anropa kodblocket\" width=\"933\" height=\"380\"><figcaption id=\"caption-attachment-151532\" class=\"wp-caption-text\">Anv\u00e4ndning av markdown f\u00f6r att anropa kodblocket<\/figcaption><\/figure>\n<h4>Steg 2: Klistra in visningskoden i f\u00e4ltet f\u00f6r kodblocket<\/h4>\n<p>Nu \u00e4r det dags att kopiera den kod som du vill visa och klistra in den i rutan <strong>&#8221;Skriv kod&#8230;&#8221;<\/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 klistra in den kod som ska visas\" width=\"936\" height=\"405\"><figcaption id=\"caption-attachment-151533\" class=\"wp-caption-text\">Skriv eller klistra in den kod som ska visas<\/figcaption><\/figure>\n<p>Din kod visas nu i rutan.<\/p>\n<p>Det som \u00e4r bra med kodblocket \u00e4r exempelvis att det respekterar alla mellanslag och tabulatorer som du redan hade i kodutdraget. Den b\u00f6r d\u00e4rf\u00f6r inte se annorlunda ut \u00e4n k\u00e4llan som du kopierade den fr\u00e5n.<\/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=\"Inklistrat kodutdrag i kodblocket\" width=\"919\" height=\"840\"><figcaption id=\"caption-attachment-151534\" class=\"wp-caption-text\">Inklistrat kodutdrag i kodblocket<\/figcaption><\/figure>\n<h4>Steg 3: Publicera och visa resultaten<\/h4>\n<p>F\u00f6r att visa din kod p\u00e5 ditt WordPress-inl\u00e4gg eller din WordPress-sida avslutar du processen genom att klicka p\u00e5 knappen <strong>Publicera<\/strong>.<\/p>\n<p>Du kan dessutom f\u00e5 en uppfattning om hur det ser ut innan du publicerar genom att v\u00e4lja <strong>F\u00f6rhandsgranska<\/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=\"Klicka p\u00e5 Publicera\" width=\"929\" height=\"499\"><figcaption id=\"caption-attachment-151535\" class=\"wp-caption-text\">Klicka p\u00e5 Publicera<\/figcaption><\/figure>\n<p>N\u00e4r du har tryckt p\u00e5 <strong>Publicera<\/strong>-knappen kan du bes\u00f6ka liveversionen av inl\u00e4gget f\u00f6r att bekr\u00e4fta att din kodbit visas som r\u00e5kod.<\/p>\n<p>Som du kan se \u00e4r kodblocket ganska enkelt. Det erbjuder dock en n\u00f6dv\u00e4ndig funktionalitet f\u00f6r att beh\u00e5lla formateringen n\u00e4r du publicerar kod i blogginl\u00e4gg.<\/p>\n<p>Ta en titt p\u00e5 sk\u00e4rmdumpen nedan. I v\u00e5rt exempel h\u00e4r har ingenting \u00e4ndrats fr\u00e5n den ursprungliga kodbiten; den har helt enkelt presenterats p\u00e5 frontend i en gr\u00e5 ruta.<\/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=\"Kod som visas p\u00e5 frontend\" width=\"1031\" height=\"1190\"><figcaption id=\"caption-attachment-151536\" class=\"wp-caption-text\">Kod som visas p\u00e5 frontend<\/figcaption><\/figure>\n<h4>Steg 4: \u00d6verv\u00e4g att formatera kodblocket<\/h4>\n<p>F\u00f6r att f\u00e5 kodblocket att sticka ut lite, kan du \u00f6verv\u00e4ga att \u00e4ndra dess utseende fr\u00e5n standardinst\u00e4llningen.<\/p>\n<p>Om du vill visa stilalternativ f\u00f6r blocket markerar du <strong>kodblocket<\/strong> och v\u00e4ljer sedan knappen <strong>Inst\u00e4llningar<\/strong> (kugghjulsikonen). Detta \u00f6ppnar sedan fliken <strong>Block<\/strong>, som endast visar Blockinst\u00e4llningarna f\u00f6r det valda blocket &#8211; i det h\u00e4r fallet Kodblocket.<\/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 till Blockinst\u00e4llningar f\u00f6r kodformatering\" width=\"1056\" height=\"814\"><figcaption id=\"caption-attachment-151537\" class=\"wp-caption-text\">G\u00e5 till Blockinst\u00e4llningar f\u00f6r kodformatering<\/figcaption><\/figure>\n<p>Du kan styla kodblocket som du vill, med alternativ f\u00f6r att \u00e4ndra saker som text- och bakgrundsf\u00e4rger.<\/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=\"Redigera f\u00e4rg- och bakgrundsinst\u00e4llningar\" width=\"1044\" height=\"758\"><figcaption id=\"caption-attachment-151538\" class=\"wp-caption-text\">Redigera f\u00e4rg- och bakgrundsinst\u00e4llningar<\/figcaption><\/figure>\n<p>Du kan dessutom:<\/p>\n<ul>\n<li>\u00c4ndra storleken p\u00e5 texten: \u00c4ndra storleken p\u00e5 texten<\/li>\n<li>L\u00e4gga till stoppning och marginaler till kodrutan<\/li>\n<li>Inkludera en ram med en anpassad bredd och f\u00e4rg<\/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=\"Inst\u00e4llningar f\u00f6r storlek, dimensioner och ramar\" width=\"1050\" height=\"806\"><figcaption id=\"caption-attachment-151539\" class=\"wp-caption-text\">Inst\u00e4llningar f\u00f6r storlek, dimensioner och ramar<\/figcaption><\/figure>\n<p>Som alltid klickar du p\u00e5 knappen <strong>Publicera<\/strong> n\u00e4r du \u00e4r klar med redigeringen av blocket och visar sedan resultatet p\u00e5 frontend av ditt <a href=\"https:\/\/kinsta.com\/se\/blog\/anpassade-wordpress-inlaggstyper\/\">WordPress-inl\u00e4gg<\/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=\"Resultat p\u00e5 frontend\" width=\"1045\" height=\"1340\"><figcaption id=\"caption-attachment-151540\" class=\"wp-caption-text\">Resultat p\u00e5 frontend<\/figcaption><\/figure>\n<h3>Metod 2: Anv\u00e4ndning av ett plugin<\/h3>\n<p>Ett annat s\u00e4tt att visa kod i WordPress \u00e4r att <a href=\"https:\/\/kinsta.com\/blog\/how-to-install-wordpress-plugins\/\">installera ett plugin<\/a>.<\/p>\n<p>Den h\u00e4r metoden kan verka lite \u00f6verfl\u00f6dig med tanke p\u00e5 att WordPress redan har ett inbyggt kodblock. Vissa plugins erbjuder dock ytterligare funktioner och formateringsverktyg som g\u00f6r det v\u00e4rt att arbeta med ett plugin. Kort sagt s\u00e5 kan du g\u00f6ra dina kodblock vackrare \u00e4n vad du f\u00e5r med Gutenbergs standardkodblock.<\/p>\n<p>Dessutom kan vissa anv\u00e4ndare av den klassiska WordPress-redigeraren tycka att det \u00e4r l\u00e4ttare att jobba med ett plugin, eftersom det \u00e4r lite knepigare att visa kod i den redigeraren.<\/p>\n<p>Till att b\u00f6rja med m\u00e5ste du v\u00e4lja ett plugin f\u00f6r &#8221;syntax highlighter&#8221;, vilket \u00e4r ett tjusigt s\u00e4tt att s\u00e4ga att pluginet kommer att markera din k\u00e4llkod och h\u00e5lla dess formatering intakt.<\/p>\n<p>H\u00e4r \u00e4r n\u00e5gra v\u00e4lrenommerade plugins f\u00f6r att visa kod i 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 kommer att anv\u00e4nda Enlighter-pluginet i den h\u00e4r handledningen. Det erbjuder n\u00e4mligen alternativ f\u00f6r att m\u00e4rka vilka typer av kod som du visar i dina kodrutor, tillsammans med m\u00e5nga andra stilfunktioner. Du \u00e4r dock mer \u00e4n v\u00e4lkommen att prova de andra, eftersom samtliga g\u00f6r samma sak f\u00f6r det mesta.<\/p>\n<h4>Steg 1: Installera ett plugin f\u00f6r syntaxhighlighter<\/h4>\n<p>Installera Enlighter &#8211; Customizable Syntax Highlighter-plugin p\u00e5 din WordPress-webbplats med hj\u00e4lp av din f\u00f6redragna <a href=\"https:\/\/kinsta.com\/blog\/how-to-install-wordpress-plugins\/\">plugin-installationsmetod<\/a>.<\/p>\n<p>Efter aktivering \u00e4r pluginet redo att infoga kod i alla inl\u00e4gg\/sidor med ett Gutenberg-block eller den klassiska redigerarens\u00a0<strong>Infognings<\/strong>-knapp.<\/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=\"Pluginet Enlighter\" width=\"945\" height=\"309\"><figcaption id=\"caption-attachment-151541\" class=\"wp-caption-text\">Pluginet Enlighter<\/figcaption><\/figure>\n<h4>Steg 2: Infoga Enlighter Sourcecode Block i ett inl\u00e4gg<\/h4>\n<p>Om du anv\u00e4nder WordPress Gutenberg Blockredigerare s\u00e5 \u00f6ppnar du ett inl\u00e4gg d\u00e4r du vill visa koden. Klicka p\u00e5 en av knapparna f\u00f6r att\u00a0<strong>L\u00e4gga till block<\/strong> (+-ikonen) f\u00f6r att visa samlingen av tillg\u00e4ngliga block.<\/p>\n<p>Bl\u00e4ddra eller skriv in ett nyckelord f\u00f6r blocket <strong>Enlighten Sourcecode<\/strong>. Klicka d\u00e4refter p\u00e5 blocket f\u00f6r att infoga det i inl\u00e4gget.<\/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=\"Blocket hos Enlighter Sourcecode\" width=\"997\" height=\"575\"><figcaption id=\"caption-attachment-151542\" class=\"wp-caption-text\">Blocket hos Enlighter Sourcecode<\/figcaption><\/figure>\n<h4>Steg 3: Klistra in koden i syntaxhighlighterblocket<\/h4>\n<p>Blocket <strong>Enlighter Highlighter<\/strong> visas sedan i blockredigeraren, med en titel f\u00f6r <strong>&#8221;Generisk Highlighting&#8221;<\/strong> och ett f\u00e4lt f\u00f6r <strong>&#8221;Infoga k\u00e4llkod&#8230;&#8221;<\/strong>.<\/p>\n<p>Ta den kod som du vill visa p\u00e5 WordPress och klistra in\/skriv in den i f\u00e4ltet <strong>&#8221;Infoga k\u00e4llkod&#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=\"Anv\u00e4nd f\u00e4ltet Infoga k\u00e4llkod\" width=\"1022\" height=\"381\"><figcaption id=\"caption-attachment-151543\" class=\"wp-caption-text\">Anv\u00e4nd f\u00e4ltet Infoga k\u00e4llkod<\/figcaption><\/figure>\n<p>Som en syntaxhighlighter bevarar pluginet alla val av formatering och flikar. N\u00e4r du \u00e4r n\u00f6jd med resultatet klickar du p\u00e5 knappen <strong>Publicera<\/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=\"Klicka p\u00e5 Publicera\" width=\"991\" height=\"849\"><figcaption id=\"caption-attachment-151544\" class=\"wp-caption-text\">Klicka p\u00e5 Publicera<\/figcaption><\/figure>\n<h4>Steg 4: F\u00f6rhandsgranska koden p\u00e5 Frontend<\/h4>\n<p>Med detta s\u00e5 kan du visa frontend av ditt inl\u00e4gg f\u00f6r att se vad webbplatsens bes\u00f6kare ser.<\/p>\n<p>Enlighter-pluginet erbjuder ett minimalistiskt standardtema f\u00f6r visning av kod, med radnummer f\u00f6r att underl\u00e4tta organisering och h\u00e4nvisning.<\/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=\"Visas p\u00e5 frontend\" width=\"1098\" height=\"728\"><figcaption id=\"caption-attachment-151545\" class=\"wp-caption-text\">Visas p\u00e5 frontend<\/figcaption><\/figure>\n<p>Som vi n\u00e4mnde har anv\u00e4ndningen av ett plugin f\u00f6r att visa kod i WordPress f\u00f6rdelar j\u00e4mf\u00f6rt med de andra metoderna. Frontend-versionen av Enlighter syntax-pluginet framh\u00e4ver exempelvis linjer n\u00e4r anv\u00e4ndaren scrollar \u00f6ver din kod.<\/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=\"Framh\u00e4vda kodlinjer\" width=\"1035\" height=\"512\"><figcaption id=\"caption-attachment-151546\" class=\"wp-caption-text\">Framh\u00e4vda kodlinjer<\/figcaption><\/figure>\n<p>Det finns dessutom flera knappar i det \u00f6vre h\u00f6gra h\u00f6rnet av kodrutan, bland annat en som visar koden i ren text, utan radnummer.<\/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 f\u00f6r vanlig text\" width=\"1020\" height=\"468\"><figcaption id=\"caption-attachment-151547\" class=\"wp-caption-text\">Knappen f\u00f6r vanlig text<\/figcaption><\/figure>\n<p>Den andra knappen heter\u00a0<strong>Kopiera<\/strong> <strong>till<\/strong> <strong>klippbordet<\/strong>, som omedelbart kopierar allt i kodrutan till anv\u00e4ndarens klippbord. De kan sedan klistra in detta i vilken applikation som helst.<\/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=\"Kopiera till Urklipp-knappen\" width=\"946\" height=\"466\"><figcaption id=\"caption-attachment-151548\" class=\"wp-caption-text\">Kopiera till Urklipp-knappen<\/figcaption><\/figure>\n<p>Slutligen \u00f6ppnar den tredje knappen koden i ett nytt f\u00f6nster och presenterar den i en ren textversion av webbl\u00e4sarf\u00f6nstret.<\/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=\"\u00d6ppna koden i nytt f\u00f6nster\" width=\"986\" height=\"456\"><figcaption id=\"caption-attachment-151549\" class=\"wp-caption-text\">\u00d6ppna koden i nytt f\u00f6nster<\/figcaption><\/figure>\n<h4>Steg 5: St\u00e4ll in spr\u00e5k- och linjeinst\u00e4llningar f\u00f6r kodrutan<\/h4>\n<p>Enlighter-pluginet levereras med olika teman och kraftfulla anpassningsverktyg. Allt f\u00f6r att kodrutan ska se ut som du vill. Om du hellre vill slippa anv\u00e4nda standardtemat g\u00e5r du tillbaka till ditt inl\u00e4gg i WordPress och klickar p\u00e5 det f\u00f6r n\u00e4rvarande \u00f6ppna <strong>Enlighter-kodblocket<\/strong>.<\/p>\n<p>Detta avsl\u00f6jar sidof\u00e4ltet <strong>Block<\/strong> i WordPress. Om detta inte visas ska du se till att klicka p\u00e5 knappen <strong>Inst\u00e4llningar<\/strong> (kugghjulsikonen) i det \u00f6vre h\u00f6gra h\u00f6rnet av WordPress-f\u00f6nstret.<\/p>\n<p>Den f\u00f6rsta inst\u00e4llningen att anpassa \u00e4r f\u00e4ltet <strong>Spr\u00e5k<\/strong> &#8211; detta talar om f\u00f6r pluginet vilket kodspr\u00e5k som visas s\u00e5 att det kan erbjuda r\u00e4tt formatering och markering.<\/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=\"Spr\u00e5kf\u00e4ltet\" width=\"1148\" height=\"733\"><figcaption id=\"caption-attachment-151550\" class=\"wp-caption-text\">Spr\u00e5kf\u00e4ltet<\/figcaption><\/figure>\n<p>Det finns en hel del kodspr\u00e5k att v\u00e4lja mellan, s\u00e5 bl\u00e4ddra igenom listan och v\u00e4lj det som passar b\u00e4st f\u00f6r dig.<\/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=\"Att v\u00e4lja spr\u00e5k\" width=\"1171\" height=\"886\"><figcaption id=\"caption-attachment-151551\" class=\"wp-caption-text\">Att v\u00e4lja spr\u00e5k<\/figcaption><\/figure>\n<p>F\u00e4ltet <strong>S\u00e4rskilda rader\u00a0<\/strong>markerar sedan alla rader som du anger. F\u00f6r att f\u00e5 detta att h\u00e4nda skriver du in linjenummer separerade med kommatecken.<\/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\u00e4rskilda rader\" width=\"1024\" height=\"700\"><figcaption id=\"caption-attachment-151552\" class=\"wp-caption-text\">S\u00e4rskilda rader<\/figcaption><\/figure>\n<p>Som ett resultat ser webbplatsbes\u00f6karna markerade rader f\u00f6r alla de rader som du har angett.<\/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=\"Rader som markeras p\u00e5 frontend\" width=\"982\" height=\"477\"><figcaption id=\"caption-attachment-151553\" class=\"wp-caption-text\">Rader som markeras p\u00e5 frontend<\/figcaption><\/figure>\n<p>F\u00e4ltet <strong>Val av rad\u00a0<\/strong>\u00e4r ett s\u00e4tt att b\u00f6rja kodutdraget vid en specifik numrerad rad, vilket \u00e4r f\u00f6rdelaktigt om du bara visar en delm\u00e4ngd kod som ing\u00e5r i en st\u00f6rre samling rader.<\/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=\"F\u00e4ltet Val av rad\" width=\"1046\" height=\"447\"><figcaption id=\"caption-attachment-151554\" class=\"wp-caption-text\">F\u00e4ltet Val av rad<\/figcaption><\/figure>\n<p>Som du kan se b\u00f6rjar hela kodrutan vid nummer 10 n\u00e4r du skriver 10 i f\u00e4ltet <strong>Val av rad<\/strong>.<\/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=\"Starta dokumentet p\u00e5 en specifik rad\" width=\"900\" height=\"463\"><figcaption id=\"caption-attachment-151555\" class=\"wp-caption-text\">Starta dokumentet p\u00e5 en specifik rad<\/figcaption><\/figure>\n<h4>Steg 6: V\u00e4lj ett tema<\/h4>\n<p>Enlighter-temat \u00e4r standardtemat f\u00f6r det h\u00e4r pluginet. I f\u00e4ltet <strong>Tema<\/strong> (fortfarande under panelen Blockinst\u00e4llningar) finns det dock ett stort antal inbyggda teman att v\u00e4lja mellan.<\/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=\"Temaalternativ\" width=\"942\" height=\"771\"><figcaption id=\"caption-attachment-151556\" class=\"wp-caption-text\">Temaalternativ<\/figcaption><\/figure>\n<p>Godzilla-temat visar exempelvis kod som om den l\u00e5g ovanp\u00e5 ett diagram- eller ett ritpapper.<\/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-temat\" width=\"1007\" height=\"563\"><figcaption id=\"caption-attachment-151557\" class=\"wp-caption-text\">Godzilla-temat<\/figcaption><\/figure>\n<p>Atomic-temat \u00e4ndrar ist\u00e4llet bakgrunden till ett m\u00f6rkt tema och erbjuder huvudsakligen vit text och rosa f\u00e4rg f\u00f6r kodtaggar.<\/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-temat\" width=\"1063\" height=\"646\"><figcaption id=\"caption-attachment-151558\" class=\"wp-caption-text\">Atomic-temat<\/figcaption><\/figure>\n<p>Ett annat exempel \u00e4r Classic-temat, som \u00e4r en mindre minimalistisk version av Enlighter-temat med ljusare f\u00e4rger och mer definierade rader.<\/p>\n<figure id=\"attachment_151559\" aria-describedby=\"caption-attachment-151559\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151559 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6a3cbf74437e460ba4f884eb05cee863.jpg\" alt=\"Classic-temat\" width=\"1020\" height=\"660\"><figcaption id=\"caption-attachment-151559\" class=\"wp-caption-text\">Classic-temat<\/figcaption><\/figure>\n<h4>Steg 7: \u00d6verv\u00e4g att bygga ett eget tema<\/h4>\n<p>Enlighter-pluginet har en flik inne i <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-admin\/\">WordPress-instrumentpanelen<\/a> f\u00f6r att anpassa varje aspekt av pluginet och dess framh\u00e4vande funktioner.<\/p>\n<p>F\u00f6r att f\u00e5 full kontroll \u00f6ver utformningen och visningen av dina kodrutor g\u00e5r du till fliken <strong>Enlighter<\/strong> (&lt;&gt;-ikonen) och v\u00e4ljer sedan <strong>Utseende<\/strong> eller <strong>Temaanpassare<\/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=\"Temaanpassare\" width=\"903\" height=\"474\"><figcaption id=\"caption-attachment-151560\" class=\"wp-caption-text\">Temaanpassare<\/figcaption><\/figure>\n<p>P\u00e5 fliken <strong>Utseende<\/strong> kan du v\u00e4lja ett standardtema och samtidigt f\u00e5 tillg\u00e5ng till att justera element som exempelvis:<\/p>\n<ul>\n<li>Kodinh\u00e4mtning<\/li>\n<li>\u00d6verfl\u00f6d av text<\/li>\n<li>Radnumrering<\/li>\n<li>Effekt av linjeskjutning<\/li>\n<li>R\u00e5kod vid dubbelklick<\/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=\"Sektionen Utseende i anpassningsverktyget f\u00f6r temat\" width=\"1083\" height=\"830\"><figcaption id=\"caption-attachment-151561\" class=\"wp-caption-text\">Sektionen Utseende i anpassningsverktyget f\u00f6r temat<\/figcaption><\/figure>\n<p><strong>Temaanpassnings-sektionen\u00a0<\/strong>inneh\u00e5ller en l\u00e5ng lista med flikar f\u00f6r att bygga ett tema f\u00f6r kodmarkerare fr\u00e5n grunden. Det finns dessutom alternativ f\u00f6r att justera knappar, uttryck, spr\u00e5k med mera.<\/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=\"Ytterligare inst\u00e4llningar\" width=\"987\" height=\"865\"><figcaption id=\"caption-attachment-151562\" class=\"wp-caption-text\">Ytterligare inst\u00e4llningar<\/figcaption><\/figure>\n<h4>Bonus: Anv\u00e4ndning av Enlighter med den klassiska redigeraren<\/h4>\n<p>Enlighter-pluginet fungerar n\u00e5got annorlunda f\u00f6r dem som fortfarande anv\u00e4nder den klassiska WordPress-redigeraren.<\/p>\n<p>N\u00e4r du har installerat Enlighter-pluginet g\u00e5r du till ett inl\u00e4gg eller en sida och hittar knappen <strong>Enlighter\u2019s kodinfogare<\/strong>\u00a0i kontrollpanelen i redigeraren.<\/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=\"Infogning av Enlighter-kod\" width=\"969\" height=\"434\"><figcaption id=\"caption-attachment-151563\" class=\"wp-caption-text\">Infogning av Enlighter-kod<\/figcaption><\/figure>\n<p>D\u00e5 \u00f6ppnas ett nytt f\u00f6nster som heter <strong>Enlighter\u2019s kodinfogare<\/strong>.<\/p>\n<p>Klistra in den kod som du vill visa i det stora (om\u00e4rkta) f\u00e4ltet l\u00e4ngst ner.<\/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=\"Klistra in koden\" width=\"985\" height=\"795\"><figcaption id=\"caption-attachment-151564\" class=\"wp-caption-text\">Klistra in koden<\/figcaption><\/figure>\n<p>Klicka p\u00e5 rullgardinsmenyn fr\u00e5n f\u00e4ltet <strong>Spr\u00e5k<\/strong> f\u00f6r att v\u00e4lja r\u00e4tt kodningsspr\u00e5k.<\/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\u00e4lj ett spr\u00e5k\" width=\"983\" height=\"660\"><figcaption id=\"caption-attachment-151565\" class=\"wp-caption-text\">V\u00e4lj ett spr\u00e5k<\/figcaption><\/figure>\n<p>N\u00e4r du \u00e4r klar klickar du p\u00e5 knappen <strong>OK<\/strong>. Du kan dessutom g\u00f6ra justeringar av de andra funktionerna i det f\u00f6nstret, exempelvis l\u00e4gga till radindragning.<\/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=\"Exempel p\u00e5 radindragning\" width=\"980\" height=\"623\"><figcaption id=\"caption-attachment-151566\" class=\"wp-caption-text\">Exempel p\u00e5 radindragning<\/figcaption><\/figure>\n<p>Klicka p\u00e5 knappen <strong>Publicera<\/strong> f\u00f6r inl\u00e4gget och visa sedan resultatet i frontend. Standardkodrutan f\u00f6r den klassiska redigeraren \u00e4r ett m\u00f6rkt tema, men du kan \u00e4ndra utseendet p\u00e5 kodrutan och till och med skapa egna teman.<\/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=\"Publicerad version\" width=\"922\" height=\"743\"><figcaption id=\"caption-attachment-151567\" class=\"wp-caption-text\">Publicerad version<\/figcaption><\/figure>\n<h3>Metod 3: Anv\u00e4ndning av ett kodningsverktyg<\/h3>\n<p>Encoder-verktyg \u00e4r ett alternativ n\u00e4r du f\u00f6rs\u00f6ker visa kod i WordPress, s\u00e4rskilt om du inte t\u00e4nker g\u00f6ra det s\u00e5 ofta (och hellre vill slippa kr\u00e5ngla med ett plugin).<\/p>\n<p>HTML-kodare bevarar integriteten hos kodformat, s\u00e4rskilt de med specialtecken och tabulatorer. Kodare kan hantera alla typer av kod, men de \u00f6vers\u00e4tter sedan den infogade koden till HTML-klar kod som \u00e4r l\u00e4tt att klistra in i WordPress.<\/p>\n<p>Det finns inga p\u00e5litliga kodningsverktyg som plugins. M\u00e5nga erbjuds dock som kostnadsfria webbappar fr\u00e5n tredje part. Observera dessutom att kodningsverktyg inte erbjuder n\u00e5gra stylingverktyg. Du f\u00e5r bara koden som den ska visas (inga tjusiga rutor eller funktioner f\u00f6r radanpassning).<\/p>\n<p>N\u00e5gra p\u00e5litliga kodningsverktyg \u00e4r exempelvis:<\/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 and Decoder<\/a><\/li>\n<\/ul>\n<p>Enligt v\u00e5ra tester \u00e4r det mest effektiva kodningsverktyget W3Docs HTML Encoder, s\u00e5 vi kommer att anv\u00e4nda detta i den h\u00e4r handledningen.<\/p>\n<h4>Steg 1: \u00d6ppna kodaren och v\u00e4lj inst\u00e4llningar<\/h4>\n<p>G\u00e5 till webbplatsen f\u00f6r W3Docs HTML Encoder.<\/p>\n<p>P\u00e5 sidan visas tv\u00e5 rutf\u00e4lt som ligger sida vid sida. I det v\u00e4nstra f\u00e4ltet ska du klistra in din kod. Det till h\u00f6ger visar den kodade versionen som du ska kopiera och klistra in i WordPress.<\/p>\n<p>Du m\u00e5ste dock f\u00f6rst st\u00e4lla in vilken typ av kod som du vill bevara:<\/p>\n<ul>\n<li>V\u00e4lj <strong>JavaScript unicode<\/strong> om du klistrar in kod med JavaScript-element.<\/li>\n<li>V\u00e4lj <strong>HTML-symboler<\/strong> om du anv\u00e4nder 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\u00e4lj HTML-symboler\" width=\"1155\" height=\"718\"><figcaption id=\"caption-attachment-151568\" class=\"wp-caption-text\">V\u00e4lj HTML-symboler<\/figcaption><\/figure>\n<h4>Steg 2: Klistra in och klicka f\u00f6r att koda<\/h4>\n<p>Klistra in den kod som du vill visa i WordPress i det v\u00e4nstra f\u00e4ltet. Leta sedan upp och klicka p\u00e5 knappen <strong>Koda<\/strong> ovanf\u00f6r till h\u00f6ger.<\/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=\"Klicka f\u00f6r att koda\" width=\"1147\" height=\"621\"><figcaption id=\"caption-attachment-151569\" class=\"wp-caption-text\">Klicka f\u00f6r att koda<\/figcaption><\/figure>\n<h4>Steg 3: Kopiera det avkodade resultatet<\/h4>\n<p>Den f\u00e4rdiga produkten kan se f\u00f6rvirrande ut, men det \u00e4r i sj\u00e4lva verket en kombination av HTML-element som bevarar varje aspekt av den kod du infogat. Allt sker dessutom utan att koden aktiveras och visar n\u00e5got annat p\u00e5 frontend.<\/p>\n<p>Klicka p\u00e5 knappen <strong>Kopiera<\/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=\"Kopiera koden\" width=\"1156\" height=\"623\"><figcaption id=\"caption-attachment-151570\" class=\"wp-caption-text\">Kopiera koden<\/figcaption><\/figure>\n<h4>Steg 4: Klistra in den kodade HTML-koden i WordPress kod- eller textredigerare<\/h4>\n<p>G\u00e5 tillbaka till WordPress och \u00f6ppna det \u00f6nskade inl\u00e4gget eller sidan.<\/p>\n<p>V\u00e4lj menyalternativet <strong>Alternativ<\/strong> (tre vertikala prickar) i det \u00f6vre h\u00f6gra h\u00f6rnet. Klicka p\u00e5 alternativet <strong>Kodredigerare<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Avst\u00e5 fr\u00e5n att f\u00f6rs\u00f6ka anv\u00e4nda blocket Anpassad HTML f\u00f6r den h\u00e4r processen, eftersom det inte verkar fungera.<\/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 till menyn Alternativ\" width=\"1087\" height=\"613\"><figcaption id=\"caption-attachment-151571\" class=\"wp-caption-text\">G\u00e5 till menyn Alternativ<\/figcaption><\/figure>\n<p>Du ser nu <strong>kodredigeraren<\/strong> i st\u00e4llet f\u00f6r den visuella blockredigeraren. Hitta det omr\u00e5de d\u00e4r du vill visa koden och klistra in din kodade HTML i redigeraren.<\/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=\"Klistra in kodad HTML\" width=\"901\" height=\"870\"><figcaption id=\"caption-attachment-151572\" class=\"wp-caption-text\">Klistra in kodad HTML<\/figcaption><\/figure>\n<p>Om du anv\u00e4nder den klassiska WordPress-redigeraren m\u00e5ste du g\u00e5 till fliken Text, som \u00e4r densamma som kodredigeraren fr\u00e5n Gutenberg\u2019s blockredigerare.<\/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=\"Fliken Text\" width=\"967\" height=\"736\"><figcaption id=\"caption-attachment-151573\" class=\"wp-caption-text\">Fliken Text<\/figcaption><\/figure>\n<h4>Steg 5: Publicera och visa koden<\/h4>\n<p>Klicka p\u00e5 <strong>Uppdatera<\/strong> eller <strong>Publicera<\/strong> f\u00f6r inl\u00e4gget och navigera sedan till inl\u00e4ggets frontend f\u00f6r att se hur det ser ut.<\/p>\n<p>Du b\u00f6r se den ursprungliga koden som klistrades in i kodaren, innan verktyget lade till HTML-kodningselement. Som vi n\u00e4mnde tidigare s\u00e5 finns det inga stylingfunktioner med kodarna, s\u00e5 detta \u00e4r en utm\u00e4rkt metod f\u00f6r ett rent, minimalistiskt utseende.<\/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=\"Publicerad kod\" width=\"1083\" height=\"808\"><figcaption id=\"caption-attachment-151574\" class=\"wp-caption-text\">Publicerad kod<\/figcaption><\/figure>\n<h3>Metod 4: Anv\u00e4ndning av en anpassad kortkod<\/h3>\n<p>Att <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-kortkoder\/\">skapa en anpassad kortkod<\/a> g\u00f6r jobbet med att infoga delar av \u00e5teranv\u00e4ndbar kod utan att du beh\u00f6ver kopiera och klistra in den. Det \u00e4r d\u00e4rf\u00f6r som anpassade kortkoder erbjuder en solid m\u00f6jlighet att visa kod p\u00e5 WordPress.<\/p>\n<p>H\u00e4r \u00e4r f\u00f6rdelarna med att anv\u00e4nda anpassade kortkoder f\u00f6r att visa kod:<\/p>\n<ol>\n<li>Med anpassade kortkoder kan du spara komplicerad kod en g\u00e5ng och sedan \u00e5teranv\u00e4nda den. Som ett resultat s\u00e5 elimineras behovet av att skriva l\u00e4ngre kodstycken varje g\u00e5ng.<\/li>\n<li>Du kan skriva din egen stils\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/css-basta-metoderna\/\">CSS<\/a> f\u00f6r kodmarkerare och rutor.<\/li>\n<li>Kortkoder kan anv\u00e4ndas av vem som helst. Andra bidragsgivare kan d\u00e4rf\u00f6r dra nytta av dina kodmarkerare och ditt block med ett knapptryck.<\/li>\n<\/ol>\n<p>F\u00f6r att skapa en egen kortkod kr\u00e4vs erfarenhet av att redigera <a href=\"https:\/\/kinsta.com\/blog\/what-is-a-wordpress-theme\/#whats-inside-those-wordpress-files\">WordPress-temafiler<\/a>, <a href=\"https:\/\/kinsta.com\/se\/blog\/php-redigerarna\/\">arbeta med PHP-kod<\/a> och eventuellt skapa WordPress-plugins. P\u00e5 grund av dessa krav kan det vara sv\u00e5rt f\u00f6r dem som \u00e4r nya i PHP att g\u00f6ra en anpassad snabbkod f\u00f6r WordPress.<\/p>\n<p>Den f\u00e4rdiga produkten resulterar dock i ett betydligt enklare s\u00e4tt att visa kod i WordPress.<\/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-kortkod\" width=\"1558\" height=\"842\"><figcaption id=\"caption-attachment-151575\" class=\"wp-caption-text\">HTML-kortkod<\/figcaption><\/figure>\n<p>Du kan namnge den anpassade kortkoden till vad du vill och skapa flera alternativ, som <code>[html] [\/html]<\/code> och <code>[css] [\/css]<\/code>, f\u00f6r olika kodningsspr\u00e5k.<\/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-kortkod\" width=\"1647\" height=\"714\"><figcaption id=\"caption-attachment-151576\" class=\"wp-caption-text\">CSS-kortkod<\/figcaption><\/figure>\n<p>T\u00e4nk p\u00e5 att anpassade kortkoder fungerar b\u00e4st f\u00f6r syntaxmarkering n\u00e4r du anv\u00e4nder <strong>textredigeraren<\/strong> (i WordPress klassiska redigerare) eller rutan <strong>Anpassad<\/strong> <strong>HTML<\/strong> n\u00e4r du arbetar med WordPress Gutenberg Blockredigerare.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Kortkod-blocket fr\u00e5n Gutenberg \u00e4r ett alternativ. Under v\u00e5ra tester f\u00f6rlorade vissa kodutdrag dock viktiga formateringselement eller tecken i vissa kodutdrag.<\/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=\"Textredigerare\" width=\"1063\" height=\"534\"><figcaption id=\"caption-attachment-151577\" class=\"wp-caption-text\">Textredigerare<\/figcaption><\/figure>\n<p>M\u00e5let \u00e4r att bygga en anpassad kortkod d\u00e4r du kan skriva eller klistra in kod mellan kortkodens \u00f6ppnings- och sluttaggar.<\/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=\"Kod som klistras in i HTML-kortkoden\" width=\"1487\" height=\"834\"><figcaption id=\"caption-attachment-151578\" class=\"wp-caption-text\">Kod som klistras in i HTML-kortkoden<\/figcaption><\/figure>\n<p>N\u00e4r du har publicerat dina anpassade inst\u00e4llningar f\u00f6r stil kommer markeringar f\u00f6r din anpassade kortkod att visas i frontend. Och koden som du har lagt till visas snyggt i syntaxhighlightern.<\/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=\"Vyn p\u00e5 frontend\" width=\"1357\" height=\"897\"><figcaption id=\"caption-attachment-151579\" class=\"wp-caption-text\">Vyn p\u00e5 frontend<\/figcaption><\/figure>\n<h3>Metod 5: Anv\u00e4ndning av <code><code><\/code>&lt;code&gt; and &lt;pre&gt;<\/code> Taggar<\/h3>\n<p>Det kanske \u00e4ldsta &#8211; men fortfarande otroligt p\u00e5litliga &#8211; s\u00e4ttet att visa kod i WordPress \u00e4r att helt enkelt l\u00e4gga till specifika HTML-taggar runt kodstycket. Den h\u00e4r metoden \u00e4r b\u00e4st n\u00e4r du arbetar med den klassiska WordPress-redigeraren, eller i vilken HTML-redigerare som helst.<\/p>\n<p>Det finns tv\u00e5 alternativ:<\/p>\n<ol>\n<li><strong><code>&lt;code&gt;<\/code> taggar:<\/strong> B\u00e4st f\u00f6r att visa en kort kodrad; anv\u00e4nds ofta i stycken<\/li>\n<li><strong><code>&lt;pre&gt;<\/code> taggar:<\/strong> Idealisk f\u00f6r l\u00e4ngre kodblock eller n\u00e4r du vill ha fler formateringsalternativ<\/li>\n<\/ol>\n<h4>Alternativ 1: Anv\u00e4nd <code>&lt;code&gt;<\/code>-taggar f\u00f6r kodutdrag p\u00e5 rad<\/h4>\n<p>Inneh\u00e5llsskapare som skriver om kodning vill inte alltid anv\u00e4nda stora kodblock. Ibland \u00e4r det vettigare att inkludera en snabb kodbit i ett stycke.<\/p>\n<p>Du m\u00e5ste dock fortfarande markera och bevara kodens formatering. Och viss kod kan orsaka problem med det omgivande inneh\u00e5llet om den inte bevaras p\u00e5 r\u00e4tt s\u00e4tt.<\/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=\"En brytpunkt\" width=\"908\" height=\"371\"><figcaption id=\"caption-attachment-151580\" class=\"wp-caption-text\">En brytpunkt<\/figcaption><\/figure>\n<p>L\u00e5t oss ta <code>&lt;br&gt;<\/code>-taggen som exempel. Utan <code>&lt;code&gt;<\/code>-taggen skulle den helt enkelt l\u00e4gga till en brytpunkt i ditt stycke.<\/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=\"En o\u00f6nskad brytpunkt\" width=\"1020\" height=\"390\"><figcaption id=\"caption-attachment-151581\" class=\"wp-caption-text\">En o\u00f6nskad brytpunkt<\/figcaption><\/figure>\n<p>Om du placerar kodningen inuti dessa taggar f\u00e5r du ett mycket renare resultat:<\/p>\n<pre><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/pre>\n<p>\u00d6ppna ett WordPress-inl\u00e4gg och aktivera antingen <strong>kodredigeraren<\/strong> (f\u00f6r Gutenberg Blockredigeraren) eller <strong>textredigeraren<\/strong> (om du anv\u00e4nder WordPress klassiska redigerare).<\/p>\n<p>Klistra in eller skriv in dessa taggar n\u00e5gonstans i redigeraren; infoga inte koden som du vill visa \u00e4nnu. L\u00e4gg i st\u00e4llet till ett mellanslag mellan taggarna.<\/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=\"Utrymme mellan kodtaggar\" width=\"1111\" height=\"313\"><figcaption id=\"caption-attachment-151582\" class=\"wp-caption-text\">Utrymme mellan kodtaggar<\/figcaption><\/figure>\n<p>Byt till <strong>Visuell redigerare<\/strong>\u00a0(oavsett om du \u00e4r i Gutenberg eller WordPress klassiska redigerare).<\/p>\n<p>Du kommer att se ett litet gr\u00e5tt utrymme inuti det visuella inneh\u00e5llet. Klicka d\u00e4refter f\u00f6r att placera mark\u00f6ren inom det gr\u00e5 utrymmet. Det \u00e4r h\u00e4r som du kan klistra in eller skriva in koden f\u00f6r 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\u00e5tt utrymme f\u00f6r att skriva kod\" width=\"988\" height=\"280\"><figcaption id=\"caption-attachment-151583\" class=\"wp-caption-text\">Gr\u00e5tt utrymme f\u00f6r att skriva kod<\/figcaption><\/figure>\n<p>N\u00e4r du skriver expanderar det gr\u00e5 utrymmet f\u00f6r att rymma kodstycket. Klicka p\u00e5 knappen <strong>Publicera<\/strong> eller <strong>Uppdatera<\/strong> f\u00f6r det inl\u00e4gget.<\/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=\"Skrivning av kod i det gr\u00e5 utrymmet\" width=\"1019\" height=\"367\"><figcaption id=\"caption-attachment-151584\" class=\"wp-caption-text\">Skrivning av kod i det gr\u00e5 utrymmet<\/figcaption><\/figure>\n<p>P\u00e5 inl\u00e4ggets frontend ser du nu koden bevarad som den ska vara och utan n\u00e5gon konstig aktivitet (som att det l\u00e4ggs till en brytpunkt i inneh\u00e5llet).<\/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=\"Brytningstaggen visas utan att det faktiskt l\u00e4ggs till en brytpunkt\" width=\"1163\" height=\"449\"><figcaption id=\"caption-attachment-151585\" class=\"wp-caption-text\">Brytningstaggen visas utan att det faktiskt l\u00e4ggs till en brytpunkt<\/figcaption><\/figure>\n<p>Formateringen av dessa <code>&lt;code&gt;<\/code>-taggar \u00e4r vanligtvis barebones. Detta beror dock ofta p\u00e5 ditt temas styling. V\u00e5rt exempel \u00e4ndrar exempelvis bara typsnittet men inkluderar inte en gr\u00e5 bakgrund.<\/p>\n<h4>Alternativ 2: Anv\u00e4nd <code>&lt;pre&gt;<\/code>-taggar f\u00f6r l\u00e4ngre kodblock<\/h4>\n<p>L\u00e4ngre kodutdrag f\u00f6rtj\u00e4nar egna block, separerade fr\u00e5n det inneh\u00e5ll som du skriver i stycken. F\u00f6r dessa rekommenderar vi att du h\u00e5ller dig till <code>&lt;pre&gt;<\/code>-taggarna.<\/p>\n<p>Processen f\u00f6r att l\u00e4gga till en <code>&lt;pre&gt;<\/code>-tagg \u00e4r precis som med <code>&lt;code&gt;<\/code>-taggarna, men du har mer utrymme att arbeta med n\u00e4r det g\u00e4ller att infoga din kod.<\/p>\n<p>G\u00e5 till ett inl\u00e4gg och \u00f6ppna redigeraren <strong>Kod<\/strong> (Gutenberg) eller <strong>Text<\/strong> (WordPress klassiska redigerare). Klistra sedan in eller skriv in koden som du vill visa. Omge d\u00e4refter koden med dessa taggar:<\/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-taggar\" width=\"1099\" height=\"596\"><figcaption id=\"caption-attachment-151586\" class=\"wp-caption-text\">Pre-taggar<\/figcaption><\/figure>\n<p>V\u00e4xla till den <strong>visuella<\/strong> redigeraren f\u00f6r att se hur det ser ut. Du kommer att m\u00e4rka att textavsnittet kommer att ha en <strong>&#8221;f\u00f6r-formatterad&#8221;<\/strong>\u00a0m\u00e4rkning, vilket \u00e4r precis vad <code>&lt;pre&gt;<\/code>-taggens syfte \u00e4r.<\/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\u00e4lj alternativet f\u00f6r-formattering\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-151587\" class=\"wp-caption-text\">V\u00e4lj alternativet f\u00f6r-formattering<\/figcaption><\/figure>\n<p>Klicka p\u00e5 <strong>Publicera<\/strong> eller <strong>Uppdatera<\/strong> och v\u00e4xla sedan till frontend f\u00f6r att se din kod i dess ursprungliga form. I likhet med <code>&lt;code&gt;<\/code>-taggarna \u00e4r <code>&lt;pre&gt;<\/code>-taggarna usla p\u00e5 formatering. Som ett resultat f\u00e5r du ett s\u00e5 enkelt utseende som m\u00f6jligt. Det finns dock s\u00e4tt att styla dessa sj\u00e4lv.<\/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=\"Resultat i frontend\" width=\"1177\" height=\"759\"><figcaption id=\"caption-attachment-151588\" class=\"wp-caption-text\">Resultat i frontend<\/figcaption><\/figure>\n<h5>Tips f\u00f6r att styla &lt;pre&gt;-taggar<\/h5>\n<p><code>&lt;pre&gt;<\/code>-taggarna \u00e4r mindre stabila \u00e4n <code>&lt;code&gt;<\/code>-taggarna. Du kan d\u00e4rf\u00f6r st\u00f6ta p\u00e5 sv\u00e5righeter beroende p\u00e5 vilken typ av kod som du f\u00f6rs\u00f6ker visa.<\/p>\n<p>Anv\u00e4nd de h\u00e4r tipsen f\u00f6r att f\u00f6rb\u00e4ttra hur koden ser ut:<\/p>\n<ul>\n<li>G\u00f6r ditt b\u00e4sta f\u00f6r att ta bort eller helt undvika radbrytningar, eftersom <code>&lt;pre&gt;<\/code>-taggarna ofta inte k\u00e4nner igen dem. De reagerar generellt d\u00e5ligt p\u00e5 f\u00f6r m\u00e5nga radbrytningar.<\/li>\n<li>\u00d6verv\u00e4g att l\u00e4gga till en <code>overflow-x:auto;<\/code>-egenskap i din CSS f\u00f6r att l\u00e4gga till rullningsfunktionalitet i <code>&lt;pre&gt;<\/code>-taggens kod. Detta underl\u00e4ttar vid \u00f6verfl\u00f6digt inneh\u00e5ll, eftersom <code>&lt;pre&gt;<\/code>-taggen i sig sj\u00e4lvt l\u00e5ter koden rinna ut \u00f6ver sidan.<\/li>\n<li>H\u00e5ll dig till typsnitt med en enda stavelse.<\/li>\n<\/ul>\n<p>Du kan dessutom styla textformateringen och rutan bakom koden. H\u00e4r \u00e4r en startmall som du kan <a href=\"https:\/\/kinsta.com\/blog\/edit-wordpress-code\/\">l\u00e4gga till i 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>Metod 6: Anv\u00e4nda en Markdown-redigerare som \u00e4r ansluten till WordPress<\/h3>\n<p>Markdown-redigerare ger inte bara m\u00f6jlighet att skriva och formatera snabbare. M\u00e5nga av dem ansluter dessutom direkt till WordPress f\u00f6r omedelbar publicering direkt fr\u00e5n redigeraren.<\/p>\n<p>M\u00e5nga skribenter v\u00e4nder sig till markdown-redigerare tack vare denna snabba inneh\u00e5llsskapande process. Som tur \u00e4r erbjuder vissa av dessa redigerare markdown f\u00f6r kodblock. Som ett resultat kan du visa kod i markdown-redigeraren och sedan skicka den direkt till WordPress f\u00f6r publicering.<\/p>\n<p>T\u00e4nk p\u00e5 att <a href=\"https:\/\/kinsta.com\/se\/blog\/basta-textredigerarna\/\">vanliga textredigerare<\/a> (som <a href=\"https:\/\/kinsta.com\/blog\/how-to-use-sublime-text\/\">Sublime Text<\/a>) inte bevarar kodens integritet n\u00e4r den \u00f6verf\u00f6rs f\u00f6r publicering p\u00e5 WordPress. <a href=\"https:\/\/kinsta.com\/se\/blog\/gratis-html-redigerare\/\">HTML-redigerare<\/a> \u00e4r utm\u00e4rkta f\u00f6r att skriva och lagra kod, men de har inte heller de markeringsfunktioner som kr\u00e4vs f\u00f6r att bevara koden f\u00f6r publicering i WordPress.<\/p>\n<p>Det finns <a href=\"https:\/\/kinsta.com\/se\/blog\/markdown-redigerarna\/\">gott om markdown-redigerare<\/a> att v\u00e4lja mellan, men de idealiska l\u00f6sningarna har tv\u00e5 gemensamma funktioner:<\/p>\n<ol>\n<li>Direkt export till WordPress<\/li>\n<li>Markdown f\u00f6r kodmarkering<\/li>\n<\/ol>\n<p>Du kan dock v\u00e4lja en markdown-redigerare med HTML-export om du inte \u00e4r f\u00f6rtjust i direkt export till WordPress.<\/p>\n<p>De b\u00e4sta markdown-redigerarna med b\u00e5da funktionerna \u00e4r:<\/p>\n<ul>\n<li><a href=\"https:\/\/ulysses.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ulysses<\/a> (Mac och iOS)<\/li>\n<li><a href=\"https:\/\/bywordapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ByWord<\/a> (Mac och iOS)<\/li>\n<li><a href=\"https:\/\/obsidian.md\/\" target=\"_blank\" rel=\"noopener noreferrer\">Obsidian<\/a> (Mac, Windows, Linux med flera)<\/li>\n<\/ul>\n<p>Ulysses och ByWord \u00e4r premiumappar, medan Obsidian b\u00e5de har kostnadsfria versioner och premiumversioner.<\/p>\n<p>I f\u00f6ljande handledning kommer vi att anv\u00e4nda Ulysses.<\/p>\n<h4>Steg 1: L\u00e4gg till ett kodblock i l\u00e5ngform i Ulysses<\/h4>\n<p>N\u00e4r du skriver ett dokument i Ulysses skriver du <code>\"<\/code> markdown &#8211; det \u00e4r tv\u00e5 apostrofer &#8211; n\u00e4r du omedelbart vill l\u00e4gga till ett kodmarkeringsblock i ett dokument.<\/p>\n<p>Den h\u00e4r markdown-metoden \u00e4r avsedd f\u00f6r l\u00e4ngre kodblock. Den kan inte anv\u00e4ndas mitt i ett stycke, s\u00e5 du m\u00e5ste d\u00e4rf\u00f6r skapa en ny rad f\u00f6r att markdown ska aktiveras.<\/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 kodmarkering\" width=\"2000\" height=\"1126\"><figcaption id=\"caption-attachment-151589\" class=\"wp-caption-text\">Ulysses kodmarkering<\/figcaption><\/figure>\n<p>N\u00e4r kodmarkeringen visas kan du skriva eller klistra in vad du vill 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=\"Klistra in kod i Ulysses markeringsf\u00e4lt\" width=\"1015\" height=\"543\"><figcaption id=\"caption-attachment-151590\" class=\"wp-caption-text\">Klistra in kod i Ulysses markeringsf\u00e4lt<\/figcaption><\/figure>\n<p>Ett annat s\u00e4tt att aktivera kodblocket \u00e4r att klicka p\u00e5 menyalternativet <strong>Markdown<\/strong> (tre horisontella punkter) och sedan v\u00e4lja alternativet <strong>Kod<\/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=\"Anv\u00e4nd Markdown-menyn f\u00f6r att v\u00e4lja alternativet Kod\" width=\"937\" height=\"398\"><figcaption id=\"caption-attachment-151592\" class=\"wp-caption-text\">Anv\u00e4nd Markdown-menyn f\u00f6r att v\u00e4lja alternativet Kod<\/figcaption><\/figure>\n<p>N\u00e4r du har klickat p\u00e5 det menyalternativet visas f\u00e4ltet med kodmarkering d\u00e4r mark\u00f6ren var sist.<\/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=\"Tom kodmarkering\" width=\"977\" height=\"285\"><figcaption id=\"caption-attachment-151593\" class=\"wp-caption-text\">Tom kodmarkering<\/figcaption><\/figure>\n<p>F\u00f6r att placera kodutdrag i stycken anv\u00e4nder du <code>``<\/code> markdown (som ser n\u00e4stan likadan ut, men det \u00e4r faktiskt tv\u00e5 acute\/grave-accenter i st\u00e4llet f\u00f6r apostrofer).<\/p>\n<h4>Steg 3: Exportera till WordPress<\/h4>\n<p>N\u00e4r du har ditt dokument klart \u00e4r det dags att exportera allt till WordPress.<\/p>\n<p>Det underbara med markdown-redigerare som \u00e4r anslutna till WordPress \u00e4r att de beh\u00e5ller kodblocken under hela \u00f6verf\u00f6ringen. Som ett resultat kommer du att se snyggt formaterade kodmarkeringar som \u00e4r redo att publiceras 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=\"Kodmarkeraren f\u00f6rblir densamma i WordPress\" width=\"996\" height=\"723\"><figcaption id=\"caption-attachment-151594\" class=\"wp-caption-text\">Kodmarkeraren f\u00f6rblir densamma i WordPress<\/figcaption><\/figure>\n<p>I Ulysses g\u00e5r du till toppen av dokumentet f\u00f6r att hitta verktygsf\u00e4ltet. Klicka p\u00e5 knappen <strong>Publicerings-f\u00f6rhandsgranskning<\/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\u00e4lj knappen Publicerings-f\u00f6rhandsgranskning\" width=\"981\" height=\"618\"><figcaption id=\"caption-attachment-151595\" class=\"wp-caption-text\">V\u00e4lj knappen Publicerings-f\u00f6rhandsgranskning<\/figcaption><\/figure>\n<p>D\u00e5 visas en rullgardinsmeny d\u00e4r du kan v\u00e4lja en plattform och en webbplats att publicera p\u00e5. Du kan dessutom anv\u00e4nda alternativet <strong>Hantera<\/strong> <strong>konton<\/strong> i den menyn f\u00f6r att logga in p\u00e5 en WordPress-webbplats innan du exporterar.<\/p>\n<p>N\u00e4r du har valt r\u00e4tt webbplats klickar du p\u00e5 knappen <strong>Publicera<\/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\u00e4lj ett konto och publicera\" width=\"948\" height=\"704\"><figcaption id=\"caption-attachment-151596\" class=\"wp-caption-text\">V\u00e4lj ett konto och publicera<\/figcaption><\/figure>\n<p>Fyll i rubriken f\u00f6r inl\u00e4gget, schemat och all annan information som du vill ha, exempelvis kategorier, taggar och utvalda bilder.<\/p>\n<p>Den viktigaste delen \u00e4r dock att st\u00e4lla in <strong>Status<\/strong> till <strong>Utkast<\/strong> s\u00e5 att du inte publicerar inl\u00e4gget utan att f\u00f6rst granska det i WordPress.<\/p>\n<p>Klicka p\u00e5 <strong>OK<\/strong> f\u00f6r att forts\u00e4tta.<\/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\u00e4lj en status och klicka sedan p\u00e5 OK\" width=\"915\" height=\"649\"><figcaption id=\"caption-attachment-151597\" class=\"wp-caption-text\">V\u00e4lj en status och klicka sedan p\u00e5 OK<\/figcaption><\/figure>\n<p>Inom n\u00e5gra sekunder placerar Ulysses hela dokumentet i ett nytt WordPress-inl\u00e4gg (det kan h\u00e4nda att du m\u00e5ste logga in i din <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-admin\/\">WordPress-administration<\/a> n\u00e4r det dyker upp).<\/p>\n<p>Du ser kodblocken som redan \u00e4r konfigurerade och redo att publiceras. Klicka p\u00e5 knappen <strong>Publicera<\/strong> f\u00f6r att omvandla det till 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=\"Kodblock i WordPress-redigeraren\" width=\"1202\" height=\"788\"><figcaption id=\"caption-attachment-151598\" class=\"wp-caption-text\">Kodblock i WordPress-redigeraren<\/figcaption><\/figure>\n<p>P\u00e5 frontend ser du att inline-kodutdrag och st\u00f6rre kodblock \u00e4r snyggt markerade och att formateringen fr\u00e5n koden har bevarats.<\/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=\"Resultat p\u00e5 frontend\" width=\"916\" height=\"881\"><figcaption id=\"caption-attachment-151599\" class=\"wp-caption-text\">Resultat p\u00e5 frontend<\/figcaption><\/figure>\n\n<h2>Sammanfattning<\/h2>\n<p>Det finns flera metoder f\u00f6r att visa kod korrekt i WordPress. Det beror exempelvis p\u00e5 vilken WordPress-redigerare som anv\u00e4nds, vilket kodspr\u00e5k som du vill visa och hur du vill visa och formatera koden. Om du exempelvis v\u00e4ljer ett plugin kommer du definitivt att f\u00e5 en mer kreativ formateringsupplevelse \u00e4n standardblocket Kod i WordPress Gutenberg-redigerare.<\/p>\n<p>I den h\u00e4r artikeln har vi g\u00e5tt igenom m\u00e5nga olika metoder som illustrerar hur man visar kod i WordPress.<\/p>\n<p>Vi rekommenderar vanligtvis att du b\u00f6rjar med metod 1 och arbetar dig igenom den. Metod 2 tj\u00e4nar dig v\u00e4l om du letar efter fler stylingalternativ. Metoderna 3-5 \u00e4r endast anv\u00e4ndbara i s\u00e4rskilda situationer. Metod 6 \u00e4r n\u00e5got av en bonusl\u00f6sning, avsedd f\u00f6r dem som f\u00f6redrar markdown-redigerare framf\u00f6r att skriva direkt i WordPress.<\/p>\n<p>Oavsett vilken metod som du v\u00e4ljer kan en <a href=\"https:\/\/kinsta.com\/se\/wordpress-hosting\/\">p\u00e5litlig hosting-leverant\u00f6r<\/a> hj\u00e4lpa dig att polera din webbplats ytterligare. <a href=\"https:\/\/kinsta.com\/se\/wordpress-hosting\/\">Kinsta\u2019s l\u00f6sningar f\u00f6r WordPress-hosting<\/a> erbjuder <a href=\"https:\/\/kinsta.com\/se\/priser\/\">planer f\u00f6r webbplatser<\/a> i alla former och storlekar. Den l\u00e4ttanv\u00e4nda plattformen &#8211; <a href=\"https:\/\/kinsta.com\/se\/mykinsta\/\">MyKinsta<\/a>, en egenutvecklad admin-instrumentpanel &#8211; g\u00f6r det dessutom enkelt att redigera alla delar av din webbplats och dess filer. Du f\u00e5r \u00e4ven ta del av de extra f\u00f6rdelarna med Kinsta\u2019s <a href=\"https:\/\/kinsta.com\/se\/blog\/moln-plattform-for-utvecklare\/\">hastighet<\/a>, <a href=\"https:\/\/kinsta.com\/se\/cloudflare-integrering\/\">s\u00e4kerhet<\/a> och <a href=\"https:\/\/kinsta.com\/se\/kinsta-support\/\">support<\/a> i v\u00e4rldsklass.<\/p>\n<p>Har du tidigare f\u00f6rs\u00f6kt att visa kod i WordPress? Om s\u00e5 \u00e4r fallet, vilken metod fungerade b\u00e4st f\u00f6r dig? L\u00e5t oss veta i kommentarsf\u00e4ltet nedan.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Att l\u00e4ra sig att visa kod i WordPress \u00e4r exempelvis viktigt f\u00f6r bloggare och inneh\u00e5llsskapare som st\u00e4ndigt publicerar kod online. Deras l\u00e4sare m\u00e5ste ju trots allt &#8230;<\/p>\n","protected":false},"author":199,"featured_media":52982,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[843,832],"class_list":["post-52981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-tips","topic-wordpress-utveckling"],"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>Hur du visar kod i WordPress (och g\u00f6r den vacker) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"L\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.\" \/>\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\/se\/blog\/wordpress-visa-kod\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5 h\u00e4r visar du kod i WordPress (och g\u00f6r den vacker)\" \/>\n<meta property=\"og:description\" content=\"L\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T13:22:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-21T12:24:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/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\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"31 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"S\u00e5 h\u00e4r visar du kod i WordPress (och g\u00f6r den vacker)\",\"datePublished\":\"2023-05-17T13:22:02+00:00\",\"dateModified\":\"2023-09-21T12:24:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/\"},\"wordCount\":5862,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg\",\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/\",\"name\":\"Hur du visar kod i WordPress (och g\u00f6r den vacker) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg\",\"datePublished\":\"2023-05-17T13:22:02+00:00\",\"dateModified\":\"2023-09-21T12:24:58+00:00\",\"description\":\"L\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-utveckling\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/wordpress-utveckling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5 h\u00e4r visar du kod i WordPress (och g\u00f6r den vacker)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"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\/se\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/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\/se\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hur du visar kod i WordPress (och g\u00f6r den vacker) - Kinsta\u00ae","description":"L\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.","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\/se\/blog\/wordpress-visa-kod\/","og_locale":"sv_SE","og_type":"article","og_title":"S\u00e5 h\u00e4r visar du kod i WordPress (och g\u00f6r den vacker)","og_description":"L\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.","og_url":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2023-05-17T13:22:02+00:00","article_modified_time":"2023-09-21T12:24:58+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"L\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg","twitter_creator":"@kinsta_se","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Jeremy Holcombe","Ber\u00e4knad l\u00e4stid":"31 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"S\u00e5 h\u00e4r visar du kod i WordPress (och g\u00f6r den vacker)","datePublished":"2023-05-17T13:22:02+00:00","dateModified":"2023-09-21T12:24:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/"},"wordCount":5862,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg","inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/","url":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/","name":"Hur du visar kod i WordPress (och g\u00f6r den vacker) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg","datePublished":"2023-05-17T13:22:02+00:00","dateModified":"2023-09-21T12:24:58+00:00","description":"L\u00e4s hur du anv\u00e4nder WordPress f\u00f6r att visa kod, med plugins, kortkoder och avkodnings-verktyg. Vi utforskar \u00e4ven markdown-programvara.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/05\/wordpress-display-code.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-visa-kod\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"WordPress-utveckling","item":"https:\/\/kinsta.com\/se\/topics\/wordpress-utveckling\/"},{"@type":"ListItem","position":3,"name":"S\u00e5 h\u00e4r visar du kod i WordPress (och g\u00f6r den vacker)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","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\/se\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/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\/se\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/52981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=52981"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/52981\/revisions"}],"predecessor-version":[{"id":53040,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/52981\/revisions\/53040"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/translations\/dk"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/52981\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/52982"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=52981"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=52981"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=52981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}