Om du erbjuder någon programvara eller programmeringstips vill du definitivt dela kodavsnitt. Detta sätt att dela kodavsnitt kan hjälpa dem att snabbt sätta upp en övning. Att dela kod med all nödvändig formatering är dock inte möjligt som standard. Vad jag menar med formatering är syntaxmarkering. Ändå är det något ganska enkelt att göra.

Lyckligtvis, om du använder divi, bör du veta att det finns ett inbyggt sätt att göra detta manuellt, för att lägga till anpassade stilar till dessa kodavsnitt. Dessutom finns det plugins och medel appar från tredje part som verkligen kan förenkla processen att skapa vackra och funktionella utdrag i Divi.

I den här handledningen visar jag dig hur du delar kodavsnitt i Divi (manuellt). Och jag kommer också att visa dig hur du utformar utklippsblock med Divi Builder, vilket tar dig till nästa nivå.

undersökningen

Här är en översikt över möjliga utdrag i denna handledning.

Kodavsnittsrutorna med kodutdrag har lagts till manuellt läge.

Kodförhandsvisning möjlig med diviFörutsättningar för handledning

För den här handledningen är allt du behöver Divi-tema, installerad och aktiv. Vi kommer att bygga exempelkodavsnitten från början med Divi Builder på en ny sida.

För att komma igång, skapa en ny sida och distribuera Divi Builder på det offentliga gränssnittet. Välj sedan alternativet "Bygg från grunden".

Nu är du redo att gå!

Design av en personlig ruta för kodavsnitt på Divi

Eftersom vårt kodavsnitt finns i en textmodul kan vi använda divibyggaren för att lägga till designelement i textmodulen (och runt den). För denna design använder vi en sammanfattningsmodul för att fungera som en etikett för kodavsnittet. Därefter utformar och placerar vi markören till vänster om textmodulen. Därefter utformar vi textmodulen för vårt utdrag.

Skapa avsnitt, rad och kolumn

Vi måste först skapa ett nytt avsnitt med en rad i en kolumn.

Kolumn har en raddelning

Uppdatera sedan radparametrarna enligt följande:

Rännbredd: 1
Anpassad stoppning: 0px längst upp, 0px längst ner

Ändra delningslinjeparameternLägg till textmodulen

Lägg sedan till en textmodul till raden.

Divi-textmodul 1Du kan lämna innehåll som standard. Vi lägger till våra WordPress-kodavsnitt till den senare. Låt oss för närvarande modellera textmodulen genom att uppdatera följande textparametrar:

Bakgrundsfärg: # eff0f1 Textfärg: # 000000 Anpassad marginal: 60 px till vänster Anpassad vaddering: 3% topp, 3% botten, 3% vänster, 3% höger

Parameterinställningar för Divi-textmodul

Övre kantbredd: 10 pixlar Färg på överkant: # 7cda24

Inställningar för kanttextSkapa kodavsnittetiketten

För att skapa kodetiketten använder vi en blurb-modul. Detta låter dig lägga till en ikon för oskärpa (eller anpassad bildikon) bredvid det visade kodspråket.

Skapa en presentationsmodul och dra den över textmodulen. Uppdatera sedan följande presentationsinställningar:

Titel: css Innehåll: [ta bort fiktivt innehåll] Använd ikon: JA Ikon: se skärmdump

Modifierad divi-textmodulUppdatera sedan designparametrarna enligt följande:

Bakgrundsfärg: # 1b2426 Ikonfärg: # 7cda24 Bild / ikon Plats: vänster Teckenstorlek: 20 pixlar Textens titelfärg: #ffffff Textstorlek Titel: 16 pixlar

Blurb divi-modulinställningar

Titelrad Höjd: 1.3em Bredd: 100px Anpassad marginal: -44px Nedre, -50px Vänster Anpassad vaddering: 10px Upp, 2px Nedre, 15px Vänster, 15px Höger

Inställning för CSS-blurb-modul

Duplicera avsnittet för att skapa fler rutautformningar

Detta stöder vår första kodboxdesign. Nu måste vi bara duplicera avsnittet som innehåller kodblockdesignen och uppdatera etiketten och färgerna för att skapa ett nytt kodblock för ett annat kodningsspråk. Detta är naturligtvis valfritt, men om du planerar att lägga till olika utdrag på en sida hjälper det att ha olika färgschema för varje.

Exempelvis duplicera avsnittet och öppna inställningarna för Blurb-modulen.

Uppdatera titeln till "js" för Javascript.

Högerklicka sedan på Bild / Ikonfärg och välj Sök och ersätt.

Kopiera en divisektionUppdaterade sök- och ersättningsalternativ:

I: detta avsnitt Ersätt med: [ny färg] Ersätt alla: kontrollera ersätt alla hittade värden

Du har nu ett nytt kodavsnitt för JS-utdrag.

Här är ett exempel på kodrutor för populära kodtyper för WordPress.

Lägg till divi-kodavsnittAnvända Prettify Code-plugin för att lägga till syntaxmarkering till manuella kodfragment

Det är sant att med den manuella metoden kan du omedelbart klistra in text och skicka. den Prettify Code-plugin kommer omedelbart att lägga till markerad kod till alla "pre" -taggar. Skönheten i detta plugin är att det absolut inte behövs någon anpassning. Allt du behöver göra är att ladda ner och aktivera plugin.

Här är ett exempel på hur koden kommer att se ut med Active Prettify Code.

Prettfy-kod i aktionKod Prettify kommer Google och används också för att stilisera alla dessa underbara utdrag på stackoverflow.com.

För att avsluta

Att visa kodavsnitt på Divi behöver inte vara svårt. Att lägga till kodavsnitt manuellt med hjälp av pre- och Word-kodtaggarna som tillhandahålls av WordPress kommer att göra jobbet för de flesta icke-html-kodavsnitt, men du måste köra kodavsnittet genom en kodare först. html för att vara säker. Dessutom kan du anpassa kodformatet ytterligare med hjälp av inställningarna för textmodulen. Och glöm inte Code Prettify för att lägga till höjdpunkt i dina manuella utdrag.

För de av er som regelbundet delar utdrag är det förmodligen det bästa alternativet att använda plugin-programmet SyntaxHighlighter. Hur som helst har du alltid möjlighet att lägga till mer kreativa mönster i dina utdrag med Divi Builder.

Bonne Chance.