A WordPress plugin which extends Gutenberg by adding syntax highlighting to the core code block.
Example:
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.
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. The easiest way to customize is to download and customize the new css and replace assets/prism.css
.
It is not necessary to build the plugin to use it, but if you want to contribute, or modify the plugin.
$ npm run build
$ npm run zip
Generated zip can be installed via Admin UI Plugins page
See Github issues for 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.
-
Uses PrismJS syntax highlighter, http://prismjs.com/
-
Uses customized GH Colors theme, https://github.com/PrismJS/prism-themes
Copyright (c) 2018 Marcus Kazmierczak.
Licensed under GPL 2.0 or later .