Bijna alle bloggers, makers van inhoud of technologieontwikkelaars moeten soms gemarkeerde codefragmenten op hun blog weergeven. Dit kan op zichzelf al hoofdpijn zijn. Het kan echter ook nodig zijn om een ​​of meer regels in dit fragment te markeren, en deze functionaliteit maakt helaas geen deel uit van de meeste code-integraties. Gelukkig bestaat de plug-in SyntaxHighlighter Evolved. We laten u zien hoe u deze kunt gebruiken om de code zo schoon en leesbaar mogelijk te houden.

Syntaxis Highlighter Evolved

Syntaxis markeerstift

Installatie en activering van de plug-in is eenvoudig. Je kunt het vinden op de WP.org plugins repository maar zorg ervoor dat het goed is gedaan door Alex Mills (Viper007Bond), want er zijn inderdaad veel resultaten. We weten echter dat deze betrouwbaar en up-to-date is. Bovendien wordt deze geleverd met een gespecialiseerd blok voor de Gutenberg-editor. Om nog maar te zwijgen van een aantal parameters waarmee u uw ervaring kunt personaliseren, waardoor het onze keuze is voor dit soort taken.

Syntax markeerstift wordpress plugin

In het menu Parameters van uw WordPress-dashboard vindt u een nieuw item met de naam SyntaxHighlighter . Ga je gang en klik erop. Daar kun je elk klein ding aanpassen dat je nodig hebt om de fragmenten in je WordPress-site in te sluiten.

Syntaxis Highlighter-instellingen

De instellingenpagina voor de plug-in is relatief eenvoudig. Een bijzonder element dat we leuk vinden aan deze plug-in, is dat u een groot aantal aanpassingen krijgt met betrekking tot hoe de code op uw site wordt weergegeven. U kunt CSS-klassen toevoegen aan de inbedding, regelnummeropvulling aanpassen, kiezen thema's kleur, gebruik slimme tabs en regeleinden, en bepaal hoe individuele site-brede coderingstaal-accentuering wordt geladen.

Syntaxhighlighter configuratie

We willen drie specifieke parameters definiëren die de meeste mensen zouden moeten weten.

Plugin-versie, regelnummers en tabgroottes

De eerste is welke versie van de plug-in u laadt. Hoewel de plug-in up-to-date blijft in de repository, u kunt kiezen tussen de 2.x- en 3.x-versies van de plug-in , afhankelijk van hoe u uw code wilt weergeven. Beide zijn veilig, maar ze bieden elk specifieke functies die de ander niet heeft (op het moment van schrijven).

Als gebruikers uw code kopiëren is het belangrijkste, versie 3.x zal het doen. Als de uwe echter nuttiger is voor weergave dan het eigenlijke hulpprogramma, dan is de nieuwe regel in versie 2.x misschien beter voor u, omdat het het gebruik van schuifbalken overbodig maakt. voor grote codefragmenten.

Vervolgens moet u de regelnummers wel of niet weergeven. Voor grote stukken code en tutorials zijn regelnummers van onschatbare waarde. Als u echter korte fragmenten heeft, is het niet nodig om deze permanent te labelen als regel 1 en 2. Als u ze verwijdert, kan het uiterlijk van de code aanzienlijk worden verbeterd.

En dan is er de tabblad grootte nog steeds controversieel. De standaardoptie is 4, maar u kunt deze wijzigen in elk gewenst nummer. Inclusief de juiste waarde van 2. (Ja, we realiseren ons dat er geen juiste waarde is. We houden gewoon van 2 spaties voor de tabbladen.)

Uw code en shortcodes

Als je naar de onderkant van de pagina scrolt Parameters , ziet u een voorbeeld van de grote code, evenals een groot aantal shortcode-parameters. Uw tijd zou er goed aan besteed zijn om ze door te nemen, gewoon om te zien wat alle plug-ins kunnen doen om uw fragmenten te laten zien. Ook alle wijzigingen die u hierboven in de codeweergave in de bovenstaande instellingen hebt aangebracht, worden hier weergegeven. Zorg er dus voor dat u op Opslaan klikt nadat u een van de opties heeft gewijzigd.

Zie divi syntaxhighliter modificaties

Hoewel sommige mensen misschien niet de grootste fans van shortcodes zijn omdat ze je aan bepaalde plug-ins kunnen linken, denken we dat deze de moeite waard zijn om te gebruiken omdat ze slim en gemakkelijk te onthouden zijn. Als er niets anders is, moet u twee dingen onthouden en dan zal de plug-in het beste voor u werken.

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

Of enkele variaties. Als u het zich kunt herinneren, bent u zeker van de verschillende dingen die u met deze plug-in kunt doen. Hoewel u een lange ID kunt gebruiken, is de SyntaxHighlighter-plug-in goed genoeg gebouwd om uw werk te vereenvoudigen.

Gebruik korte codes

Overal waar je een shortcode kunt renderen, kun je ze gebruiken. In Divi of de klassieke editor, je kunt de tekstmodule of de TinyMCE-editor gebruiken en de code gewoon tussen de shortcodes plakken. Vanwege de manier waarop het tabblad Visueel werkt, raden we aan het tabblad te gebruiken Teksten om deze opmaak speciale tekens te behouden.

Divi-tekstparameter

Als u een Gutenberg / Block Editor-gebruiker bent, zijn de dingen zo eenvoudig. Hiervoor kunt u wederom het tekstblok gebruiken. Nog eenvoudiger, het aangepaste HTML-blok. Plak de code zoals hierboven in de shortcode-tags.

Blokkeer html gutenberg divi

Beter nog, het SyntaxHighlighter Evolved-blok is zichzelf. De plug-in installatie bevat zijn eigen Gutenberg-blok; dus als je geen shortcode bent en niet wilt knoeien met de instellingen, hoef je dat niet te doen. Zoek gewoon het blok eronder formatteren en plaats deze in uw bericht of pagina.

Syntaxis highliter gutenberg

Hoe u de code ook invoegt, u ziet dezelfde weergave aan de voorkant van uw WordPress-site.

Samenvatten

Mogelijk moet u om verschillende redenen fragmenten aan uw publiek presenteren. Misschien schrijf je tutorials of post je oplossingen voor veelvoorkomende problemen die het publiek kan nemen en gebruiken zoals ze willen? Maar soms biedt een GitHub-integratie gewoon niet het soort ervaring dat u voor uw gebruikers wilt. Dit is wanneer je een plug-in zoals SyntaxHighlighter Evolved nodig hebt. 

In slechts een paar klikken, met een beetje aanpassing en een Gutenberg-blok of shortcode, zal uw publiek uw code zonder problemen verkennen.