Code block

Updated

Display formatted code snippets on your site.

Important

Code blocks display formatted code snippets — they do not run any code. Learn how to embed functional custom code.

Code blocks give you the power to showcase formatted code snippets in a wide range of programming languages. You can use the Style panel to style to all <pre> tags, letting you format displayed code snippets with custom fonts, colors, spacing, and background styling.

How to add 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.

How to edit a code block

To edit the code displayed within the code block:

  1. Select the code block on the canvas
  2. Click the Settings icon above the code block
  3. Click Open code editor
  4. Make your changes
  5. Click Save & close

You can also launch the code editor from the 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.

How to style a code block

Previously, you had to write custom CSS to style <pre> tags that are used inside code blocks. Now, you can manage formatting directly from the Style panel. Note that changing the <pre> tag styling will impact all <pre> tags (e.g., an element other than a code block tagged with <pre>).

  1. Select the code block on the canvas
  2. Go to Style panel > Style selector
  3. Choose All pre tags
  4. Make style changes in the Style panel

Examples of supported style changes:

  • Size
  • Font size
  • Font color
  • Background color
  • Padding and margin
  • Line height

Unsupported style changes include:

  • text-wrap
  • white-space

Code block settings overview

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 insert, 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