Code block

A syntax highlighting block for Gutenberg with custom themes for every languages.

Examples

HTML
index.html
CSS
style.css
PHP

Customization

Configuration

Add a Code Block, paste your code, select the language in the inspector, add a file name (optionnal). Choose if you want to display line number, define a line start number and that’s it!

Performances: WordPress only loads in front the minimum scripts/styles required according to languages used in the post.

This block uses Code Mirror and React Code Mirror from Marijn Haverbeke and Jed Watson.

Add your own language

By default, this code block doesn’t include every language supported by CodeMirror. But there is a hook to add your language. Add this code in your functions.php file:

PHP
functions.php