At lære at vise kode i WordPress er afgørende for bloggere og indholdsskabere, der konsekvent offentliggør kode online, som deres læsere kan bruge. Computerkode gengiver efter design noget nyt på frontend af et websted i stedet for de tags, skråstreger og parenteser, du finder i de faktiske kodestumper.
Dette udgør imidlertid et problem for dem, der skriver om udvikling og design, da du har brug for en måde at vise koden korrekt på, uden at den udfører sit egentlige arbejde, f.eks. at oprette en knap eller tilføje styling til en paragrafblok.
Kort sagt, hvis du skriver et blogindlæg og lægger et eksempel på et kodestykke deri, skal du forhindre, at koden rent faktisk virker! På denne måde kan læserne se koden i sin rå form, se koden i en pænt formateret blok og endda kopiere indholdet til brug i deres udviklingsarbejde.
I denne vejledning viser vi dig præcis, hvordan du kan vise kode i WordPress (uanset dit WordPress-tema) ved hjælp af flere forskellige metoder, og vi hjælper dig med at beslutte, hvilken metode der fungerer bedst for din arbejdsgang.
Hvad sker der, når du tilføjer almindelig kode i WordPress?
Du undrer dig måske over, hvad der ville ske, hvis du skrev noget kode i den visuelle WordPress-editor. Du roder jo ikke med tekst- eller kodeeditorerne, så burde dit kodestykke ikke fungere fint?
Sandsynligvis ikke.
Her er nogle af de usædvanlige resultater, der kan forekomme:
-
- Koden vises delvist, idet dele af koden vises på forsiden af indlægget, mens andre forsvinder. Dette ser uprofessionelt ud for besøgende; det betyder, at din kode ikke er korrekt.
- Der vises slet ikke noget, og koden forsvinder helt fra synet i backend’en og viser ikke noget på forsiden af dit indlæg.
- Du ser mærkelig formatering – ofte noget, der ikke er brugervenligt eller kan offentliggøres for et publikum.
- Koden gengives måske kun delvist.
For at illustrere et par af disse resultater bruger vi følgende HTML-kodesnipsel:
<!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>Dette særlige kodestykke bruger HTML-stylingelementer til at producere tre grønne indholdsblokke med header og afsnit.
Vi vil dog gerne vise den rå kode i et blogindlæg, og ikke have den til at blive gengivet i disse blokke.
Her er resultaterne, hvis vi indsætter koden direkte i WordPress Gutenberg Block Editor:
Som du kan se, forsøger WordPress at bruge koden til sit hovedformål: at generere indhold – men den fratager koden sin styling, så den giver ikke det resultat, som vi ønskede at vise læserne.
For at undgå situationer som denne, opfordrer vi dig til i stedet at bruge en af de metoder, der er anført nedenfor, til at vise kode.
Sådan viser du kode på dit WordPress-websted (6 metoder)
Disse metoder er listet fra det nemmeste til det sværeste, og vi har nogle særlige metoder til dem, der nyder at skrive kode og indhold i markdown-editorer (i modsætning til WordPress).
Metode 1: Brug af Gutenberg-blokeditor (standard)
Hvis du vil øve dig i at vise kode i WordPress, kan du bruge følgende kodestump, som bruger HTML og intern CSS til at producere et simpelt resultat med en blå overskrift og et sort afsnit:
<!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 sættes i gang, viser den dette på frontend:
Men ved at følge denne vejledning lærer du at vise selve den rå kode, ikke hvad koden skal vise på frontend.
Trin 1: Tilføj en kodeblok i WordPress
WordPress Gutenberg-editoren har allerede en indbygget kodeblok, som giver dig mulighed for at vise kodestumper uden at miste noget af formateringen eller faktisk aktivere koden.
For at begynde skal du åbne et indlæg eller en side i WordPress og derefter klikke på en af knapperne Tilføj blok.
Klik på en af knapperne Tilføj blok
Dette viser den tilgængelige samling af blokke. Du kan søge efter blokken Kode eller skrive et nøgleord som “kode” i søgelinjen.
Når du ser blokken Kode (med parentesikoner), skal du klikke på den for at indsætte en del af koden i indlægget.
Du bør nu se et felt med indledningen “Skriv kode…”.
WordPress Gutenberg-editoren understøtter markdown, så du kan også finde og indsætte Code-blokken ved at skrive en skråstreg fremad (/) i editoren og derefter begynde at skrive “C” eller “Code”. WordPress vil derefter vise alle relevante blokke, hvilket giver dig en hurtigere måde at indsætte dem på.
Det er let at forveksle Kodeblokken og den brugerdefinerede HTML-blok. Men Custom HTML-blokken er til at tilføje brugerdefineret HTML til rendering på frontend, ikke til at tilføje rå kode til visning.
Trin 2: Indsæt visningskode i feltet Kodeblok
Nu er det tid til at kopiere den kode, du gerne vil vise, og indsætte den i feltet, hvor der står “Write Code…” (Skriv kode…).
Din kode vises nu inde i feltet.
Det gode ved blokken Kode er, at den respekterer alle mellemrum og tabulatorer, som du allerede havde i kodestumpen. Som følge heraf bør den ikke se anderledes ud end den kilde, du kopierede den fra.
Trin 3: Offentliggør og se resultaterne
For at vise din kode på dit WordPress-indlæg eller din WordPress-side skal du afslutte processen ved at klikke på knappen Udgiv.
Du kan også få en idé om, hvordan det ser ud, før du offentliggør, ved at vælge Vis udskrift.
Når du har trykket på knappen Udgiv, skal du besøge live-versionen af det pågældende indlæg for at bekræfte, at din kodeklump vises som råkode.
Som du kan se, er blokken Kode ret enkel, men den giver den nødvendige funktionalitet til at bevare formateringen, når du udgiver kode i blogindlæg.
Tag et kig på nedenstående skærmbillede. I vores eksempel her er der intet ændret i forhold til den oprindelige kodestump; den er blot blevet præsenteret på frontend i en grå boks.
Trin 4: Overvej at formatere kodeblokken
For at få kodeblokken til at skille sig lidt ud, kan du overveje at ændre dens udseende i forhold til standarden.
For at få vist stilindstillingerne for blokken skal du vælge blokken Kode og derefter vælge knappen Indstillinger (tandhjulsikon). Dette åbner fanen Blok, som kun viser blokindstillingerne for den valgte blok – i dette tilfælde blokken Kode.
Du kan style blokken Kode som du vil, med muligheder for at ændre ting som tekst- og baggrundsfarver.
Du kan også:
- Du kan også ændre størrelsen på teksten
- Tilføje padding og marginer til kodeboksen
- Medtage en kant med en brugerdefineret bredde og farve
Som altid skal du klikke på knappen Udgiv, når du er færdig med at redigere blokken, og derefter se resultaterne på frontend af dit WordPress-indlæg.
Metode 2: Brug af et plugin
En anden måde at vise kode på WordPress på er ved at installere et plugin.
Denne metode kan virke en smule overflødig i betragtning af at WordPress allerede har en indbygget kodeblok, men nogle plugins tilbyder yderligere funktioner og formateringsværktøjer, der gør det værd at arbejde med et plugin. Kort sagt kan du gøre dine kodeblokke smukkere end det, du ville få med standard Gutenberg-kodeblokken.
Desuden kan nogle brugere af Classic WordPress Editor måske finde det lettere at partere med et plugin, da det er lidt vanskeligere at vise kode i Classic Editor.
Til at begynde med skal du vælge et “syntakshighlighter”-plugin, hvilket er en finere måde at sige, at plugin’et vil fremhæve din kildekode og holde dens formatering intakt.
Her er nogle velrenommerede plugins til visning af kode på WordPress:
Vi vil bruge Enlighter-plugin’et i denne vejledning, da det tilbyder muligheder for at markere, hvilke typer kode du viser i dine kodebokse, sammen med mange andre stylingfunktioner. Du er dog mere end velkommen til at prøve de andre, da de alle for det meste gør det samme.
Trin 1: Installer et Syntax Highlighter-plugin
Installer Enlighter – Customizable Syntax Highlighter plugin på dit WordPress-websted ved hjælp af din foretrukne plugin-installationsmetode.
Efter aktivering er plugin’et klar til at indsætte kode i ethvert indlæg / side med en Gutenberg-blok eller Classic Editor Insert-knap.
Trin 2: Indsæt Enlighter-kildekodeblokken i et indlæg
Hvis du bruger WordPress Gutenberg Block Editor, skal du åbne et indlæg, hvor du gerne vil vise kode. Klik på en af knapperne Tilføj blok (+ ikon) for at vise samlingen af tilgængelige blokke.
Gennemse eller indtast et nøgleord for Enlighten Sourcecode-blokken. Klik på den pågældende blok for at indsætte den i indlægget.
Trin 3: Indsæt kode i Syntax Highlighter-blokken
Enlighter Highlighter-blokken vises derefter i blokredigeringsprogrammet med en titel for “Generic Highlighting” og et felt til “Insert Sourcecode…”.
Tag den kode, du gerne vil vise på WordPress, og indsæt/skriv den i feltet “Insert Sourcecode…”.
Som en syntakshighlighter bevarer plugin’et alle formateringsvalg og faner. Når du er tilfreds med resultatet, skal du klikke på knappen Udgiv.
Trin 4: Vis et eksempel på kode på frontend
Med det kan du se frontend af dit indlæg for at se, hvad webstedets besøgende ser.
Enlighter pluginnet tilbyder et minimalistisk standardtema til visning af kode med linjenumre, der hjælper med organisering og henvisning.
Som vi nævnte, har brugen af et plugin til visning af kode på WordPress sine fordele i forhold til de andre metoder. For eksempel fremhæver frontend-versionen af Enlighter-syntaks-plugin’et linjer, når brugeren ruller over din kode.
Der er også flere knapper i det øverste højre hjørne af kodeboksen, herunder en, der viser koden i ren tekst uden linjenumre.
Den anden knap hedder Copy To Clipboard (Kopier til udklipsholder), som straks kopierer alt i kodeboksen til brugerens udklipsholder, som brugeren kan tage og indsætte i et hvilket som helst program, som han/hun ønsker.
Endelig åbner den tredje knap koden i et nyt vindue, hvor den præsenteres i en ren tekstversion af dit browservindue.
Trin 5: Indstil sprog- og linjeindstillinger for kodeboksen
Enlighter-pluginet leveres med forskellige temaer og kraftfulde tilpasningsværktøjer til at få kodeboksen til at se ud, som du ønsker det. Hvis du hellere vil undgå at bruge standardtemaet, skal du gå tilbage til dit indlæg i WordPress og klikke på den aktuelt åbne Enlighter-kildekodeblok.
Dette afslører bloksidebaren i WordPress. Hvis den ikke vises, skal du sørge for at klikke på knappen Indstillinger (tandhjulsikonet) øverst til højre i WordPress-vinduet.
Den første indstilling, der skal tilpasses, er feltet Sprog – dette fortæller plugin’et hvilket kodesprog der vises, så det kan tilbyde den korrekte formatering og fremhævning.
Der er en hel del kodningssprog at vælge imellem, så rul gennem listen og vælg det, der er mest passende.
Feltet Speciallines fremhæver alle de linjer, du angiver. For at få dette til at ske, skal du skrive linjenumre adskilt af kommaer.
Som et resultat heraf ser webstedets besøgende fremhævede linjer for alle de linjer, du har angivet.
Feltet Lineoffset er en måde at starte dit kodningsudsnit ved en bestemt nummereret linje, hvilket er en fordel, hvis du kun viser en delmængde af kode, der er en del af en større samling af linjer.
Som du kan se, starter hele kodefeltet ved at skrive 10 i feltet Lineoffset ved nummer 10.
Trin 6: Vælg et tema
Enlighter-temaet er standardtemaet fra dette plugin. Tema-feltet (stadig under panelet med blokindstillinger) viser dog en lang række indbyggede temaer, som du kan vælge.
For eksempel viser Godzilla-temaet kode, som om den var oven på diagram- eller tegnepapir.
Og Atomic-temaet skifter baggrunden til et mørkt tema, mens det hovedsageligt tilbyder hvid tekst og pink farve til kodetags.
Et andet eksempel er Classic-temaet, som er en mindre minimalistisk version af Enlighter-temaet med lysere farver og mere definerede linjer.
Trin 7: Overvej at bygge et brugerdefineret tema
Enlighter-pluginet giver en fane inde i WordPress-dashboardet til at tilpasse alle aspekter af plugin’et og dets fremhævningsfunktioner.
For at få fuld kontrol over design og visning af dine kodebokse skal du gå til fanen Enlighter (<>-ikonet) og derefter vælge Appearance eller Theme Customizer.
Fanen Udseende giver dig mulighed for at vælge et standardtema og giver dig samtidig adgang til at justere elementer som f.eks:
- Indrykning af kode
- Tekstoverløb
- Linjenummerering
- Effekt af linjeskydning
- RAW-kode ved dobbeltklik
Tematilpasningssektionen indeholder en lang liste af faner til opbygning af et kodehighlighter-tema fra bunden, med muligheder for at justere knapper, udtryk, sprog og meget mere.
Bonus: Brug af Enlighter med den klassiske editor
Enlighter-pluginet fungerer lidt anderledes for dem, der stadig bruger den klassiske WordPress-editor.
Når du har installeret Enlighter-plugin’et, skal du gå til et hvilket som helst indlæg eller side og finde knappen Enlighter Code Insert i kontrolpanelet i editoren.
Dette åbner et nyt vindue kaldet Enlighter Code Insert.
Indsæt den kode, du ønsker at vise, i det store (umærkede) felt nederst.
Klik på dropdown-menuen fra feltet Sprog for at vælge det rigtige kodningssprog.
Når du er færdig, skal du klikke på OK-knappen. Du kan også foretage justeringer af de andre funktioner i dette vindue, f.eks. tilføje linjeindrykning.
Klik på knappen Udgiv for indlægget, og se derefter resultaterne på frontend. Standardkodeboksen for Classic Editor er et mørkt tema, men du kan ændre kodeboksens udseende og endda oprette dine egne temaer.
Metode 3: Brug af et kodningsværktøj
Encoder-værktøjer tjener som alternative muligheder, når du forsøger at vise kode i WordPress, især hvis du ikke har til hensigt at gøre det så ofte (og hellere vil undgå at rode med et plugin).
HTML-enkodere bevarer integriteten af kodeformater, især dem med specialtegn og tabulatorer. Encodere kan håndtere alle typer kode, men de oversætter derefter den indsatte kode til HTML-klar kode, som er let at indsætte i WordPress.
Der findes ikke pålidelige encoder-værktøjer som plugins, men mange tilbydes som gratis webapps fra tredjeparter. Bemærk også, at encoder-værktøjer ikke tilbyder nogen stylingværktøjer, så du modtager kun koden, som den skal vises (ingen smarte bokse eller funktioner til tilpasning af linjer).
Nogle pålidelige encoder-værktøjer omfatter bl.a:
Baseret på vores test er det mest effektive encoder-værktøj W3Docs HTML Encoder, så vi vil bruge det i denne vejledning.
Trin 1: Åbn encoderen og vælg indstillinger
Gå til W3Docs HTML Encoder-webstedet.
På siden vises to boksfelter side om side. Det til venstre er det, hvor du skal indsætte din kode. Det til højre viser den kodede version, som du skal kopiere og indsætte i WordPress.
Du skal dog først indstille, hvilken type kode du ønsker at bevare:
- Vælg JavaScript unicode, hvis du indsætter kode med JavaScript-elementer.
- Gå med HTML-symboler, hvis du bruger HTML.
Trin 2: Indsæt og klik for at kode
Indsæt den kode, du gerne vil have vist i WordPress, i det venstre felt. Find og klik derefter på knappen Encode ovenfor til højre.
Trin 3: Kopier det afkodede resultat
Det færdige produkt kan se forvirrende ud, men det er faktisk en kombination af HTML-elementer, der bevarer alle aspekter af den kode, du har indsat, alt sammen uden at få koden til at blive aktiveret og vise noget andet på frontend.
Klik på knappen Kopier.
Trin 4: Indsæt kodet HTML i WordPress-kode- eller teksteditor
Gå tilbage til WordPress, og åbn det ønskede indlæg eller den ønskede side.
Vælg menupunktet Indstillinger (tre lodrette prikker) i øverste højre hjørne. Klik på indstillingen Code Editor.
Du vil nu se kodeeditoren i stedet for den visuelle blokeditor. Find det område, du gerne vil have koden vist, og indsæt din kodede HTML-kode i editoren.
Hvis du bruger den klassiske WordPress-editor, skal du gå til fanen Tekst, som er den samme som kodeeditoren fra Gutenberg-blokeditoren.
Trin 5: Udgiv og se koden
Klik på Opdater eller Udgiv for indlægget, og naviger derefter til frontend for det pågældende indlæg for at se, hvordan det ser ud.
Du bør se den oprindelige kode, der blev indsat i koderen, før værktøjet tilføjede HTML-kodningselementer. Som nævnt er der ingen stylingfunktioner med encoderne, så dette er en vidunderlig metode til et rent og minimalistisk udseende.
Metode 4: Brug af en brugerdefineret genvejskode
Oprettelse af en brugerdefineret genvejskode gør arbejdet med at indsætte stykker af genanvendelig kode, uden at du behøver at kopiere og indsætte. Derfor tilbyder brugerdefinerede genvejskoder en solid mulighed for at vise kode på WordPress.
Her er fordelene ved at bruge brugerdefinerede genvejskoder til at vise kode:
- Brugerdefinerede genvejskoder giver dig mulighed for at gemme kompliceret kode én gang og derefter genbruge den, hvilket eliminerer behovet for at skrive længere kodestumper hver gang.
- Du kan skrive din egen styling CSS til kodehighlighterne og boksene.
- Shortcodes kan bruges af alle, så andre bidragydere kan drage fordel af dine kodehighlightere og blokke med et klik på en knap.
Oprettelse af en brugerdefineret genvejskode kræver erfaring med redigering af WordPress-temafiler, arbejde med PHP-kode og muligvis oprettelse af WordPress-plugins. På grund af disse krav kan det være svært for dem, der er nye i PHP, at lave en brugerdefineret genvejskode til WordPress.
Det færdige produkt resulterer dog i en betydeligt nemmere måde at vise kode på WordPress på.
Du kan navngive den brugerdefinerede genvejskode som du vil, og oprette flere muligheder, som [html] [/html] og [css] [/css], for forskellige kodningssprog.
Husk, at brugerdefinerede genvejskoder fungerer bedst til syntaksmarkering, når du bruger teksteditoren (i WordPress Classic) eller feltet Custom HTML, når du arbejder med WordPress Gutenberg Block Editor.
Målet er at opbygge en brugerdefineret shortcode, hvor du kan skrive eller indsætte kode mellem sen shortcodes åbnings- og lukningstags.
Når den er offentliggjort, bliver din brugerdefinerede genvejskodes styling og fremhævningsindstillinger vist på frontend. Og den kode, du har tilføjet, vises pænt i syntakshighlighteren.
Metode 5: Brug af
Den måske ældste – men stadig utrolig pålidelige – måde at vise kode på WordPress er ved blot at tilføje specifikke HTML-tags omkring kodestumpen. Denne metode er bedst, når du arbejder med den klassiske WordPress-editor, eller i enhver HTML-editor.
Der er to muligheder:
<code>tags: Bedst til visning af en kort kodelinje; bruges ofte i afsnit<pre>tags: Ideel til længere blokke af kode, eller når du gerne vil have flere formateringsmuligheder
Mulighed 1: Brug <code> Tags til Inline Code Snippets
Indholdsskabere, der skriver om kodning, ønsker ikke altid at bruge store kodeblokke. Nogle gange giver det mere mening at inkludere en hurtig kode i et afsnit.
Du skal dog stadig fremhæve og bevare den pågældende kodes formatering. Og noget kode kan give problemer med det omgivende indhold, hvis det ikke bevares korrekt.
Lad os f.eks. tage <br> -tagget – uden <code> -tags ville det blot tilføje et brud til dit afsnit.
Ved at placere kodningen inden for disse tags får du et meget mere rent resultat:
<code> </code>For at gøre det skal du åbne et WordPress-indlæg og enten aktivere kodeeditoren (for Gutenberg Block Editor) eller teksteditoren (når du bruger WordPress Classic).
Indsæt eller skriv disse tags et sted i editoren; indsæt ikke den kode, du vil vise, endnu. Tilføj i stedet et mellemrum mellem tagsene.
<code> </code>
Skift til den visuelle editor (uanset om du er i Gutenberg eller Classic WordPress).
Du vil se et lille gråt mellemrum inde i det visuelle indhold. Klik for at placere din markør inden for det grå rum. Det er her, du kan indsætte eller indtaste koden til visning.
Når du skriver, udvides det grå felt, så det kan rumme kodestumpen. Klik på knappen Udgiv eller Opdater for det pågældende indlæg.
På forsiden af indlægget kan du nu se koden bevaret, som den skal være, og uden nogen mærkelig aktivitet (som f.eks. tilføjelse af en pause til dit indhold).
Formateringen af disse <code> -tags er normalt barebones, men det afhænger ofte af dit temas styling. Vores eksempel ændrer f.eks. kun skrifttypen, men indeholder ikke en grå baggrund.
Mulighed 2: Brug <pre> -tags til længere kodeblokke
Længere kodestumper fortjener deres egne blokke, der er adskilt fra det indhold, du skriver, i afsnit. Til dem anbefaler vi, at du holder dig til <pre> -tags.
Processen med at tilføje et <pre> -tag er ligesom med <code> -tags, men du har mere plads at arbejde med, når du skal indsætte din kode.
Gå til et indlæg, og åbn kode- (Gutenberg) eller tekst- (klassisk WordPress) editor. Indsæt eller skriv den kode, du gerne vil vise, ind. Omgiv derefter koden med disse tags:
<pre> </pre>
Skift til den visuelle editor for at se, hvordan det ser ud. Du vil bemærke, at tekststykket vil have en “Preformatted” -mærkning, hvilket er præcis, hvad <pre> -tagget skal gøre.
Klik på Udgiv eller Opdater, og skift derefter til frontend for at se din kode i sin oprindelige form. I lighed med <code> -tags er <pre> -tags elendige med formatering, så du står tilbage med det enkleste mulige udseende. Der er dog måder, hvorpå du selv kan stilisere dem.
Tips til styling af <pre>-tags
<pre> -tags er mindre stabile end <code> -tags, så du kan støde på vanskeligheder afhængigt af den type kode, du forsøger at vise.
Brug disse tips til at forbedre, hvordan det ser ud:
- Prøv at gøre dit bedste for at fjerne eller helt undgå linjeskift, da
<pre>-tagget ofte ikke genkender disse. Generelt reagerer den dårligt på for mange linjeskift. - Overvej at tilføje en
overflow-x:auto;-egenskab i din CSS for at tilføje rullefunktionalitet til<pre>-tagkoden. Dette hjælper ved overfyldt indhold, da<pre>-tagget i sig selv lader din kode løbe ud over siden. - Hold dig til skrifttyper med en enkelt skrifttype.
Du kan også stilisere tekstformateringen og boksen bag koden. Her er en startskabelon, som du kan tilføje til 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;
}Metode 6: Brug af en Markdown-editor, der opretter forbindelse til WordPress
Markdown-editorer giver ikke kun mulighed for at skrive og formatere hurtigere, men mange af dem forbinder direkte til WordPress for øjeblikkelig offentliggørelse direkte fra editoren.
Mange skribenter vender sig til markdown-editorer på grund af denne hurtige indholdsoprettelsesproces. Og heldigvis tilbyder nogle af disse redaktører markdown til kodeblokke, hvilket betyder, at du kan vise kode i markdown-editoren og derefter sende den direkte til WordPress til udgivelse.
Husk på, at normale tekstredigeringsprogrammer (som Sublime Text) ikke bevarer kodens integritet, når den overføres til offentliggørelse på WordPress. Og HTML-redigeringsprogrammer er ganske vist fremragende til at skrive og lagre kode, men de har heller ikke de fremhævningsfunktioner, der er nødvendige for at bevare koden til WordPress-udgivelse.
Der er masser af markdown-editorer at vælge imellem, men de ideelle løsninger har to funktioner til fælles:
- Direkte eksport til WordPress
- Markdown til fremhævning af kode
Du kan dog vælge en markdown-editor med HTML-eksport, hvis du ikke er vild med direkte WordPress-eksport.
De bedste markdown-editorer med begge funktioner er:
Ulysses og ByWord er premium-apps, mens Obsidian har både gratis og premium-versioner.
I den følgende vejledning vil vi bruge Ulysses.
Trin 1: Tilføj en Longform Code Block i Ulysses
Mens du udarbejder et dokument i Ulysses, skal du skrive " markdown – det er to apostroffer – når du straks vil tilføje en kodehighlighterblok inde i et dokument.
Denne markdown-metode er beregnet til længere kodeblokke. Den kan ikke bruges midt i et afsnit, så du skal oprette en ny linje, for at markdown kan blive aktiveret.
Når kodehighlighteren vises, kan du skrive eller indsætte hvad du vil i den.
En anden måde at slå kodeblokken til på er ved at klikke på menupunktet Markdown (tre vandrette prikker) og derefter vælge indstillingen Code.
Når du har klikket på dette menupunkt, vises feltet med kodehighlighter der, hvor markøren sidst var.
Hvis du vil placere kodestumper i afsnit, skal du bruge `` markdown (som ser næsten det samme ud, men det er faktisk to akutte/grave accenter i stedet for apostroffer).
Trin 3: Eksporter til WordPress
Når du har dit dokument klar, er det tid til at eksportere det hele til WordPress.
Det vidunderlige ved markdown-redigeringsprogrammer, der er forbundet med WordPress, er, at de bevarer kodeblokkene under hele overførslen. Så du vil se pænt formaterede kodehighlightere klar til at offentliggøre i WordPress.
I Ulysses skal du gå til toppen af dokumentet for at finde værktøjslinjen. Klik på knappen Publishing Preview (udgivelseseksempel).
Dette viser en rullemenu, hvor du kan vælge en platform og et websted, som du vil udgive på. Du kan også bruge indstillingen Administrer konti i denne menu til at logge ind på et WordPress-websted, før du eksporterer.
Når du har valgt det rigtige websted, skal du klikke på knappen Udgiv.
Udfyld titlen på indlægget, tidsplanen og eventuelle andre oplysninger, som du ønsker, f.eks. kategorier, tags og fremhævede billeder.
Den vigtigste del er dog at indstille Status til Udkast, så du ikke offentliggør indlægget uden at have gennemgået det på WordPress først.
Klik på OK for at fortsætte.
I løbet af få sekunder placerer Ulysses hele dokumentet i et nyt WordPress-indlæg (du skal muligvis logge ind i din WordPress-administrator, når det dukker op).
Du vil se kodeblokkene, der allerede er konfigureret og klar til at blive offentliggjort. Klik på knappen Udgiv for at tage det live.
På frontend vil du se, at inline-kodesnippets og større kodeblokke er pænt fremhævet, og formateringen fra denne kode er bevaret.
Oversigt
Der er flere metoder til korrekt visning af kode på WordPress, og det afhænger ofte af den WordPress-editor, der bruges, det kodesprog, du ønsker at vise, og hvordan du ønsker at vise og formatere koden. Hvis du for eksempel vælger et plugin, vil det helt sikkert give en mere kreativ formateringsoplevelse end standardkodeblokken i WordPress Gutenberg-editoren.
I denne artikel har vi dækket mange forskellige metoder, der illustrerer, hvordan man viser kode i WordPress.
Vi anbefaler typisk, at du starter med metode 1 og arbejder dig igennem. Metode 2 tjener dig godt, hvis du leder efter flere stylingmuligheder, og metoder 3-5 er kun nyttige i særlige situationer. Metode 6 er lidt af en bonusløsning, beregnet til dem, der foretrækker markdown-editorer frem for at skrive direkte i WordPress.
Uanset hvilken metode du vælger, kan en pålidelig hostingudbyder hjælpe dig med at finpudse dit websted endnu mere. Kinsta’s WordPress-hostingløsninger tilbyder planer til websteder i alle former og størrelser, og den brugervenlige platform – MyKinsta, et proprietært admin dashboard – gør det nemt at redigere enhver del af dit websted og dets filer. Derudover får du de ekstra fordele ved Kinsta’s hastighed, sikkerhed og support i verdensklasse.
Har du tidligere forsøgt at vise kode i WordPress? Hvis ja, hvilken metode fungerede bedst for dig? Lad os vide det i kommentarfeltet nedenfor.
Skriv et svar