Als je software of programmeertips aanbiedt, wil je zeker wat codefragmenten delen. Deze manier om codefragmenten te delen, kan hen helpen om snel een praktijk op te zetten. Het delen van code met alle benodigde opmaak is echter niet standaard mogelijk. Wat ik bedoel met formatteren is syntaxisaccentuering. Toch is het iets heel gemakkelijks om te doen.
Als u divi gebruikt, moet u gelukkig weten dat er een ingebouwde manier is om dit handmatig te doen, door aangepaste stijlen aan deze codefragmenten toe te voegen. Daarnaast zijn er plug-ins en ressources apps van derden die het proces van het maken van mooie en functionele fragmenten in Divi aanzienlijk kunnen vereenvoudigen.
In deze tutorial laat ik je zien hoe je codefragmenten kunt delen in Divi (handmatig). En ik zal je ook laten zien hoe je fragmentblokken ontwerpt met Divi Builder, die je naar het volgende niveau zullen brengen.
overzicht
Hier is een overzicht van de mogelijke fragmentontwerpen in deze tutorial.
De Code Snippet Boxes met code snippets toegevoegd handmatige modus.
Vereisten voor de zelfstudie
Voor deze tutorial heb je alleen de Divi-thema, geïnstalleerd en actief. We zullen de voorbeeldcodefragmenten helemaal opnieuw bouwen met behulp van de Divi Builder op een nieuwe pagina.
Maak om te beginnen een nieuwe pagina en implementeer Divi Builder op de openbare interface. Kies vervolgens de optie "Vanaf nul bouwen".
Nu ben je klaar om te gaan!
Ontwerp van een gepersonaliseerde box voor codefragmenten op Divi
Omdat ons codefragment zich in een tekstmodule bevindt, kunnen we de divi-builder gebruiken om ontwerpelementen toe te voegen aan de tekstmodule (en eromheen). Voor dit ontwerp gebruiken we een overzichtsmodule die als label voor het fragment dient. Vervolgens zullen we de cursor opmaken en links van de tekstmodule plaatsen. Vervolgens zullen we de tekstmodule van ons fragment opmaken.
De sectie, rij en kolom maken
We moeten eerst een nieuwe sectie met een rij van een kolom maken.
Werk vervolgens de lijnparameters als volgt bij:
Dakgootbreedte: 1
Aangepaste opvulling: 0px bovenaan, 0px onderaan
Voeg de tekstmodule toe
Voeg vervolgens een tekstmodule toe aan de regel.
Je kunt de inhoud standaard. We zullen onze WordPress-codefragmenten er later aan toevoegen. Laten we voorlopig de tekstmodule modelleren door de volgende tekstparameters bij te werken:
Achtergrondkleur: # eff0f1 Tekstkleur: # 000000 Aangepaste marge: 60 px links Aangepaste opvulling: 3% boven, 3% onder, 3% links, 3% rechts
Breedte bovenrand: 10px Kleur bovenrand: # 7cda24
Het fragmentlabel maken
Om het fragmentlabel te maken, gaan we een blurb-module gebruiken. Hiermee kunt u een blurb-tekstpictogram (of een aangepast afbeeldingspictogram) toevoegen naast de weergegeven codetaal.
Maak een presentatiemodule en sleep deze boven de tekstmodule. Werk vervolgens de volgende presentatie-instellingen bij:
Titel: css Inhoud: [verwijder fictieve inhoud] Gebruik icoon: JA Icoon: zie screenshot
Werk vervolgens de ontwerpparameters als volgt bij:
Achtergrondkleur: # 1b2426 Pictogramkleur: # 7cda24 Locatie afbeelding / pictogram: links Lettertypegrootte: 20px Kleur teksttitel: #ffffff Tekstgrootte Titel: 16px
Titelregel Hoogte: 1.3em Breedte: 100px Aangepaste marge: -44px onder, -50px links Aangepaste opvulling: 10px boven, 2px onder, 15px links, 15px rechts
Gedupliceerde sectie om meer snippet box-ontwerpen te maken
Dit ondersteunt ons eerste ontwerp van de codebox. Nu hoeven we alleen maar de sectie met het codeblokontwerp te dupliceren en het label en de kleuren bij te werken om een ​​nieuw codeblok voor een andere codeertaal te maken. Dit is natuurlijk optioneel, maar als u van plan bent verschillende fragmenten aan een pagina toe te voegen, helpt het om voor elk een ander kleurenschema te hebben.
Dupliceer bijvoorbeeld de sectie en open de instellingen van de Blurb-module.
Update de titel naar "js" voor Javascript.
Klik vervolgens met de rechtermuisknop op Afbeelding / pictogramkleur en selecteer Zoeken en vervangen.
Bijgewerkte zoek- en vervangingsopties:
In: deze sectie Vervangen door: [nieuwe kleur] Alles vervangen: vink vervang alle gevonden waarden aan
Je hebt nu een nieuw fragmentblok voor JS-fragmenten.
Hier is een voorbeeld van snippet boxes voor populaire codetypes voor WordPress.
De plug-in Prettify Code gebruiken om syntaxisaccentuering toe te voegen aan handmatige codefragmenten
Welnu, het is waar dat je met de handmatige methode onmiddellijk tekst kunt plakken en doorgeven. de Prettify Code plugin voegt onmiddellijk gemarkeerde code toe aan alle "pre" -tags. Het mooie van deze plug-in is dat er absoluut geen maatwerk nodig is. Het enige dat u hoeft te doen, is de plug-in downloaden en activeren.
Hier is een voorbeeld van hoe de code eruit zal zien met Active Prettify Code.
Code Prettify komt door Google en wordt ook gebruikt om al die prachtige fragmenten op te stylen stackoverflow.com.
Om te eindigen
Het bekijken van codefragmenten op Divi hoeft niet moeilijk te zijn. Het handmatig toevoegen van de fragmenten met behulp van de pre- en Word-codetags die door WordPress worden geleverd, is voldoende voor de meeste niet-html-fragmenten, maar je moet het fragment eerst door een encoder laten lopen. html om zeker te zijn. Bovendien kunt u de tekststijl van het fragment verder aanpassen met behulp van de tekstmodule-instellingen. En vergeet Code Prettify niet om accentuering toe te voegen aan uw handmatige fragmenten.
Voor degenen onder u die regelmatig fragmenten delen, is het gebruik van de SyntaxHighlighter-plug-in waarschijnlijk de beste keuze. Hoe dan ook, je hebt altijd de mogelijkheid om creatievere ontwerpen aan je fragmenten toe te voegen met Divi Builder.
Bonne chance.
