---
title: Code Block – ein toujou-Element für Syntax highlighting
url: "https://www.toujou.de/service/elementbibliothek/widgets/code-block/"
description: Code Block für Syntax-Hervorhebung auf der Website. Anleitung, Beispielansicht sowie Tipps, Tricks und Hinweise zum toujou-Element.
date: 2022-11-09
modified: 2022-11-10
---

# Code Block – ein toujou-Element für Syntax highlighting

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/)
4. [Widgets](https://www.toujou.de/service/elementbibliothek/widgets/)
5. [Code Block](https://www.toujou.de/service/elementbibliothek/widgets/code-block/)

   Code block
==========

Das Code block ist vor allem für Website-Betreiber:innen nützlich, die technische Dokumentationen präsentieren möchten und dafür Syntax highlightning (dt.: Syntax-Hervorhebung) betreiben möchten. Denn das Element ermöglicht allen Anwender:innen in toujou einen manuell hinterlegten Code-Schnipsel so anzuzeigen, dass er im Entwickler-Design (z.B. schwarzer Hintergrund) angelehnt ist. So wird eine technische Dokumentation authentischer.

[Beispielansicht](#c1014280) [Anleitung](#c1014277) [Hinweise, Tipps & Tricks](#c1014274)

---

 Beispielansicht
---------------

```

        ```
<span class="hljs-keyword">const</span> test = <span class="hljs-string">"This is a variable"</span>;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span> (<span class="hljs-params">a,b</span>) </span>{
	<span class="hljs-keyword">return</span> a + b;
	}
```
```

 javascript   Anleitung
-----------

     [ ![](https://www.toujou.de/_assets/processed/Uf-vYZOwWtIak97FiCciLCIlkNXJCmptr_b_CrzEYbw/q:85/c:1280:719.99999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0NvZGUtYmxvY2stRWxlbWVudC1hdXN3YWVobGVuXzQwMThlODg5Mjg:t/cb:98d1ecbc2ca5f15221c305dc5e51074f2063d78f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTNfY29kZV9ibG9jay9Db2RlLWJsb2NrLUVsZW1lbnQtYXVzd2FlaGxlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/13_code_block/Code-block-Element-auswaehlen.png) ### Code block erstellen

- Nachdem Sie im Inhaltsbereich Ihrer Seite auf **+ Inhalt** geklickt haben, öffnet sich das Fenster zur Auswahl des Elements. Wählen Sie den Reiter **Widgets** und anschließend **Code block**.

    [ ![](https://www.toujou.de/_assets/processed/AQIwFZLSghURNUX7DRz2fKYvwxRCkO3hiNySqHEgpzo/q:85/c:1054:592.87499999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2NvZGVibG9jay1jb2RlLXdhZWhsZW5fMWY2Yjk2MWI0OA:t/cb:22047a2009ea3d7bf90fd215cde9d0600a879813/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTNfY29kZV9ibG9jay9jb2RlYmxvY2stY29kZS13YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/13_code_block/codeblock-code-waehlen.png) ### Code-Sprache wählen (optional)

- Wählen Sie die gewünschte Code-Sprache aus den vielfältigen Optionen aus. Klicken Sie hierfür im Reiter *Content* auf das **Dropdown-Menü** unter *Code-Sprache.* Beispielhaft stehen CSS, HTML, JSON und andere zur Verfügung.
- Ist eine Sprache ausgewählt, wird diese auf der Webseite im Code Block am oberen rechten Rand angezeigt.

    [ ![](https://www.toujou.de/_assets/processed/RgHqzmqCFHqO9d05gPuB0TZG9xxJXz7ZCL2incXJQmg/q:85/c:1054:592.87499999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0NvZGUtYmxvY2stY29kZS1laW5nZWJlbl9iMTlhYjk0ODM1:t/cb:2e3f0d0e678c9dc1f0b1e80594992a2579e65b45/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTNfY29kZV9ibG9jay9Db2RlLWJsb2NrLWNvZGUtZWluZ2ViZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/13_code_block/Code-block-code-eingeben.png) ### Code eingeben

- Im Reiter *Content* tragen Sie im Feld *Text* den gewünschten Code ein und speichern Sie die Einstellungen.
- Eine Überprüfung des eingegebenen Codes findet nicht statt. Achten Sie daher auf die korrekte Schreibweise für Ihre Dokumentation.

  ---

  Hinweise, Tipps & Tricks
------------------------------

 **Besonderheiten**: Das Element Code Block wird standardmäßig im schwarzen Hintergrund ausgegeben. Für eine andere Hintergrundfarbe kontaktieren Sie bitte unser [Service-Team](mailto:support@toujou.de). Beachten Sie zudem, dass im Textfeld keine automatische Prüfung des eingegebenen Codes erfolgt und dieser keine Auswirkungen auf die Seite hat. Das Element dient lediglich zur Veranschaulichung des Code-Schnipsels im Sinne der Syntax-Hervorhebung.

---

 Verknüpfte Tutorials
--------------------

Tutorials, die mit diesem Element in Verbindung stehen.

[Seiten anlegen](https://www.toujou.de/tutorials/seiten-anlegen/) [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/)

---