Code-Snippets mit Formatierung in Webflow Rich-Text einfügen - CMS

08. Februar 2023
Code-Snippets mit Formatierung in Webflow Rich-Text einfügen - CMS
Code-Snippets mit Formatierung in Webflow Rich-Text einfügen - CMS

Ich erstelle regelmäßig Tutorials für die verschiedensten Webflow Themen, häufig muss die Webflow Funktionalität mit Custom Code erweitert werden. Platziert man das Code-Snippet direkt im Rich Text musste ich manuell alle Umbrüche einfügen, was relativ fehleranfällig ist. Diese Snippets gehen schnell unter, da es ihnen an den typischen Javascript- und CSS-Formatierungen mangelt.

JQuery Code Snippet
JQuery Code Snippet

Um unseren Code besser zu formatieren, verwenden wir Prismjs. Das Tool sagt über sich selbst: “Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.”

Prismjs über CDN laden

Erstelle dazu ein neues Embed-Field in Deinem Rich Text im CMS. Falls Du öfters auf Prismjs zurückgreifen möchtest, kannst Du den Code auch im <head>-Bereich Deiner Template Seite einfügen.

Embed Field Webflow Rich Text CMS

Wir laden die Bibliothek über folgende Codes ein:


<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">


Individuelle Skripts einfügen

Füge ein weiteres Embed-Field hinzu und starte mit einem <pre>-Tag. In diesem <pre>-Tag sollte ein weiteres <code>-Tag eingefügt werden, welches die Klasse “language-html” hat. Falls Dein Code kein HTML-Code ist, kannst Du ‘html’ durch das richtige Kürzel austauschen. Typische sind sonst ‘js’ oder ‘html’, weitere findest Du hier https://prismjs.com/#supported-languages.

Vergesse nicht, die Tags zu schließen.

Füge in diesen Tags dann Deinen eigenen Code ein.

Achtung: Da wir nicht wollen, dass Webflow unsere Beispiel-Codes auch wirklich liest und ausführt, müssen wir alle < und & Zeichen innerhalb von <code>-Elementen mit ‘&lt;' und  '&amp;' ersetzen.

Für > verwenden wir '&gt;'

Keine Angst - für längeren Code kannst Du einen Converter verwenden, wie https://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder oder direkt ChatGPT (bevorzugte Variante, da Umbrüche direkt übernommen werden)

Beispielcode:


<pre>
<code class="language-html">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/timothydesign/scripts@v1.0.2/variables-color-scroll.js"></script>

</code>
</pre>


Fazit

Obwohl das Einfügen von Code-Snippets mit Formatierung in Webflow Rich-Texte mit etwas mehr Arbeitsaufwand verbunden ist, profitiert der Nutzer ganz klar von der verständlicheren Syntax der Codes. Deine Tutorials direkt machen einen professionelleren Eindruck.

Wende Dich an einen Webflow Experten, falls Du Probleme mit der Integration hast.

Bereit für ein erfolgreiches Webflow Projekt?

Noch kein Webflow Experte?

Erhalte exklusiven Zugang zu Fachwissen, Insider-Content und Ressourcen über Webflow in unserem Newsletter.

Danke! Du bist jetzt für den Newsletter angemeldet.
Ups! Etwas ist schiefgelaufen!
X Icon