> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/content/erlebniswelten/bloecke/elemente/code.md).

# Code

Das Code Element ermöglicht es Dir, individuellen HTML/TWIG, CSS oder Javascript Code in Deine Erlebniswelt zu implementieren.

> Feature der Pro Version

Seit Shopware 6.5 wird Code in den HTML-Elementen bereinigt - ein sogenannter "Sanitizer" filtert die meisten Code-Inhalte. Mit dem Code Element kann individuelle Code in der Erlebniswelt platziert werden, ohne dass dieser bereinigt wird. 

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FdjXgJDHlvs7aUq6LjMp2%2Fdocs-de-shopping-experiences-elements-code.png?alt=media&amp;token=05a7239b-a9df-4af5-a464-17403d665587" alt=""><figcaption></figcaption></figure>

Das **Code Element (1)** befindet sich in der Liste der auswählbaren Elemente des Themes. Bereits nach dem Platzieren zeigt es Demo-Inhalte zur Beschreibung der Verwendung an. \
In der Vorschau des Elementes im Editor werden Dir Teile Deines geschriebenen **Codes (2, 3, 4)** angezeigt, sodass Du einen Überblick bei der Verwendung mehrerer Code-Elemente behältsts.

## Einstellungen

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FzQzDgofIZcDnEcduyBeu%2Fdocs-de-shopping-experiences-elements-code-config.png?alt=media&amp;token=62101085-96a9-4762-8d7a-68d73dccf745" alt=""><figcaption></figcaption></figure>

In der Konfiguration des Elementes findest Du für jeden Code das passende Feld, aufgeteilt in einen Tab für **HTML und Twig (1)**, Styling im **CSS Tab (2)** und Javascript im **JS Tab (3)**. Dadurch behältst Du den vollen Überblick.

{% hint style="info" %}
Entferne den Beispiel-Code aus den Tabs.
{% endhint %}