Hvis du tilbyr programvare eller programmeringstips, vil du definitivt dele kodebiter. Denne måten å dele kodebiter på kan hjelpe dem med å sette opp en praksis raskt. Deling av kode med all nødvendig formatering er imidlertid ikke mulig som standard. Det jeg mener med formatering er syntaksutheving. Likevel er det noe ganske enkelt å gjøre.
Heldigvis, hvis du bruker divi, bør du vite at det er en innebygd måte å gjøre dette manuelt, for å legge til egendefinerte stiler til disse kodebitene. I tillegg er det plugins og ressources tredjepartsapper som virkelig kan forenkle prosessen med å lage estetisk tiltalende og funksjonelle utdrag i Divi.
I denne opplæringen viser jeg deg hvordan du kan dele kodebiter i Divi (manuelt). Og jeg vil også vise deg hvordan du designer kodeblokker med Divi Builder, som tar deg til neste nivå.
undersøkelsen
Her er en oversikt over utdragene som er mulige i denne opplæringen.
Kodebitbokser med kodebiter lagt til manuell modus.
Forutsetninger for opplæringen
For denne opplæringen er alt du trenger Divi-tema, installert og aktiv. Vi vil bygge eksempelkodebitene fra bunnen av ved å bruke Divi Builder på en ny side.
For å komme i gang, opprett en ny side og distribuer Divi Builder på det offentlige grensesnittet. Velg deretter alternativet "Bygg fra bunnen av".
Nå er du klar til å dra!
Design av en personlig boks for kodebiter på Divi
Siden kodebiten vår ligger i en tekstmodul, kan vi bruke divibyggeren til å legge til designelementer i tekstmodulen (og rundt den). For dette designet bruker vi en sammendragsmodul for å fungere som en etikett for kodebiten. Deretter styler vi og plasserer markøren til venstre for tekstmodulen. Deretter styler vi tekstmodulen til utdraget vårt.
Opprette seksjonen, raden og kolonnen
Vi må først lage en ny seksjon med en rad med en kolonne.
Oppdater deretter linjeparametrene som følger:
Rennesteinsbredde: 1
Tilpasset polstring: 0px øverst, 0px nederst
Legg til tekstmodulen
Legg deretter til en tekstmodul på linjen.
Du kan forlate innhold som standard. Vi legger til WordPress-kodebitene våre senere. For nå, la oss modellere tekstmodulen ved å oppdatere følgende tekstparametere:
Bakgrunnsfarge: # eff0f1 Tekstfarge: # 000000 Egendefinert margin: 60 px venstre Tilpasset polstring: 3% øverst, 3% nederst, 3% igjen, 3% høyre
Øvre kantbredde: 10 px Toppfarge på kant: # 7cda24
Opprette kodebiten
For å lage kodebetegnelsen skal vi bruke en blurb-modul. Dette lar deg legge til et uklart tekstikon (eller et egendefinert bildeikon) ved siden av det viste kodespråket.
Lag en presentasjonsmodul og dra den over tekstmodulen. Oppdater deretter følgende presentasjonsinnstillinger:
Tittel: css Innhold: [fjern fiktivt innhold] Bruk ikon: JA Ikon: se skjermbilde
Oppdater deretter designparametrene som følger:
Bakgrunnsfarge: # 1b2426 Ikonfarge: # 7cda24 Bilde / ikon Plassering: venstre Skriftstørrelse: 20px Teksttittelfarge: #ffffff Tekststørrelse Tittel: 16px
Tittellinjehøyde: 1.3 em Bredde: 100 piks Egendefinert margin: -44 piks Bunn, -50 piks Venstre Tilpasset polstring: 10 piks Topp, 2 piks Bunn, 15 piks Venstre, 15 px Høyre
Dupliser seksjonen for å lage flere design av kodebiter
Dette støtter vår første kodeboksdesign. Nå må vi bare duplisere delen som inneholder kodeblokkdesignen og oppdatere etiketten og fargene for å lage en ny kodeblokk for et annet kodingspråk. Dette er selvfølgelig valgfritt, men hvis du planlegger å legge til forskjellige utdrag på en side, hjelper det å ha et annet fargevalg for hver.
Du kan for eksempel duplisere seksjonen og åpne innstillingene for Blurb-modulen.
Oppdater tittelen til "js" for Javascript.
Høyreklikk deretter på Image / Icon Color og velg Finn og erstatt.
Oppdaterte søk og erstatningsalternativer:
I: denne seksjonen Erstatt med: [ny farge] Erstatt alle: sjekk erstatt alle funnet verdier
Du har nå en ny kodeblokk for JS-kodebiter.
Her er et eksempel på kodebokser for populære kodetyper for WordPress.
Bruke Prettify Code-plugin-modulen for å legge til syntaksutheving til manuelle kodestykker
Vel, det er sant at med den manuelle metoden, kan du umiddelbart lime inn tekst og passere. den Prettify Code plugin vil øyeblikkelig legge til uthevet kode i alle "pre" -koder. Det fine med dette pluginet er at det absolutt ikke er behov for tilpasning. Alt du trenger å gjøre er å laste ned og aktivere pluginet.
Her er et eksempel på hvordan koden vil se ut med Active Prettify Code.
Kode Prettify kommer Google og brukes også til å stilisere alle de fantastiske utdragene på stackoverflow.com.
For å fullføre
Å vise kodebiter på Divi trenger ikke være vanskelig. Hvis du legger til kodebitene manuelt ved hjelp av pre- og Word-kodekoder som tilbys av WordPress, vil du gjøre jobben for de fleste ikke-html-kodestykker, men du må kjøre kodebiten gjennom en koder først. html for å være sikker. I tillegg kan du ytterligere tilpasse tekststilen ved å bruke innstillingene for tekstmodulen. Og ikke glem Code Prettify for å legge til høydepunkt i de manuelle utdragene dine.
For de av dere som regelmessig deler utdrag, er sannsynligvis det beste alternativet å bruke SyntaxHighlighter-plugin. Uansett vil du alltid ha muligheten til å legge til mer kreative design i kodebitene dine ved hjelp av Divi Builder.
Bonne sjanse.
