Display code snippets

The Code block displays code on your site with syntax highlighting, making it ideal for code snippets in tutorials and technical documentation. In this guide, you will learn how to add a Code block, customize its appearance, and use its enhanced features.

To add a Code block to your page or post, follow these steps:

1. Click the + block inserter button and search for “Code.”
2. Click the Code block to add it to your content.

3. Paste or write your code in the Code block.

For more information, visit our detailed instructions on adding blocks.

The Code block supports syntax highlighting for many programming languages. When you select a language, your code displays with color-coded formatting that makes it easier to read.

To select a language, follow these steps:

1. Click on your Code block to select it.
2. In the block toolbar, click the language dropdown (set to “Plain Text” by default).
3. Select your desired language from the list.

The syntax highlighting appears both in the editor and on the published page.

The Code block supports syntax highlighting for over 120 programming languages, including popular options like JavaScript, TypeScript, PHP, Python, HTML, CSS, JSON, SQL, Ruby, and Shell.

The Code block includes several display options to enhance readability and usability for your visitors.

To access the Code block‘s settings, follow these steps:

1. Click on your Code block to select it.
2. Open the block settings in the right sidebar.

The Code block includes the following settings:

• Language: Select the code language.
• Filename: Display a filename at the beginning of your code block so readers know which file to edit or create.
• Show language name: Display the programming language name at the beginning of your code block.
• Show copy button: Add a button that allows visitors to copy your code with one click.
• Show line numbers: Add line numbers to help readers reference specific lines of code.

The Code block offers style variations to match your site’s design.

To access the Code block’s styles, follow these steps:

1. Click on your Code block to select it.
2. Open the block settings in the right sidebar.
3. Click the Styles icon in the sidebar.

The Code block includes the following styles:

• Styles: Select Default, No highlight, Solarized Light, or Solarized Dark.
• Color: Click the ⋮ next to Color to select specific colors for different syntaxes.
• Typography options
• Dimensions settings
• Border settings