+49 911 23980-870

Code block

The code block is especially useful for website owners who want to present technical documentation and want therefore to use syntax highlighting. The element allows users in toujou to display a manually stored code snippet in such a way that it will remind developers at their familiar environment. this leads your technical documentation to more authenticity. 

Sample view Manual Pieces of advice

Sample view

Code block

        const test = "This is a variable";

function add (a,b) {
	return a + b;


Create a code block

  • After clicking + Content in the content area of your page, the element selection pop-up window will appear. Select the Widgets tab and then choose Code block.

Select your code language (optional)

  • Select the desired code language from the diverse options. Click the drop-down menu in the Code Language within the Content tab. The options include CSS, HTML, JSON, and many others. 

Enter your code

  • Enter the respective code in theText field within the Content tab. Save your settings.
  • Be aware: The code will not be checked by toujou. Therefore, make sure you spell it correctly for your documentation.

Pieces of advice

Worth noting: The Code Block element is by default displayed with a black background in toujou. For a different background color, please contact our service team. Please note that the element is just used to illustrate the code snippet in terms of syntax highlighting. There is no automatic check of the entered code in the text field and, also, it has no effect on the page.

Linked tutorials

Tutorials related to this element.

Edit pages element library