Nästan alla bloggare, skapare av innehåll eller teknikutvecklare behöver ibland visa markerade kodavsnitt på sin blogg. Detta kan vara en huvudvärk i sig. Det kan dock också vara nödvändigt att markera en eller flera rader i det här utdraget, och denna funktion är tyvärr inte en del av de flesta kodintegrationer. Lyckligtvis finns plugin-programmet SyntaxHighlighter Evolved. Vi visar dig hur du använder den för att hålla koden så ren och läsbar som möjligt.

SyntaxHighlighter Evolution

Syntaxmarkering

Installationen och aktiveringen av plugin-programmet är enkelt. Du hittar det i WP.org-plugins-lagret men se till att det är väl gjort av Alex Mills (Viper007Bond), för det finns faktiskt många resultat. Vi vet dock att den här är tillförlitlig och uppdaterad. Dessutom kommer den här med ett specialblock för Gutenberg-redaktören. För att inte tala om ett antal parametrar som gör att du kan anpassa din upplevelse, vilket gör det till vårt val för denna typ av uppgift.

Syntax highlighter wordpress-plugin

I menyn Parametrar på din WordPress-instrumentpanel hittar du ett nytt objekt som heter SyntaxHighlighter . Fortsätt och klicka på den. Där kan du justera varje liten sak som du behöver för att bädda in utdragen på din WordPress-webbplats.

SyntaxHighlighter-inställningar

Inställningssidan för pluginet är relativt enkel. Ett särskilt element som vi gillar med detta plugin är att du får ett stort antal anpassningar angående hur koden visas på din webbplats. Du kan lägga till CSS-klasser till inbäddningen, justera radnummerutfyllnad, välja teman färg, använd smarta flikar och radbrytningar och bestäm hur individuella webbplatsomfattande kodspråksmarkering ska laddas.

Syntaxhighlighter-konfiguration

Vi vill definiera tre specifika parametrar som de flesta bör känna till.

Plugin-version, radnummer och flikstorlekar

Den första är vilken version av plugin du laddar. Även om plugin-programmet förblir uppdaterad i förvaret, du kan välja mellan 2.x- och 3.x-versionerna av plug-in , beroende på hur du vill visa din kod. Båda är säkra, men de erbjuder var och en specifika funktioner som den andra inte gör (i skrivande stund).

Om användare kopierar din kod är det viktigaste kommer version 3.x att göra. Men om din är mer användbar för visning än det faktiska verktyget, kan den nya raden i version 2.x vara bättre för dig, eftersom det eliminerar behovet av att använda rullningslister. för stora kodavsnitt.

Då måste du visa linjenumren eller inte. För stora bitar av kod och självstudier är radnummer ovärderliga. Men när du har korta utdrag är det inte nödvändigt att permanent märka dem som rad 1 och 2. Om du tar bort dem kan kodens utseende avsevärt förbättras.

Och så finns det flikstorlek fortfarande kontroversiell. Standardalternativet är 4, men du kan ändra det till vilket nummer du vill. Inklusive korrekt värde på 2. (Ja, vi inser att det inte finns något korrekt värde. Vi gillar precis två mellanslag för flikarna.)

Din kod och kortkoder

Om du bläddrar till botten av sidan Parametrar , ser du en förhandsgranskning av den stora koden, liksom ett stort antal kortkodsparametrar. Din tid skulle vara bra att gå igenom dem, bara för att se vad allt plugin kan göra för att visa upp dina utdrag. Alla ändringar du gjort ovan i kodvisningen i inställningarna ovan kommer att återspeglas här. Så var noga med att slå på spara efter att du har ändrat något av alternativen.

Se ändringar av divi-syntaxhighliter

Medan vissa människor inte är de största fansen av kortkoder eftersom de kan länka dig till vissa plugins, tycker vi att de är värda att använda eftersom de är smarta och lätta att komma ihåg. Om inget annat måste du komma ihåg två saker och då kommer plugin-programmet att fungera bäst för dig.

ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>

Eller några variationer. Om du kommer ihåg är du säker på de olika sakerna du kan göra med det här plugin-programmet. Medan du kan använda en lång identifierare, är SyntaxHighlighter-pluginbyggnaden tillräckligt bra för att förenkla ditt arbete.

Använd korta koder

Var som helst du kan rendera en kortkod kan du använda dem. I Divi eller den klassiska editorn, kan du använda textmodulen eller TinyMCE-redigeraren och bara klistra in koden mellan kortkoderna. På grund av hur fliken Visual fungerar föreslår vi att du använder fliken Texte för att behålla dessa formatering specialtecken.

Divi-textparameter

Om du är Gutenberg / Block Editor-användare är det så enkelt. Du kan återigen använda textblocket för detta. Ännu enklare, det anpassade HTML-blocket. Som ovan klistrar du in koden i kortkodsetiketterna.

Blockera html gutenberg divi

Ännu bättre är SyntaxHighlighter Evolved-blocket självt. Plugin-installationen innehåller ett eget Gutenberg-block; så om du inte är en kortkod och inte vill röra dig med inställningarna behöver du inte. Hitta bara blocket under formatering och sätt in det i ditt meddelande eller sida.

Syntax highliter gutenberg

Oavsett hur du sätter in koden, kommer du att se samma rendering på framsidan av din WordPress-webbplats.

För att sammanfatta

Du kan behöva presentera utdrag för din publik av många anledningar. Kanske skriver du handledning eller skickar lösningar på vanliga problem som publiken kan ta och använda som de vill? Men ibland ger en GitHub-integration inte den typ av upplevelse du vill ha för dina användare. Det här är när du behöver ett plugin som SyntaxHighlighter Evolved. 

Med bara några få klick, med lite anpassning och ett Gutenberg-block eller kortkod, kommer din publik att utforska din kod utan problem.