Gå till innehållet

Hur man lägger till ett kodavsnitt med Gutenberg på WordPress

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Nästan alla bloggare, innehållsskapare eller tekniska utvecklare måste lägga upp markerade utdrag på sin blogg då och då. Det kan vara huvudvärk i sig. Att markera en eller flera rader i detta utdrag kan dock också vara nödvändigt, och denna funktionalitet är tyvärr inte en del av de flesta kodintegrationer. Lyckligtvis finns pluginet 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 plugin-programmet är relativt enkelt. 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 i inbäddningen, justera radnummerfyllningen, välja färgteman, använda smarta flikar och radbrytningar och bestämma om kodningsspråkets individuella markering ska laddas. webbplatsövergripande.

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).

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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></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 du än kan skapa en kortkod kan du använda dem. I Divi eller den klassiska redigeraren kan du använda textmodulen eller TinyMCE-redigeraren och helt enkelt klistra in koden mellan kortkoderna. På grund av hur Visual-fliken fungerar föreslår vi att du använder 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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer