Nesten alle bloggere, skapere av innhold eller teknologiutviklere trenger noen ganger å vise fremhevede kodebiter på bloggen sin. Dette kan være en hodepine i seg selv. Det kan imidlertid også være nødvendig å markere en eller flere linjer i denne kodebiten, og denne funksjonaliteten er dessverre ikke en del av de fleste kodeintegrasjoner. Heldigvis finnes SyntaxHighlighter Evolved-plugin. Vi viser deg hvordan du bruker den for å holde koden så ren og lesbar som mulig.
SyntaxHighlighter Evolution
Installasjonen og aktiveringen av pluginet er enkel. Du finner den på WP.org-plugins-lagringsstedet men sørg for at det er godt gjort av Alex Mills (Viper007Bond), fordi det faktisk er mange resultater. Vi vet imidlertid at denne er pålitelig og oppdatert. Dessuten kommer denne med en spesialblokk for Gutenberg-redaktøren. For ikke å nevne en rekke parametere som lar deg tilpasse opplevelsen din, noe som gjør det til vårt valg for denne typen oppgaver.
I menyen Parametere av WordPress-oversikten, finner du et nytt element som heter SyntaxHighlighter . Gå videre og klikk på den. Der kan du justere alle de små tingene du trenger for å legge inn kodebitene på WordPress-nettstedet ditt.
SyntaxHighlighter-innstillinger
Innstillingssiden for pluginet er relativt enkel. Et spesielt element som vi liker med denne plugin er at du får en god del tilpasninger angående hvordan koden vises på nettstedet ditt. Du kan legge til CSS-klasser i innebyggingen, justere linjenummerutfylling, velge temaer farge, bruk smarte tabulatorer og linjeskift, og avgjør hvordan individuell nettstedsomfattende kodespråk fremheving lastes inn.
Vi ønsker å definere tre spesielle parametere som folk flest bør kjenne til.
Plugin-versjon, linjenummer og tabulatorstørrelser
Den første er hvilken versjon av pluginet du laster inn. Selv om plugin-modulen holder seg oppdatert i depotet, Du kan velge mellom versjonene 2.x og 3.x av plugin-modulen , avhengig av hvordan du vil vise koden. Begge er sikre, men de tilbyr hver sin spesifikke funksjoner som den andre ikke gjør (i skrivende stund).
Hvis brukere kopierer koden din er det viktigste, vil versjon 3.x gjøre det. Men hvis din er mer nyttig for visning enn det faktiske verktøyet, kan den nye linjen i versjon 2.x være bedre for deg, da det eliminerer behovet for å bruke rullefelt. for store kodebiter.
Da må du vise linjenumrene eller ikke. For store deler av kode og opplæring er linjenumre uvurderlige. Når du har korte utdrag, er det imidlertid ikke nødvendig å merke dem permanent som linjene 1 og 2. Hvis du fjerner dem, kan kodens utseende vesentlig forbedres.
Og så er det fanestørrelse fremdeles kontroversiell. Standardalternativet er 4, men du kan endre det til hvilket som helst nummer du vil ha. Inkludert riktig verdi på 2. (Ja, vi skjønner at det ikke er noen riktig verdi. Vi liker akkurat to mellomrom for fanene.)
Din kode og kortkoder
Hvis du blar til bunnen av siden Parametere , vil du se en stor forhåndsvisning av koden, samt et stort antall kortkodeparametere. Tiden din vil bli brukt godt på å gå gjennom dem, bare for å se hva alt programtillegget kan gjøre for å vise utdragene dine. Eventuelle endringer du har gjort ovenfor i kodevisningen i innstillingene ovenfor, vil også gjenspeiles her. Så vær sikker på å trykke på lagre etter å ha endret noen av alternativene.
Selv om noen kanskje ikke er de største fansen av kortkoder fordi de kan koble deg til visse plugins, tror vi disse er verdt å bruke fordi de er smarte og enkle å huske. Hvis ikke annet, må du huske to ting, og deretter vil plugin-programmet fungere på sitt beste for deg.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Eller noen varianter. Hvis du kan huske, er du trygg på de forskjellige tingene du kan gjøre med denne pluginen. Selv om du kan bruke en lang identifikator, er SyntaxHighlighter-plugin bygget godt nok til å forenkle arbeidet ditt.
Bruk korte koder
Hvor som helst du kan gjengi en kortkode, kan du bruke dem. I Divi eller den klassiske editoren, kan du bruke tekstmodulen eller TinyMCE-editoren og bare lime inn koden mellom kortkodene. På grunn av hvordan Visual-fanen fungerer, foreslår vi å bruke fanen Texte for å beholde disse formateringen spesialtegn.
Hvis du er en Gutenberg / Block Editor-bruker, er ting så enkelt. Du kan igjen bruke tekstblokken til dette. Enda enklere, den tilpassede HTML-blokken. Som ovenfor limer du inn koden i kortkodekodene.
Enda bedre, SyntaxHighlighter Evolved-blokken er seg selv. Plugin-installasjonen inkluderer sin egen Gutenberg-blokk; så hvis du ikke er en kort kode og ikke vil rote med innstillingene, trenger du ikke. Bare finn blokken under formatering og sett den inn i meldingen eller siden din.
Uansett hvordan du setter inn koden, vil du se den samme gjengivelsen på fronten av WordPress-nettstedet ditt.
For å oppsummere
Det kan hende du må presentere utdrag for publikum av flere grunner. Kanskje du skriver opplæringsprogrammer eller legger ut løsninger på vanlige problemer som publikum kan ta og bruke som de vil? Men noen ganger gir en GitHub-integrasjon bare ikke den opplevelsen du ønsker for brukerne dine. Dette er når du trenger et plugin som SyntaxHighlighter Evolved.
På bare noen få klikk, med litt tilpasning og en Gutenberg-blokk eller -kode, vil publikum utforske koden din uten problemer.
