Code block

Code blocks give you the power to showcase formatted code snippets in a wide range of programming languages.

Important: Code blocks do not run any code. If you’d like to add custom code to your site, check out our lesson on the embed element.

In this lesson, you’ll learn:

1. How to add and edit a code block
2. How to style a code block

How to add and edit a code block

To add a code block element to your site:

1. Copy the code you’d like to display in the code block
2. Open Add panel > Advanced‍
3. Drag a code block to the canvas, a rich text element, or the rich text field in the CMS
4. Paste your code into the code editor
5. Click Save & close

Note: The code block element supports most programming languages, but is not inclusive of every language. For example, the code block does not support C++ or GraphQL. A complete list of supported languages is available in Element settings panel > Code block settings > Language.

To edit the code displayed within the code block, select the code block on the canvas, click the settings “gear” icon, and click Open code editor. You can also launch the code editor from Element settings panel > Code block settings.

Need to know: Code in a code block element cannot exceed 10,000 characters. If the code you want to display is longer, you can minify your code using a third-party tool or split it into multiple code block elements.

Code block settings

Once you add a code block to the canvas, you’ll find the following settings in Element settings panel > Code block settings:

• Language — determines the highlighting syntax applied to the code in the element. The code block automatically recognizes the programming language of the code you paste in, but you can adjust the language as needed
• Theme — supports light and dark theme
• Show line numbers — determines whether line numbers appear next to each line of code

How to style a code block

By default, the code block takes up the full width of its parent element. You can style the code block in the Style panel just as you would other elements (e.g., set its size and spacing properties, etc.), but you can’t change its typography or background properties.