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.
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:
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:
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.
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.
Du bör nu se ett fält med uppmaningen ”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.
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…”.
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.
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.
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.
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.
Du kan styla kodblocket som du vill, med alternativ för att ändra saker som text- och bakgrundsfärger.
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
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.
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.
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.
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…”.
Som en syntaxhighlighter bevarar pluginet alla val av formatering och flikar. När du är nöjd med resultatet klickar du på knappen 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.
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.
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.
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.
Slutligen öppnar den tredje knappen koden i ett nytt fönster och presenterar den i en ren textversion av webbläsarfönstret.
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.
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.
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.
Som ett resultat ser webbplatsbesökarna markerade rader för alla de rader som du har angett.
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.
Som du kan se börjar hela kodrutan vid nummer 10 när du skriver 10 i fältet Val av 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.
Godzilla-temat visar exempelvis kod som om den låg ovanpå ett diagram- eller ett ritpapper.
Atomic-temat ändrar istället bakgrunden till ett mörkt tema och erbjuder huvudsakligen vit text och rosa färg för kodtaggar.
Ett annat exempel är Classic-temat, som är en mindre minimalistisk version av Enlighter-temat med ljusare färger och mer definierade rader.
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.
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
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.
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.
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.
Klicka på rullgardinsmenyn från fältet Språk för att välja rätt kodningssprå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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
- 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.
- Du kan skriva din egen stils CSS för kodmarkerare och rutor.
- 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.
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.
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.
Målet är att bygga en anpassad kortkod där du kan skriva eller klistra in kod mellan kortkodens öppnings- och sluttaggar.
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.
Metod 5: Användning av
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:
<code>taggar: Bäst för att visa en kort kodrad; används ofta i stycken<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.
Låt oss ta <br>-taggen som exempel. Utan <code>-taggen skulle den helt enkelt lägga till en brytpunkt i ditt stycke.
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>
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.
När du skriver expanderar det grå utrymmet för att rymma kodstycket. Klicka på knappen Publicera eller Uppdatera för det inlägget.
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).
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>
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.
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.
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:
- Direkt export till WordPress
- 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.
När kodmarkeringen visas kan du skriva eller klistra in vad du vill i den.
Ett annat sätt att aktivera kodblocket är att klicka på menyalternativet Markdown (tre horisontella punkter) och sedan välja alternativet Kod.
När du har klickat på det menyalternativet visas fältet med kodmarkering där markören var sist.
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.
I Ulysses går du till toppen av dokumentet för att hitta verktygsfältet. Klicka på 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.
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.
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.
På frontend ser du att inline-kodutdrag och större kodblock är snyggt markerade och att formateringen från koden har bevarats.
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.
Lämna ett svar