Code Syntax Highlighting Block

A WordPress plugin which extends Gutenberg by adding syntax highlighting to the core code block.

Example:

Usage

Install code-syntax-block plugin to your WordPress plugins directory and activate. You can download a zip from the releases page.

When creating a new code block, select Code block, and then in the Inspector (Block Controls on the Right) select the language for the code. The code will not change within the editor, but you'll see a small label with the selected language.

On the front-end when the post is being viewed, the code will be color syntax highlighted.

Customize

If you want to change the colors, the default color theme is based off GHColors. You can download a new theme from the link above, or from the Prism themes repo.

To enqueue your custom file, you can use the mkaz_prism_css_url filter in your own plugin. Add the CSS file to your plugin, and then declare the file like so:

// Define a custom stylesheet to be used to highlight code.
function yourprefix_syntax_atom_hl() {
       	return plugins_url( 'atom-dark-hl.css' , __FILE__ );
}
add_filter( 'mkaz_prism_css_url', 'yourprefix_syntax_atom_hl' );

Colophon

• Uses PrismJS syntax highlighter, http://prismjs.com/

• Uses customized GH Colors theme, https://github.com/PrismJS/prism-themes

License

Copyright (c) 2018 Marcus Kazmierczak.

Licensed under GPL 2.0 or later .