Kodeutheving i WordPress: slik viser du kode pent (og hva som skjedde med Google Syntax Highlighter)

Google Syntax Highlighter var rundt 2010 en av de mest populære måtene å vise programkode pent på i WordPress. I dag er både tjenesten verktøyet bygde på og måten koden ble lagt inn på utdatert. Denne guiden forklarer hva «Google Syntax Highlighter» egentlig var, hvorfor den ikke lenger fungerer slik den gjorde, og – viktigst – hvordan du viser kode på en ren, lesbar og trygg måte i WordPress i dag. Vi går gjennom den innebygde kodeblokken, moderne plugins og en nøytral sammenligning av alternativene, slik at du kan velge riktig løsning for bloggen din.

Hva var «Google Syntax Highlighter»?

«Google Syntax Highlighter» er et folkelig navn på SyntaxHighlighter, et JavaScript-bibliotek laget av utvikleren Alex Gorbatchev. Oppgaven til biblioteket er å fremheve kildekode: det leser koden, kjenner igjen nøkkelord, strenger, kommentarer og tall, og fargelegger dem slik at koden blir langt lettere å lese enn en ensfarget tekstblokk. Resultatet ligner måten kode vises på i en profesjonell koderedigerer.

Begrepet «kodeutheving» (engelsk syntax highlighting) betyr nettopp dette: å gi ulike deler av koden ulik farge eller stil etter hvilken rolle de spiller i programmeringsspråket. Uten utheving er alt svart tekst; med utheving ser du raskt hvor en funksjon starter, hvor en tekststreng slutter og hvilke ord som er reserverte kommandoer.

Hvorfor den ble kalt «Google»

SyntaxHighlighter var ikke laget av Google. Navnet kom av at prosjektet lå på Google Code (code.google.com), Googles gratis vertstjeneste for åpen kildekode. Fordi nedlastingslenken og dokumentasjonen pekte dit, begynte mange bloggere å omtale biblioteket som «Google Syntax Highlighter». Det er altså et tredjepartsprosjekt som tilfeldigvis var hostet hos Google – ikke et Google-produkt.

Slik ble kode lagt inn den gangen

Den opprinnelige metoden gikk ut på å pakke koden inn i en pre-tagg med spesielle attributter. I eldre versjoner skrev man for eksempel <pre name=»code» class=»html»> rundt HTML-kode, og <pre name=»code» class=»php»> rundt PHP-kode. Attributtet class fortalte biblioteket hvilket språk koden var skrevet i, slik at riktig fargelegging ble valgt. Et lite JavaScript på siden gjorde resten når siden ble lastet i nettleseren.

Hvorfor den opprinnelige løsningen ikke lenger er aktuell

Den opprinnelige løsningen er i praksis avviklet, og hovedgrunnen er at fundamentet forsvant. Google Code ble satt i skrivebeskyttet modus 24. august 2015 og stengt helt 25. januar 2016. Prosjekter som fortsatt lenket til skript og nedlastinger der, mistet grunnlaget sitt. Gamle veiledninger som ber deg laste ned filer fra en code.google.com-adresse, peker derfor på noe som ikke lenger finnes i aktiv form.

WordPress-pluginen de fleste norske bloggere brukte for å få dette inn uten å kode selv, het SyntaxHighlighter Evolved. Den ble laget av Alex Mills, kjent på nett som Viper007Bond, en utvikler i selskapet Automattic (firmaet bak WordPress.com). Mills gikk bort i februar 2019 etter en kamp mot leukemi, og Automattic overtok etterpå ansvaret for flere av plugin-ene hans. Selve pluginen finnes fortsatt, men den er merket av WordPress.org som potensielt uten aktivt vedlikehold – mer om det lenger ned.

I tillegg er den gamle <pre name=»code»>-syntaksen i dag en «legacy»-løsning. Moderne WordPress bruker blokkredigereren (Gutenberg), og det finnes langt enklere og tryggere måter å vise kode på nå enn å skrive spesielle attributter for hånd.

Hvordan kodeutheving egentlig fungerer

Kodeutheving skjer på én av to måter, og forskjellen er viktig for både ytelse og personvern. Begge gir fargelagt kode, men de gjør jobben på helt ulike tidspunkt.

• Klientside (i nettleseren): Et JavaScript-bibliotek som Prism.js, highlight.js eller EnlighterJS sendes til leseren sammen med siden. Når siden er lastet, går skriptet gjennom kodeblokkene og fargelegger dem. Fordelen er fleksibilitet; ulempen er at det laster ekstra JavaScript hos hver besøkende.
• Serverside (før siden sendes): Serveren fargelegger koden mens innlegget bygges, og sender ferdig HTML med farger til leseren. Verktøy som highlight.php og Shiki fungerer slik. Fordelen er at det ikke trengs ekstra JavaScript hos leseren, noe som gir raskere og mer forutsigbar visning.

Begge tilnærmingene er legitime. For en typisk blogg med noen kodeeksempler per innlegg merker leserne sjelden forskjell i hastighet, men serverside-løsninger har et lite forsprang på ytelse fordi de ikke krever at nettleseren gjør arbeidet.

Slik viser WordPress kode uten plugin

Du trenger ofte ikke noen plugin i det hele tatt. WordPress har en innebygd Kode-blokk i blokkredigereren som er laget nettopp for å vise kode. Du legger den til på samme måte som et avsnitt: trykk på pluss-tegnet, søk etter «Kode», og lim inn koden din. WordPress tar da vare på mellomrom, innrykk og spesialtegn, og viser koden i en ren, fast bredde-skrift.

Den innebygde kodeblokken gir ikke farger, men den gjør det viktigste riktig: den forhindrer at tegn som < og > blir tolket som HTML, og den bevarer formateringen. For korte utdrag – en enkelt kommando, et par linjer CSS – er dette ofte alt du trenger. Vil du vise noe midt i en setning, finnes også en inline kode-formatering du når via verktøylinjen i et vanlig avsnitt.

Skal du jobbe mye med kode og markup, er det nyttig å forstå det grunnleggende først. Vi har egne gjennomganger av nyttige og ofte brukte tagger i HTML og av hva CSS er, og en praktisk innføring i hvordan du lager en HTML-lenke. Disse er en god ballast når du begynner å lime inn egen kode i innleggene.

SyntaxHighlighter Evolved i dag

SyntaxHighlighter Evolved finnes fortsatt i WordPress sin pluginkatalog, men du bør kjenne tilstanden før du installerer den. Nyeste versjon er 3.7.2, pluginen har over 20 000 aktive installasjoner og en god gjennomsnittlig vurdering fra brukerne. Samtidig har WordPress.org satt en advarsel om at den ikke er testet mot de tre siste store WordPress-versjonene, og at den kan være uten aktivt vedlikehold.

I praksis betyr det at den ofte fortsatt virker, men at du tar en risiko: dersom en fremtidig WordPress-oppdatering endrer noe pluginen er avhengig av, er det ikke garantert at noen fikser det raskt. For eksisterende blogger som allerede bruker den og er fornøyd, er det sjelden grunn til panikk. For et nytt prosjekt er det klokere å velge en løsning som vedlikeholdes aktivt. Du finner pluginen på den offisielle SyntaxHighlighter Evolved-siden hos WordPress.org.

Dagens beste alternativer

Det finnes flere godt vedlikeholdte plugins som gjør samme jobb som den gamle løsningen – og mer. Tabellen under sammenligner de mest aktuelle på teknologi, hvor fargeleggingen skjer og hvem de passer for. Alle er gratis å komme i gang med, og tallene for aktive installasjoner er hentet fra WordPress sin pluginkatalog.

Enlighter

Enlighter bruker sitt eget bibliotek, EnlighterJS, og fargelegger på klientsiden. Den har en egen blokk i redigereren, en temavelger og mulighet for å gruppere flere kodeblokker i faner. Den passer godt for deg som vil ha mange tilpasningsmuligheter uten å røre koden selv.

Code Block Pro

Code Block Pro bruker Shiki, den samme fargeleggingsmotoren som den populære editoren VS Code, og fargelegger på serversiden. Den støtter over 140 programmeringsspråk og leveres med en lang rekke temaer, linjenummer og en «kopier»-knapp. Dette er et godt valg når du vil at kodeeksemplene skal se identiske ut med et profesjonelt utviklingsmiljø.

Code Syntax Block og Syntax-highlighting Code Block

Begge bygger videre på den innebygde kodeblokken i stedet for å lage noe helt nytt. Code Syntax Block legger Prism.js-utheving på klientsiden, mens Syntax-highlighting Code Block bruker highlight.php og fargelegger på serversiden. Hvis du liker den innebygde blokken, men savner farger, er disse to en lett og ryddig oppgradering.

Slik kommer du i gang – steg for steg

Å bytte fra den gamle metoden til en moderne plugin tar bare noen minutter. Slik gjør du det:

1. Ta sikkerhetskopi først. Før du installerer noe nytt, bør du ha en fersk backup av nettstedet. Da kan du trygt angre om noe ser rart ut.
2. Installer pluginen. Gå til «Programtillegg» → «Legg til nytt» i WordPress-kontrollpanelet, søk etter navnet (for eksempel «Enlighter» eller «Code Block Pro»), og trykk «Installer» og deretter «Aktiver».
3. Legg til en kodeblokk. Åpne innlegget du vil redigere, trykk på pluss-tegnet og velg kodeblokken pluginen la til (eller den innebygde Kode-blokken om du bruker et tillegg som utvider den).
4. Velg språk. De fleste plugins lar deg velge språk fra en meny – HTML, CSS, PHP, JavaScript og så videre – slik at fargeleggingen blir riktig.
5. Forhåndsvis og publiser. Se på innlegget i forhåndsvisning for å sjekke at koden ser riktig ut, og lagre deretter.

Har du mye gammel kode i gamle innlegg som bruker <pre name=»code»>-syntaksen, trenger du ikke rette alt på én gang. Begynn med de viktigste innleggene, og la de andre ligge til du eventuelt rydder opp.

Vanlige feil – og hvordan du unngår dem

De fleste problemene med å vise kode i WordPress skyldes noen få, gjentatte feil. Her er de vanligste:

• Å lime kode rett inn i et vanlig avsnitt. Da tolker WordPress ofte tegn som < og > som HTML, og deler av koden forsvinner. Bruk alltid en kode- eller forhåndsformatert blokk.
• Å bruke to kode-plugins samtidig. To ulike uthevingsbibliotek på samme side kan krasje med hverandre og gi dobbel eller ødelagt visning. Velg én løsning.
• Å stole på en død nedlastingslenke. Følger du en gammel guide som ber deg hente filer fra Google Code, finner du ingenting. Bruk en plugin fra WordPress sin katalog i stedet.
• Å glemme språkvalget. Uten riktig språk blir fargeleggingen tilfeldig eller uteblir. Sett alltid språket på blokken.
• Å overse ytelse. Laster du tunge JavaScript-bibliotek på hver side selv om bare noen få innlegg har kode, kan det bremse nettstedet. Velg en plugin som bare laster skript der det faktisk trengs, eller en serverside-løsning.

Sikkerhet, personvern og ytelse

Den viktigste sikkerhetsregelen er å unngå plugins som ikke lenger vedlikeholdes. En plugin uten oppdateringer kan over tid få sårbarheter som ingen tetter, og den kan slutte å virke når WordPress oppdateres. Derfor er «sist oppdatert»-datoen og advarselen om testede versjoner i pluginkatalogen noe du alltid bør sjekke før installasjon.

Når det gjelder personvern, er serverside-løsninger (som Code Block Pro og Syntax-highlighting Code Block) ryddige fordi de ikke laster eksterne skript hos leseren. Klientside-bibliotek som følger med pluginen og serveres fra ditt eget domene er også greit. Vær mer forsiktig med gamle løsninger som hentet skript fra en ekstern tjeneste som ikke lenger finnes – da får du i beste fall ingen utheving, i verste fall feilmeldinger.

For ytelse er regelen enkel: last minst mulig ekstra, og helst bare på sider som faktisk har kode. Vil du gå grundigere til verks med å holde koden ryddig, kan det lønne seg å validere koden på hjemmesiden din jevnlig.

Hvilken løsning passer for deg?

Riktig valg avhenger av hvor mye kode du viser og hvor viktig utseendet er. Her er en enkel pekepinn:

• Viser du kode sjelden og i korte utdrag? Bruk den innebygde Kode-blokken. Den krever ingen plugin og er alltid vedlikeholdt sammen med WordPress.
• Vil du ha farger med minst mulig oppsett? Et tillegg som utvider kodeblokken, som Code Syntax Block eller Syntax-highlighting Code Block, gir deg farger uten å endre arbeidsflyten.
• Ønsker du mange temaer og tilpasning? Enlighter eller Code Block Pro gir profesjonelt utseende, flere temaer og finjustering.
• Har du allerede SyntaxHighlighter Evolved og er fornøyd? Du kan beholde den, men følg med på advarselen om vedlikehold og ha en plan for å bytte om den slutter å virke.

Uansett hvilken vei du velger, handler det om å gjøre innholdet lettere å lese. Skriver du teknisk om WordPress, kan det også være verdt å se hvordan du presenterer resten av bloggen – vi har blant annet samlet tips om WordPress-design for norske bloggere, og en gjennomgang av hva som skjedde med en gammel topp 10-liste over WordPress-plugins som setter denne typen verktøy i perspektiv. Trenger du en ren skriveflate for å teste kode, finnes det også flere gratis HTML- og CSS-editorer å velge mellom.

Vanlige spørsmål (FAQ)

Er Google Syntax Highlighter det samme som Google laget?

Nei. Navnet kommer av at biblioteket SyntaxHighlighter, laget av Alex Gorbatchev, lå på Googles vertstjeneste Google Code. Det var aldri et offisielt Google-produkt, og tjenesten det lå på ble stengt i januar 2016.

Virker den gamle <pre name=»code»>-metoden fortsatt?

Bare hvis en plugin som forstår den syntaksen fremdeles er aktiv på nettstedet ditt. Skriver du den selv uten et slikt tillegg, får du ingen utheving. For nye innlegg bør du bruke den innebygde kodeblokken eller en moderne plugin i stedet.

Trenger jeg en plugin for å vise kode i WordPress?

Nei, ikke nødvendigvis. Den innebygde Kode-blokken bevarer formatering og spesialtegn helt uten plugin. Du trenger bare et tillegg hvis du vil ha fargelegging av koden.

Er SyntaxHighlighter Evolved trygg å bruke i dag?

Den fungerer ofte fortsatt, men WordPress.org merker den som potensielt uten aktivt vedlikehold. Den har over 20 000 installasjoner, men for nye prosjekter er det tryggere å velge en plugin som oppdateres jevnlig.

Hva er forskjellen på klientside- og serverside-utheving?

Klientside-utheving fargelegger koden i nettleseren med JavaScript etter at siden er lastet, mens serverside-utheving fargelegger den på serveren før siden sendes. Serverside laster mindre ekstra hos leseren og regnes som litt raskere.