Att lära sig att visa kod i WordPress är exempelvis viktigt för bloggare och innehållsskapare som ständigt publicerar kod online. Deras läsare måste ju trots allt kunna använda den. Datorkoden visar något nytt på en webbplats i stället för de taggar, snedstreck och parenteser som du hittar i de faktiska kodutdragen.

Detta innebär dock ett problem för dem som skriver om utveckling och design. De behöver ju nämligen ett sätt att visa koden på rätt sätt utan att den gör sitt egentliga jobb. Det kan exempelvis liknas med att skapa en knapp eller att lägga till styling till ett stycke block.

Enkelt uttryckt: Om du skriver ett blogginlägg och lägger in ett exempel på ett kodutdrag vill du förhindra att koden faktiskt fungerar! På så sätt kan läsarna se koden i sin råform och se koden i ett snyggt formaterat block. De kan till och med kopiera dess innehåll för att använda det i sitt utvecklingsarbete.

I den här guiden visar vi dig exakt hur du kan visa kod i WordPress (oavsett ditt WordPress-tema) med hjälp av flera olika metoder. Vi hjälper dig dessutom att bestämma vilken metod som fungerar bäst för ditt arbetsflöde.

Vad händer när du lägger till vanlig kod i WordPress?

Du kanske undrar vad som skulle hända om du skrev lite kod i WordPress visuella redigerare. När allt kommer omkring så rör du ju inte text- eller kodredigerarna. Borde inte detta innebära att ditt kodutdrag fungerar helt okej?

Förmodligen inte.

Här är några av de ovanliga resultat som kan uppstå:

  • Koden visas delvis. Delar av koden visas på inläggets frontend och andra delar försvinner. Detta ser oprofessionellt ut för besökarna och betyder dessutom att din kod inte är korrekt.
  • Ingenting visas. Koden försvinner helt och hållet i backend och syns inte på frontend av ditt inlägg.
  • Du ser en konstig formatering – ofta något som inte är användarvänligt eller publicerbart för en publik.
  • Koden kanske bara återges delvis.

För att illustrera ett par av dessa resultat använder vi följande HTML-kodutdrag:

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>

I detta kodutdrag används HTML-formatelement för att skapa tre gröna innehållsblock med rubriker och stycken.

Klicka för att skriva kod
Klicka för att skriva kod

Vi vill dock visa den obearbetade koden i ett blogginlägg, utan att den faktiskt ska återges i dessa block.

Här är resultatet om vi klistrar in koden direkt i WordPress Gutenberg Blockredigerare:

Gutenberg-redigeringsresultat från HTML-kod
Gutenberg-redigeringsresultat från HTML-kod

Som du kan se försöker WordPress använda koden för sitt huvudsyfte: att generera innehåll – men den tar bort stilen från koden, så den ger därför inte det resultat som vi ville visa läsarna.

För att undvika situationer som denna uppmanar vi dig att istället använda en av metoderna nedan för att visa kod.

Så här visar du kod på din WordPress-webbplats (6 metoder)

Metoderna är listade från lättast till svårast. Vi har dessutom några speciella metoder för dem som gillar att skriva kod och innehåll i markdown-redigerare (istället för WordPress).

Metod 1: Använda Gutenberg’s blockredigerare (standard)

För att öva på att visa kod i WordPress kan du använda följande kodutdrag. Det använder HTML och intern CSS för att producera ett enkelt resultat med en blå rubrik och ett svart stycke:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>

När koden används visar den detta på frontend:

Resultatet visar en rubrik och en text med stil
Resultatet visar en rubrik och en text med stil

Men genom att följa den här handledningen lär du dig hur du visar själva råkoden, inte vad koden ska visa på frontend.

Steg 1: Lägg till ett kodblock i WordPress

WordPress Gutenberg-redigerare har redan ett inbyggt kodblock. Det gör att du exempelvis kan visa kodstycken utan att förlora någon av dess formatering eller faktiskt aktivera koden.

För att börja öppnar du ett inlägg eller en sida i WordPress och klickar sedan på en av knapparna för att Lägga till block.

Knappar för att lägga till block
Knappar för att lägga till block

Klicka på en av knapparna för att lägga till block.

Då visas de tillgängliga blocken. Du kan söka efter blocket Kod eller skriva ett nyckelord som ”kod” i sökfältet.

När du ser kodblocket (med parentesikoner) klickar du på det för att infoga en bit kod i inlägget.

Popup-fönster för att lägga till ett block, med alternativet Kodblock
Popup-fönster för att lägga till ett block, med alternativet Kodblock

Du bör nu se ett fält med uppmaningen ”Skriv kod…”.

Klicka på Skriv kod

WordPress Gutenberg-redigeraren stöder markdown. Som ett resultat kan du hitta och infoga kodblocket genom att skriva ett snedstreck framåt (/) i redigeraren och sedan börja skriva ”C” eller ”Code”. WordPress kommer då att visa alla relevanta block, vilket ger dig ett snabbare sätt att infoga dem.

Det är lätt att förväxla kodblocket och det anpassade HTML-blocket. Blocket Anpassad HTML är dock till för att lägga till anpassad HTML som ska återges på frontend, inte för att lägga till råkod för visning.

Användning av markdown för att anropa kodblocket
Användning av markdown för att anropa kodblocket

Steg 2: Klistra in visningskoden i fältet för kodblocket

Nu är det dags att kopiera den kod som du vill visa och klistra in den i rutan ”Skriv kod…”.

Skriv eller klistra in den kod som ska visas
Skriv eller klistra in den kod som ska visas

Din kod visas nu i rutan.

Det som är bra med kodblocket är exempelvis att det respekterar alla mellanslag och tabulatorer som du redan hade i kodutdraget. Den bör därför inte se annorlunda ut än källan som du kopierade den från.

Inklistrat kodutdrag i kodblocket
Inklistrat kodutdrag i kodblocket

Steg 3: Publicera och visa resultaten

För att visa din kod på ditt WordPress-inlägg eller din WordPress-sida avslutar du processen genom att klicka på knappen Publicera.

Du kan dessutom få en uppfattning om hur det ser ut innan du publicerar genom att välja Förhandsgranska.

Klicka på Publicera
Klicka på Publicera

När du har tryckt på Publicera-knappen kan du besöka liveversionen av inlägget för att bekräfta att din kodbit visas som råkod.

Som du kan se är kodblocket ganska enkelt. Det erbjuder dock en nödvändig funktionalitet för att behålla formateringen när du publicerar kod i blogginlägg.

Ta en titt på skärmdumpen nedan. I vårt exempel här har ingenting ändrats från den ursprungliga kodbiten; den har helt enkelt presenterats på frontend i en grå ruta.

Kod som visas på frontend
Kod som visas på frontend

Steg 4: Överväg att formatera kodblocket

För att få kodblocket att sticka ut lite, kan du överväga att ändra dess utseende från standardinställningen.

Om du vill visa stilalternativ för blocket markerar du kodblocket och väljer sedan knappen Inställningar (kugghjulsikonen). Detta öppnar sedan fliken Block, som endast visar Blockinställningarna för det valda blocket – i det här fallet Kodblocket.

Gå till Blockinställningar för kodformatering
Gå till Blockinställningar för kodformatering

Du kan styla kodblocket som du vill, med alternativ för att ändra saker som text- och bakgrundsfärger.

Redigera färg- och bakgrundsinställningar
Redigera färg- och bakgrundsinställningar

Du kan dessutom:

  • Ändra storleken på texten: Ändra storleken på texten
  • Lägga till stoppning och marginaler till kodrutan
  • Inkludera en ram med en anpassad bredd och färg
Inställningar för storlek, dimensioner och ramar
Inställningar för storlek, dimensioner och ramar

Som alltid klickar du på knappen Publicera när du är klar med redigeringen av blocket och visar sedan resultatet på frontend av ditt WordPress-inlägg.

Resultat på frontend
Resultat på frontend

Metod 2: Användning av ett plugin

Ett annat sätt att visa kod i WordPress är att installera ett plugin.

Den här metoden kan verka lite överflödig med tanke på att WordPress redan har ett inbyggt kodblock. Vissa plugins erbjuder dock ytterligare funktioner och formateringsverktyg som gör det värt att arbeta med ett plugin. Kort sagt så kan du göra dina kodblock vackrare än vad du får med Gutenbergs standardkodblock.

Dessutom kan vissa användare av den klassiska WordPress-redigeraren tycka att det är lättare att jobba med ett plugin, eftersom det är lite knepigare att visa kod i den redigeraren.

Till att börja med måste du välja ett plugin för ”syntax highlighter”, vilket är ett tjusigt sätt att säga att pluginet kommer att markera din källkod och hålla dess formatering intakt.

Här är några välrenommerade plugins för att visa kod i WordPress:

Vi kommer att använda Enlighter-pluginet i den här handledningen. Det erbjuder nämligen alternativ för att märka vilka typer av kod som du visar i dina kodrutor, tillsammans med många andra stilfunktioner. Du är dock mer än välkommen att prova de andra, eftersom samtliga gör samma sak för det mesta.

Steg 1: Installera ett plugin för syntaxhighlighter

Installera Enlighter – Customizable Syntax Highlighter-plugin på din WordPress-webbplats med hjälp av din föredragna plugin-installationsmetod.

Efter aktivering är pluginet redo att infoga kod i alla inlägg/sidor med ett Gutenberg-block eller den klassiska redigerarens Infognings-knapp.

Pluginet Enlighter
Pluginet Enlighter

Steg 2: Infoga Enlighter Sourcecode Block i ett inlägg

Om du använder WordPress Gutenberg Blockredigerare så öppnar du ett inlägg där du vill visa koden. Klicka på en av knapparna för att Lägga till block (+-ikonen) för att visa samlingen av tillgängliga block.

Bläddra eller skriv in ett nyckelord för blocket Enlighten Sourcecode. Klicka därefter på blocket för att infoga det i inlägget.

Blocket hos Enlighter Sourcecode
Blocket hos Enlighter Sourcecode

Steg 3: Klistra in koden i syntaxhighlighterblocket

Blocket Enlighter Highlighter visas sedan i blockredigeraren, med en titel för ”Generisk Highlighting” och ett fält för ”Infoga källkod…”.

Ta den kod som du vill visa på WordPress och klistra in/skriv in den i fältet ”Infoga källkod…”.

Använd fältet Infoga källkod
Använd fältet Infoga källkod

Som en syntaxhighlighter bevarar pluginet alla val av formatering och flikar. När du är nöjd med resultatet klickar du på knappen Publicera.

Klicka på Publicera
Klicka på Publicera

Steg 4: Förhandsgranska koden på Frontend

Med detta så kan du visa frontend av ditt inlägg för att se vad webbplatsens besökare ser.

Enlighter-pluginet erbjuder ett minimalistiskt standardtema för visning av kod, med radnummer för att underlätta organisering och hänvisning.

Visas på frontend
Visas på frontend

Som vi nämnde har användningen av ett plugin för att visa kod i WordPress fördelar jämfört med de andra metoderna. Frontend-versionen av Enlighter syntax-pluginet framhäver exempelvis linjer när användaren scrollar över din kod.

Framhävda kodlinjer
Framhävda kodlinjer

Det finns dessutom flera knappar i det övre högra hörnet av kodrutan, bland annat en som visar koden i ren text, utan radnummer.

Knappen för vanlig text
Knappen för vanlig text

Den andra knappen heter Kopiera till klippbordet, som omedelbart kopierar allt i kodrutan till användarens klippbord. De kan sedan klistra in detta i vilken applikation som helst.

Kopiera till Urklipp-knappen
Kopiera till Urklipp-knappen

Slutligen öppnar den tredje knappen koden i ett nytt fönster och presenterar den i en ren textversion av webbläsarfönstret.

Öppna koden i nytt fönster
Öppna koden i nytt fönster

Steg 5: Ställ in språk- och linjeinställningar för kodrutan

Enlighter-pluginet levereras med olika teman och kraftfulla anpassningsverktyg. Allt för att kodrutan ska se ut som du vill. Om du hellre vill slippa använda standardtemat går du tillbaka till ditt inlägg i WordPress och klickar på det för närvarande öppna Enlighter-kodblocket.

Detta avslöjar sidofältet Block i WordPress. Om detta inte visas ska du se till att klicka på knappen Inställningar (kugghjulsikonen) i det övre högra hörnet av WordPress-fönstret.

Den första inställningen att anpassa är fältet Språk – detta talar om för pluginet vilket kodspråk som visas så att det kan erbjuda rätt formatering och markering.

Språkfältet
Språkfältet

Det finns en hel del kodspråk att välja mellan, så bläddra igenom listan och välj det som passar bäst för dig.

Att välja språk
Att välja språk

Fältet Särskilda rader markerar sedan alla rader som du anger. För att få detta att hända skriver du in linjenummer separerade med kommatecken.

Särskilda rader
Särskilda rader

Som ett resultat ser webbplatsbesökarna markerade rader för alla de rader som du har angett.

Rader som markeras på frontend
Rader som markeras på frontend

Fältet Val av rad är ett sätt att börja kodutdraget vid en specifik numrerad rad, vilket är fördelaktigt om du bara visar en delmängd kod som ingår i en större samling rader.

Fältet Val av rad
Fältet Val av rad

Som du kan se börjar hela kodrutan vid nummer 10 när du skriver 10 i fältet Val av rad.

Starta dokumentet på en specifik rad
Starta dokumentet på en specifik rad

Steg 6: Välj ett tema

Enlighter-temat är standardtemat för det här pluginet. I fältet Tema (fortfarande under panelen Blockinställningar) finns det dock ett stort antal inbyggda teman att välja mellan.

Temaalternativ
Temaalternativ

Godzilla-temat visar exempelvis kod som om den låg ovanpå ett diagram- eller ett ritpapper.

Godzilla-temat
Godzilla-temat

Atomic-temat ändrar istället bakgrunden till ett mörkt tema och erbjuder huvudsakligen vit text och rosa färg för kodtaggar.

Atomic-temat
Atomic-temat

Ett annat exempel är Classic-temat, som är en mindre minimalistisk version av Enlighter-temat med ljusare färger och mer definierade rader.

Classic-temat
Classic-temat

Steg 7: Överväg att bygga ett eget tema

Enlighter-pluginet har en flik inne i WordPress-instrumentpanelen för att anpassa varje aspekt av pluginet och dess framhävande funktioner.

För att få full kontroll över utformningen och visningen av dina kodrutor går du till fliken Enlighter (<>-ikonen) och väljer sedan Utseende eller Temaanpassare.

Temaanpassare
Temaanpassare

På fliken Utseende kan du välja ett standardtema och samtidigt få tillgång till att justera element som exempelvis:

  • Kodinhämtning
  • Överflöd av text
  • Radnumrering
  • Effekt av linjeskjutning
  • Råkod vid dubbelklick
Sektionen Utseende i anpassningsverktyget för temat
Sektionen Utseende i anpassningsverktyget för temat

Temaanpassnings-sektionen innehåller en lång lista med flikar för att bygga ett tema för kodmarkerare från grunden. Det finns dessutom alternativ för att justera knappar, uttryck, språk med mera.

Ytterligare inställningar
Ytterligare inställningar

Bonus: Användning av Enlighter med den klassiska redigeraren

Enlighter-pluginet fungerar något annorlunda för dem som fortfarande använder den klassiska WordPress-redigeraren.

När du har installerat Enlighter-pluginet går du till ett inlägg eller en sida och hittar knappen Enlighter’s kodinfogare i kontrollpanelen i redigeraren.

Infogning av Enlighter-kod
Infogning av Enlighter-kod

Då öppnas ett nytt fönster som heter Enlighter’s kodinfogare.

Klistra in den kod som du vill visa i det stora (omärkta) fältet längst ner.

Klistra in koden
Klistra in koden

Klicka på rullgardinsmenyn från fältet Språk för att välja rätt kodningsspråk.

Välj ett språk
Välj ett språk

När du är klar klickar du på knappen OK. Du kan dessutom göra justeringar av de andra funktionerna i det fönstret, exempelvis lägga till radindragning.

Exempel på radindragning
Exempel på radindragning

Klicka på knappen Publicera för inlägget och visa sedan resultatet i frontend. Standardkodrutan för den klassiska redigeraren är ett mörkt tema, men du kan ändra utseendet på kodrutan och till och med skapa egna teman.

Publicerad version
Publicerad version

Metod 3: Användning av ett kodningsverktyg

Encoder-verktyg är ett alternativ när du försöker visa kod i WordPress, särskilt om du inte tänker göra det så ofta (och hellre vill slippa krångla med ett plugin).

HTML-kodare bevarar integriteten hos kodformat, särskilt de med specialtecken och tabulatorer. Kodare kan hantera alla typer av kod, men de översätter sedan den infogade koden till HTML-klar kod som är lätt att klistra in i WordPress.

Det finns inga pålitliga kodningsverktyg som plugins. Många erbjuds dock som kostnadsfria webbappar från tredje part. Observera dessutom att kodningsverktyg inte erbjuder några stylingverktyg. Du får bara koden som den ska visas (inga tjusiga rutor eller funktioner för radanpassning).

Några pålitliga kodningsverktyg är exempelvis:

Enligt våra tester är det mest effektiva kodningsverktyget W3Docs HTML Encoder, så vi kommer att använda detta i den här handledningen.

Steg 1: Öppna kodaren och välj inställningar

Gå till webbplatsen för W3Docs HTML Encoder.

På sidan visas två rutfält som ligger sida vid sida. I det vänstra fältet ska du klistra in din kod. Det till höger visar den kodade versionen som du ska kopiera och klistra in i WordPress.

Du måste dock först ställa in vilken typ av kod som du vill bevara:

  • Välj JavaScript unicode om du klistrar in kod med JavaScript-element.
  • Välj HTML-symboler om du använder HTML.
Välj HTML-symboler
Välj HTML-symboler

Steg 2: Klistra in och klicka för att koda

Klistra in den kod som du vill visa i WordPress i det vänstra fältet. Leta sedan upp och klicka på knappen Koda ovanför till höger.

Klicka för att koda
Klicka för att koda

Steg 3: Kopiera det avkodade resultatet

Den färdiga produkten kan se förvirrande ut, men det är i själva 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ågot annat på frontend.

Klicka på knappen Kopiera.

Kopiera koden
Kopiera koden

Steg 4: Klistra in den kodade HTML-koden i WordPress kod- eller textredigerare

Gå tillbaka till WordPress och öppna det önskade inlägget eller sidan.

Välj menyalternativet Alternativ (tre vertikala prickar) i det övre högra hörnet. Klicka på alternativet Kodredigerare.

Gå till menyn Alternativ
Gå till menyn Alternativ

Du ser nu kodredigeraren i stället för den visuella blockredigeraren. Hitta det område där du vill visa koden och klistra in din kodade HTML i redigeraren.

Klistra in kodad HTML
Klistra in kodad HTML

Om du använder den klassiska WordPress-redigeraren måste du gå till fliken Text, som är densamma som kodredigeraren från Gutenberg’s blockredigerare.

Fliken Text
Fliken Text

Steg 5: Publicera och visa koden

Klicka på Uppdatera eller Publicera för inlägget och navigera sedan till inläggets frontend för att se hur det ser ut.

Du bör se den ursprungliga koden som klistrades in i kodaren, innan verktyget lade till HTML-kodningselement. Som vi nämnde tidigare så finns det inga stylingfunktioner med kodarna, så detta är en utmärkt metod för ett rent, minimalistiskt utseende.

Publicerad kod
Publicerad kod

Metod 4: Användning av en anpassad kortkod

Att skapa en anpassad kortkod gör jobbet med att infoga delar av återanvändbar kod utan att du behöver kopiera och klistra in den. Det är därför som anpassade kortkoder erbjuder en solid möjlighet att visa kod på WordPress.

Här är fördelarna med att använda anpassade kortkoder för att visa kod:

  1. Med anpassade kortkoder kan du spara komplicerad kod en gång och sedan återanvända den. Som ett resultat så elimineras behovet av att skriva längre kodstycken varje gång.
  2. Du kan skriva din egen stils CSS för kodmarkerare och rutor.
  3. Kortkoder kan användas av vem som helst. Andra bidragsgivare kan därför dra nytta av dina kodmarkerare och ditt block med ett knapptryck.

För att skapa en egen kortkod krävs erfarenhet av att redigera WordPress-temafiler, arbeta med PHP-kod och eventuellt skapa WordPress-plugins. På grund av dessa krav kan det vara svårt för dem som är nya i PHP att göra en anpassad snabbkod för WordPress.

Den färdiga produkten resulterar dock i ett betydligt enklare sätt att visa kod i WordPress.

HTML-kortkod
HTML-kortkod

Du kan namnge den anpassade kortkoden till vad du vill och skapa flera alternativ, som [html] [/html] och [css] [/css], för olika kodningsspråk.

CSS-kortkod
CSS-kortkod

Tänk på att anpassade kortkoder fungerar bäst för syntaxmarkering när du använder textredigeraren (i WordPress klassiska redigerare) eller rutan Anpassad HTML när du arbetar med WordPress Gutenberg Blockredigerare.

Textredigerare
Textredigerare

Målet är att bygga en anpassad kortkod där du kan skriva eller klistra in kod mellan kortkodens öppnings- och sluttaggar.

Kod som klistras in i HTML-kortkoden
Kod som klistras in i HTML-kortkoden

När du har publicerat dina anpassade inställningar för stil kommer markeringar för din anpassade kortkod att visas i frontend. Och koden som du har lagt till visas snyggt i syntaxhighlightern.

Vyn på frontend
Vyn på frontend

Metod 5: Användning av <code> and <pre> Taggar

Det kanske äldsta – men fortfarande otroligt pålitliga – sättet att visa kod i WordPress är att helt enkelt lägga till specifika HTML-taggar runt kodstycket. Den här metoden är bäst när du arbetar med den klassiska WordPress-redigeraren, eller i vilken HTML-redigerare som helst.

Det finns två alternativ:

  1. <code> taggar: Bäst för att visa en kort kodrad; används ofta i stycken
  2. <pre> taggar: Idealisk för längre kodblock eller när du vill ha fler formateringsalternativ

Alternativ 1: Använd <code>-taggar för kodutdrag på rad

Innehållsskapare som skriver om kodning vill inte alltid använda stora kodblock. Ibland är det vettigare att inkludera en snabb kodbit i ett stycke.

Du måste dock fortfarande markera och bevara kodens formatering. Och viss kod kan orsaka problem med det omgivande innehållet om den inte bevaras på rätt sätt.

En brytpunkt
En brytpunkt

Låt oss ta <br>-taggen som exempel. Utan <code>-taggen skulle den helt enkelt lägga till en brytpunkt i ditt stycke.

En oönskad brytpunkt
En oönskad brytpunkt

Om du placerar kodningen inuti dessa taggar får du ett mycket renare resultat:

<code> </code>

Öppna ett WordPress-inlägg och aktivera antingen kodredigeraren (för Gutenberg Blockredigeraren) eller textredigeraren (om du använder WordPress klassiska redigerare).

Klistra in eller skriv in dessa taggar någonstans i redigeraren; infoga inte koden som du vill visa ännu. Lägg i stället till ett mellanslag mellan taggarna.

<code> </code>

Utrymme mellan kodtaggar
Utrymme mellan kodtaggar

Byt till Visuell redigerare (oavsett om du är i Gutenberg eller WordPress klassiska redigerare).

Du kommer att se ett litet grått utrymme inuti det visuella innehållet. Klicka därefter för att placera markören inom det grå utrymmet. Det är här som du kan klistra in eller skriva in koden för visning.

Grått utrymme för att skriva kod
Grått utrymme för att skriva kod

När du skriver expanderar det grå utrymmet för att rymma kodstycket. Klicka på knappen Publicera eller Uppdatera för det inlägget.

Skrivning av kod i det grå utrymmet
Skrivning av kod i det grå utrymmet

På inläggets frontend ser du nu koden bevarad som den ska vara och utan någon konstig aktivitet (som att det läggs till en brytpunkt i innehållet).

Brytningstaggen visas utan att det faktiskt läggs till en brytpunkt
Brytningstaggen visas utan att det faktiskt läggs till en brytpunkt

Formateringen av dessa <code>-taggar är vanligtvis barebones. Detta beror dock ofta på ditt temas styling. Vårt exempel ändrar exempelvis bara typsnittet men inkluderar inte en grå bakgrund.

Alternativ 2: Använd <pre>-taggar för längre kodblock

Längre kodutdrag förtjänar egna block, separerade från det innehåll som du skriver i stycken. För dessa rekommenderar vi att du håller dig till <pre>-taggarna.

Processen för att lägga till en <pre>-tagg är precis som med <code>-taggarna, men du har mer utrymme att arbeta med när det gäller att infoga din kod.

Gå till ett inlägg och öppna redigeraren Kod (Gutenberg) eller Text (WordPress klassiska redigerare). Klistra sedan in eller skriv in koden som du vill visa. Omge därefter koden med dessa taggar:

<pre> </pre>

Pre-taggar
Pre-taggar

Växla till den visuella redigeraren för att se hur det ser ut. Du kommer att märka att textavsnittet kommer att ha en ”för-formatterad” märkning, vilket är precis vad <pre>-taggens syfte är.

Välj alternativet för-formattering
Välj alternativet för-formattering

Klicka på Publicera eller Uppdatera och växla sedan till frontend för att se din kod i dess ursprungliga form. I likhet med <code>-taggarna är <pre>-taggarna usla på formatering. Som ett resultat får du ett så enkelt utseende som möjligt. Det finns dock sätt att styla dessa själv.

Resultat i frontend
Resultat i frontend
Tips för att styla <pre>-taggar

<pre>-taggarna är mindre stabila än <code>-taggarna. Du kan därför stöta på svårigheter beroende på vilken typ av kod som du försöker visa.

Använd de här tipsen för att förbättra hur koden ser ut:

  • Gör ditt bästa för att ta bort eller helt undvika radbrytningar, eftersom <pre>-taggarna ofta inte känner igen dem. De reagerar generellt dåligt på för många radbrytningar.
  • Överväg att lägga till en overflow-x:auto;-egenskap i din CSS för att lägga till rullningsfunktionalitet i <pre>-taggens kod. Detta underlättar vid överflödigt innehåll, eftersom <pre>-taggen i sig självt låter koden rinna ut över sidan.
  • Håll dig till typsnitt med en enda stavelse.

Du kan dessutom styla textformateringen och rutan bakom koden. Här är en startmall som du kan lägga till i din CSS-fil:

article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}

Metod 6: Använda en Markdown-redigerare som är ansluten till WordPress

Markdown-redigerare ger inte bara möjlighet att skriva och formatera snabbare. Många av dem ansluter dessutom direkt till WordPress för omedelbar publicering direkt från redigeraren.

Många skribenter vänder sig till markdown-redigerare tack vare denna snabba innehållsskapande process. Som tur är erbjuder vissa av dessa redigerare markdown för kodblock. Som ett resultat kan du visa kod i markdown-redigeraren och sedan skicka den direkt till WordPress för publicering.

Tänk på att vanliga textredigerare (som Sublime Text) inte bevarar kodens integritet när den överförs för publicering på WordPress. HTML-redigerare är utmärkta för att skriva och lagra kod, men de har inte heller de markeringsfunktioner som krävs för att bevara koden för publicering i WordPress.

Det finns gott om markdown-redigerare att välja mellan, men de idealiska lösningarna har två gemensamma funktioner:

  1. Direkt export till WordPress
  2. Markdown för kodmarkering

Du kan dock välja en markdown-redigerare med HTML-export om du inte är förtjust i direkt export till WordPress.

De bästa markdown-redigerarna med båda funktionerna är:

Ulysses och ByWord är premiumappar, medan Obsidian både har kostnadsfria versioner och premiumversioner.

I följande handledning kommer vi att använda Ulysses.

Steg 1: Lägg till ett kodblock i långform i Ulysses

När du skriver ett dokument i Ulysses skriver du " markdown – det är två apostrofer – när du omedelbart vill lägga till ett kodmarkeringsblock i ett dokument.

Den här markdown-metoden är avsedd för längre kodblock. Den kan inte användas mitt i ett stycke, så du måste därför skapa en ny rad för att markdown ska aktiveras.

Ulysses kodmarkering
Ulysses kodmarkering

När kodmarkeringen visas kan du skriva eller klistra in vad du vill i den.

Klistra in kod i Ulysses markeringsfält
Klistra in kod i Ulysses markeringsfält

Ett annat sätt att aktivera kodblocket är att klicka på menyalternativet Markdown (tre horisontella punkter) och sedan välja alternativet Kod.

Använd Markdown-menyn för att välja alternativet Kod
Använd Markdown-menyn för att välja alternativet Kod

När du har klickat på det menyalternativet visas fältet med kodmarkering där markören var sist.

Tom kodmarkering
Tom kodmarkering

För att placera kodutdrag i stycken använder du `` markdown (som ser nästan likadan ut, men det är faktiskt två acute/grave-accenter i stället för apostrofer).

Steg 3: Exportera till WordPress

När du har ditt dokument klart är det dags att exportera allt till WordPress.

Det underbara med markdown-redigerare som är anslutna till WordPress är att de behåller kodblocken under hela överföringen. Som ett resultat kommer du att se snyggt formaterade kodmarkeringar som är redo att publiceras i WordPress.

Kodmarkeraren förblir densamma i WordPress
Kodmarkeraren förblir densamma i WordPress

I Ulysses går du till toppen av dokumentet för att hitta verktygsfältet. Klicka på knappen Publicerings-förhandsgranskning.

Välj knappen Publicerings-förhandsgranskning
Välj knappen Publicerings-förhandsgranskning

Då visas en rullgardinsmeny där du kan välja en plattform och en webbplats att publicera på. Du kan dessutom använda alternativet Hantera konton i den menyn för att logga in på en WordPress-webbplats innan du exporterar.

När du har valt rätt webbplats klickar du på knappen Publicera.

Välj ett konto och publicera
Välj ett konto och publicera

Fyll i rubriken för inlägget, schemat och all annan information som du vill ha, exempelvis kategorier, taggar och utvalda bilder.

Den viktigaste delen är dock att ställa in Status till Utkast så att du inte publicerar inlägget utan att först granska det i WordPress.

Klicka på OK för att fortsätta.

Välj en status och klicka sedan på OK
Välj en status och klicka sedan på OK

Inom några sekunder placerar Ulysses hela dokumentet i ett nytt WordPress-inlägg (det kan hända att du måste logga in i din WordPress-administration när det dyker upp).

Du ser kodblocken som redan är konfigurerade och redo att publiceras. Klicka på knappen Publicera för att omvandla det till live.

Kodblock i WordPress-redigeraren
Kodblock i WordPress-redigeraren

På frontend ser du att inline-kodutdrag och större kodblock är snyggt markerade och att formateringen från koden har bevarats.

Resultat på frontend
Resultat på frontend

Sammanfattning

Det finns flera metoder för att visa kod korrekt i WordPress. Det beror exempelvis på vilken WordPress-redigerare som används, vilket kodspråk som du vill visa och hur du vill visa och formatera koden. Om du exempelvis väljer ett plugin kommer du definitivt att få en mer kreativ formateringsupplevelse än standardblocket Kod i WordPress Gutenberg-redigerare.

I den här artikeln har vi gått igenom många olika metoder som illustrerar hur man visar kod i WordPress.

Vi rekommenderar vanligtvis att du börjar med metod 1 och arbetar dig igenom den. Metod 2 tjänar dig väl om du letar efter fler stylingalternativ. Metoderna 3-5 är endast användbara i särskilda situationer. Metod 6 är något av en bonuslösning, avsedd för dem som föredrar markdown-redigerare framför att skriva direkt i WordPress.

Oavsett vilken metod som du väljer kan en pålitlig hosting-leverantör hjälpa dig att polera din webbplats ytterligare. Kinsta’s lösningar för WordPress-hosting erbjuder planer för webbplatser i alla former och storlekar. Den lättanvända plattformen – MyKinsta, en egenutvecklad admin-instrumentpanel – gör det dessutom enkelt att redigera alla delar av din webbplats och dess filer. Du får även ta del av de extra fördelarna med Kinsta’s hastighet, säkerhet och support i världsklass.

Har du tidigare försökt att visa kod i WordPress? Om så är fallet, vilken metod fungerade bäst för dig? Låt oss veta i kommentarsfältet nedan.

Jeremy Holcombe Kinsta

Innehålls- och marknadsföringsredaktör på Kinsta, WordPress webbutvecklare och innehållsskribent. Utöver WordPress tycker jag om stranden, golf och filmer. Jag har även problem med långa människor ;).