Wenn Sie Software oder Programmiertipps anbieten, möchten Sie auf jeden Fall Codefragmente freigeben. Diese Art der Freigabe von Codefragmenten kann ihnen helfen, schnell eine Praxis einzurichten. Das Freigeben von Code mit allen erforderlichen Formatierungen ist jedoch standardmäßig nicht möglich. Was ich unter Formatierung verstehe, ist das Hervorheben der Syntax. Trotzdem ist es ziemlich einfach.
Wenn Sie Divi verwenden, sollten Sie glücklicherweise wissen, dass es eine integrierte Möglichkeit gibt, dies manuell zu tun, um benutzerdefinierte Stile zu diesen Codeausschnitten hinzuzufügen. Darüber hinaus gibt es Plugins und Ressourcen Apps von Drittanbietern, die den Prozess der Erstellung ästhetisch ansprechender und funktionaler Snippets in Divi wirklich vereinfachen können.
In diesem Tutorial zeige ich Ihnen, wie Sie Codefragmente in Divi (manuell) freigeben. Außerdem zeige ich Ihnen, wie Sie mit Divi Builder Snippet-Blöcke entwerfen, die Sie auf die nächste Ebene bringen.
Übersicht
Hier ist eine Übersicht über die in diesem Tutorial möglichen Snippet-Designs.
Die Code-Snippet-Boxen mit Code-Snippets haben den manuellen Modus hinzugefügt.
Voraussetzungen für das Tutorial
Für dieses Tutorial benötigen Sie lediglich die Divi-Thema, installiert und aktiv. Wir werden die Beispielcode-Snippets mit Divi Builder auf einer neuen Seite von Grund auf neu erstellen.
Erstellen Sie zunächst eine neue Seite und stellen Sie Divi Builder auf der öffentlichen Oberfläche bereit. Wählen Sie dann die Option "Von Grund auf neu erstellen".
Jetzt können Sie loslegen!
Entwurf einer personalisierten Box für Code-Schnipsel auf Divi
Da sich unser Code-Snippet in einem Textmodul befindet, können wir den Divi Builder verwenden, um dem Textmodul (und seiner Umgebung) Designelemente hinzuzufügen. Für dieses Design verwenden wir ein Zusammenfassungsmodul, das als Beschriftung für das Snippet dient. Als nächstes formatieren und positionieren wir den Cursor links vom Textmodul. Als nächstes werden wir das Textmodul unseres Snippets formatieren.
Erstellen des Abschnitts, der Zeile und der Spalte
Wir müssen zuerst einen neuen Abschnitt mit einer Zeile einer Spalte erstellen.
Aktualisieren Sie dann die Leitungsparameter wie folgt:
Dachrinnenbreite: 1
Benutzerdefinierte Polsterung: 0px oben und 0px unten
Fügen Sie den Textbaustein hinzu
Fügen Sie dann der Zeile einen Textbaustein hinzu.
Sie können das verlassen Inhalt standardmäßig. Wir werden später unsere WordPress-Codeschnipsel hinzufügen. Lassen Sie uns zunächst das Textmodul modellieren, indem wir die folgenden Textparameter aktualisieren:
Hintergrundfarbe: # eff0f1 Textfarbe: # 000000 Benutzerdefinierter Rand: 60px links Benutzerdefinierte Polsterung: 3% oben, 3% unten, 3% links, 3% rechts
Breite des oberen Randes: 10px Farbe des oberen Randes: # 7cda24
Erstellen des Snippet-Labels
Zum Erstellen des Snippet-Labels verwenden wir ein Klappentextmodul. Auf diese Weise können Sie neben der angezeigten Codesprache ein Klappentext-Symbol (oder ein benutzerdefiniertes Bildsymbol) hinzufügen.
Erstellen Sie ein Präsentationsmodul und ziehen Sie es über das Textmodul. Aktualisieren Sie anschließend die folgenden Präsentationseinstellungen:
Titel: css Inhalt: [fiktiven Inhalt entfernen] Symbol verwenden: JA Symbol: siehe Screenshot
Aktualisieren Sie dann die Entwurfsparameter wie folgt:
Hintergrundfarbe: # 1b2426 Symbolfarbe: # 7cda24 Bild- / Symbolposition: links Schriftgröße: 20px Texttitel Farbe: #ffffff Textgröße Titel: 16px
Titelzeilenhöhe: 1.3em Breite: 100px Benutzerdefinierter Rand: -44px unten, -50px links Benutzerdefinierte Polsterung: 10px oben, 2px unten, 15px links, 15px rechts
Duplizieren Sie den Abschnitt, um weitere Snippet-Box-Designs zu erstellen
Dies unterstützt unser erstes Code-Box-Design. Jetzt müssen wir nur noch den Abschnitt mit dem Codeblockdesign duplizieren und die Beschriftung und die Farben aktualisieren, um einen neuen Codeblock für eine andere Codierungssprache zu erstellen. Dies ist natürlich optional, aber wenn Sie einer Seite verschiedene Snippets hinzufügen möchten, ist es hilfreich, für jede Seite ein anderes Farbschema zu haben.
Duplizieren Sie beispielsweise den Abschnitt und öffnen Sie die Einstellungen des Blurb-Moduls.
Aktualisieren Sie den Titel auf "js" für Javascript.
Klicken Sie dann mit der rechten Maustaste auf Bild- / Symbolfarbe und wählen Sie Suchen und Ersetzen.
Aktualisierte Such- und Ersetzungsoptionen:
In: diesem Abschnitt Ersetzen durch: [neue Farbe] Alle ersetzen: Aktivieren Sie alle gefundenen Werte ersetzen
Sie haben jetzt einen neuen Snippets-Block für JS-Snippets.
Hier ist ein Beispiel für Snippet-Boxen für beliebte Codetypen für WordPress.
Verwenden des Prettify Code-Plugins, um manuelle Codeausschnitte mit Syntaxhervorhebungen zu versehen
Nun, es ist wahr, dass Sie mit der manuellen Methode sofort Text einfügen und übergeben können. die Prettify Code Plugin fügt sofort hervorgehobenen Code zu allen "Pre" -Tags hinzu. Das Schöne an diesem Plugin ist, dass absolut keine Anpassung erforderlich ist. Sie müssen lediglich das Plugin herunterladen und aktivieren.
Hier ist ein Beispiel, wie der Code mit Active Prettify Code aussehen wird.
Code Prettify kommt Google und wird auch verwendet, um all diese wunderbaren Schnipsel zu stilisieren stackoverflow.com.
Um zu beenden
Das Anzeigen von Codefragmenten auf Divi muss nicht schwierig sein. Das manuelle Hinzufügen der Snippets mithilfe der von WordPress bereitgestellten Pre- und Word-Code-Tags erledigt die Aufgabe für die meisten Nicht-HTML-Snippets. Sie müssen das Snippet jedoch zuerst über einen Encoder ausführen. HTML, um sicher zu sein. Darüber hinaus können Sie den Snippet-Textstil mithilfe der Einstellungen des Textmoduls weiter anpassen. Und vergessen Sie nicht, Code Prettify zu verwenden, um Ihren manuellen Snippets eine Hervorhebung hinzuzufügen.
Für diejenigen unter Ihnen, die regelmäßig Snippets teilen, ist die Verwendung des SyntaxHighlighter-Plugins wahrscheinlich die beste Wahl. In beiden Fällen haben Sie immer die Möglichkeit, Ihren Snippets mit Divi Builder kreativere Designs hinzuzufügen.
Bonne Chance.
