Skip to main content

Code

The Code block allows you to display code snippets with proper syntax highlighting directly in your posts and pages. Intended for sharing programming examples, command line instructions, or configuration files with your audience. Specifically, the Code block enables you to:

  • display code with proper formatting and indentation;
  • apply syntax highlighting for numerous programming languages;
  • preserve whitespace and special characters in your code;
  • make code snippets visually distinct from regular text;
  • enhance readability with a monospaced font; and
  • allow readers to easily copy code for their own use.

The Code block automatically preserves formatting and displays your code in a distinct container with a contrasting background. Syntax highlighting makes different elements of your code (like variables, functions, and comments) visually distinct through colour coding. The block is responsive and will adjust to different screen sizes, with horizontal scrolling for long lines of code to maintain readability.

The WordPress Code block showing syntax highlighted code with a contrasting background.

The WordPress Code block displaying syntax highlighted code with proper formatting and indentation.

Adding the Code Block​

  1. In the WordPress block editor, click the + button to add a new block.
  2. Search for Code and select the Code block.
  3. The block will appear as an empty container ready for your code.

Alternatively, you can type /code on a new line and press enter to add the block.

Adding Code Content​

To add code to the Code block:

  1. Click inside the code block container.
  2. Paste or type your code, preserving all indentation and formatting.
  3. The block will maintain your formatting, including spaces and tabs.

Customising the Code Block​

Once you have added your code, you can customise its display:

  • Language: Select the programming language from the block toolbar for appropriate syntax highlighting
  • Background Colour: Change the background colour of the code block using the color options in the sidebar
  • Text Colour: Adjust the text colour to ensure readability against the background
  • Font Size: Modify the font size to make the code more readable

These options can be found in the block settings sidebar under the Settings tab when the code block is selected.

Additional Features​

The Code block includes several useful features:

  • Copy Button: Readers can easily copy your entire code snippet with a single click using the copy button that appears in the upper right corner
  • Line Numbers: Enable line numbers to make it easier to reference specific lines in your code
  • Overflow Control: Long lines of code will trigger horizontal scrolling rather than wrapping, preserving the intended formatting

Best Practices​

For optimal use of the Code block:

  • Always specify the correct programming language for proper syntax highlighting
  • Use consistent indentation within your code examples
  • Consider adding explanatory text before or after the Code block to provide context
  • For longer code snippets, consider breaking them into smaller, more focused examples
  • Ensure sufficient contrast between your code text and background for readability

Accessibility Considerations​

The Code block is designed with accessibility in mind:

  • Ensure adequate colour contrast between the code text and background
  • Provide explanatory text around code examples to give context to screen reader users
  • Consider including alternative explanations for complex code examples
  • Use a reasonable font size that maintains readability while preserving code formatting