Hvis du tilbyder software eller programmeringstip, vil du helt sikkert dele kodestykker. Denne måde at dele kodestykker kan hjælpe dem med hurtigt at oprette en praksis. Det er dog ikke muligt at dele kode med al den nødvendige formatering som standard. Hvad jeg mener med formatering er syntaksfremhævning. Alligevel er det noget ret nemt at gøre.
Heldigvis, hvis du bruger divi, bør du vide, at der er en indbygget måde at gøre dette manuelt, for at tilføje brugerdefinerede stilarter til disse kodestykker. Derudover er der plugins og ressourcer tredjeparts apps, der virkelig kan forenkle processen med at skabe smukke og funktionelle uddrag i Divi.
I denne vejledning viser jeg dig, hvordan du deler kodestykker i Divi (manuelt). Og jeg vil også vise dig, hvordan du designer uddragsblokke med Divi Builder, som tager dig til det næste niveau.
undersøgelse
Her er en oversigt over de uddrag, der er mulige i denne vejledning.
Kodestykkebokse med kodestykke tilføjet manuel tilstand.
Forudsætninger for selvstudiet
Til denne tutorial er alt hvad du behøver Divi-tema, installeret og aktiv. Vi vil bygge eksempelkodestykkerne fra bunden ved hjælp af Divi Builder på en ny side.
For at komme i gang skal du oprette en ny side og distribuere Divi Builder på den offentlige grænseflade. Vælg derefter indstillingen "Byg fra bunden".
Nu er du klar til at gå!
Design af en personlig boks til kodestykker på Divi
Da vores kodestykke findes i et tekstmodul, kan vi bruge divi-builder til at tilføje designelementer til tekstmodulet (og omkring det). Til dette design bruger vi et resume-modul til at fungere som en etiket til uddraget. Derefter styler og placerer vi markøren til venstre for tekstmodulet. Dernæst styler vi tekstmodulet i vores uddrag.
Oprettelse af sektion, række og kolonne
Vi skal først oprette et nyt afsnit med en række i en kolonne.
Opdater derefter linjeparametrene som følger:
Tagrendebredde: 1
Brugerdefineret polstring: 0px øverst, 0px nederst
Tilføj tekstmodulet
Føj derefter et tekstmodul til linjen.
Du kan forlade indhold som standard. Vi tilføjer vores WordPress-kodestykker til det senere. Indtil videre, lad os modellere tekstmodulet ved at opdatere følgende tekstparametre:
Baggrundsfarve: # eff0f1 Tekstfarve: # 000000 Brugerdefineret margen: 60 px venstre Tilpasset polstring: 3% øverst, 3% nederst, 3% tilbage, 3% højre
Øverste kantbredde: 10 px Øverste kantfarve: # 7cda24
Oprettelse af kodestykket
For at oprette uddragetiketten bruger vi et blurb-modul. Dette giver dig mulighed for at tilføje et sløret tekstikon (eller et brugerdefineret billedikon) ud for det viste kodesprog.
Opret et præsentationsmodul, og træk det over tekstmodulet. Opdater derefter følgende præsentationsindstillinger:
Titel: css Indhold: [fjern fiktivt indhold] Brug ikon: JA Ikon: se skærmbillede
Opdater derefter designparametrene som følger:
Baggrundsfarve: # 1b2426 Ikonfarve: # 7cda24 Billede / ikon Placering: venstre Skriftstørrelse: 20 px Teksttitelfarve: #ffffff Tekststørrelse Titel: 16 pixel
Titellinjehøjde: 1.3 em Bredde: 100 pix Brugerdefineret margen: -44 px Nederst, -50 px Venstre brugerdefineret polstring: 10 px Top, 2 pix nederst, 15 px venstre, 15 px højre
Kopiér sektionen for at oprette flere udformninger af uddragskasser
Dette understøtter vores første kodefeltdesign. Nu skal vi bare duplikere sektionen, der indeholder kodeblokdesignet og opdatere etiketten og farverne for at oprette en ny kodeblok til et andet kodningssprog. Dette er naturligvis valgfrit, men hvis du planlægger at tilføje forskellige uddrag til en side, hjælper det med at have et andet farveskema for hver.
For eksempel duplikerer sektionen, og åbn indstillingerne for Blurb-modul.
Opdater titlen til "js" for Javascript.
Højreklik derefter på Billede / ikonfarve, og vælg Find og erstat.
Opdaterede søgemuligheder og udskiftningsmuligheder:
I: dette afsnit Erstat med: [ny farve] Erstat alle: Kontroller erstat alle fundne værdier
Du har nu en ny blok til JS-uddrag.
Her er et eksempel på kodestykker til populære kodetyper til WordPress.
Brug programprøven Prettify Code til at tilføje syntaksfremhævning til manuelle kodestykker
Det er rigtigt, at du med den manuelle metode straks kan indsætte tekst og videregive. den Prettify Code plugin vil straks tilføje fremhævet kode til alle "pre" tags. Skønheden ved dette plugin er, at der absolut ikke kræves nogen tilpasning. Alt du skal gøre er at downloade og aktivere pluginet.
Her er et eksempel på, hvordan koden vil se ud med Active Prettify Code.
Kode Prettify kommer fra google og bruges også til at stilisere alle de vidunderlige uddrag på stackoverflow.com.
At afslutte
Visning af kodestykker på Divi behøver ikke at være svært. Tilføjelse af uddrag manuelt ved hjælp af præ- og Word-kodetags leveret af WordPress gør jobbet for de fleste ikke-html-uddrag, men du skal først køre uddraget gennem en indkoder. html for at være sikker. Derudover kan du yderligere tilpasse uddragets tekststil ved hjælp af indstillingerne for tekstmodulet. Og glem ikke Code Prettify for at tilføje fremhævning til dine manuelle uddrag.
For dem af jer, der regelmæssigt deler uddrag, er det sandsynligvis din bedste chance at bruge SyntaxHighlighter-pluginet. Uanset hvad har du altid mulighed for at tilføje flere kreative designs til dine uddrag ved hjælp af Divi Builder.
Bonne chance.
