Server-Side Code Syntax Highlighting Block

A WordPress plugin which extends Gutenberg by adding server-side syntax highlighting to the WordPress core code block. Fully compatible with the offical AMP plugin.

Example:

Usage

Install code-syntax-block plugin to your WordPress plugins directory and activate. You can download a ZIP from the GitHub, without any build step required. You can also run npm run zip to create a ZIP of the non-development files.

This plugin upgrades the existing Code block in core. It uses auto-detection for the language in the block to add syntad highlighting, but you can override the language in the block inspector.

On the front-end when the post is being viewed, the code will be color syntax highlighted. Syntax highighting is performed server-side via highlight.php, so there is no JavaScript required on the frontend (e.g. Prism.js). Because of this, AMP pages get the same syntax highlighting as non-AMP pages.

Customize

The default install uses a limited set of languages from highlight.php (bash, cpp, css, diff, go, javascript, json, markdown, php, python, sql, xml). If your language is not included, you can modify the [.gitignore] to skip ignoring them and then optionally add a label in the get_languages() PHP function.

For styling, the default color theme is used from highlight.php. To use a different color scheme, you can use the code_syntax_block_style filter to use another one of the styles:

add_filter(
	'code_syntax_block_style',
	function() {
		return 'github';
	}
);

Colophon

Uses highlight.php syntax highlighter

Contribute

See list of current issues with the plugin. Please feel free to file any additional issues or requests that you may come across. Pull requests are welcome to help extend.

License