A WordPress plugin which extends Gutenberg adding color syntax highlighting to the code block.
Switch branches/tags
Clone or download
Pull request Compare This branch is 6 commits ahead, 11 commits behind mkaz:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
build
languages
.babelrc
.eslintrc.js
.gitignore
.npmrc
code-syntax.js
editor.scss
index.php
package.json
readme.md
screenshot.png
style.scss
webpack.config.js

readme.md

Code Syntax Highlighting Block

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

Example:

screen shot

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

The default install uses a limited set of languages from Prism (bash, css, clike, html/markup git, go, javascript, json, php, python, react jsx, sql). If your language is not included, you can build and download a new prism.js using this form. Just replace assets/prism.js with the new file. You will also need to edit the langs array in code-syntax.js and rebuild.

Changing color theme, 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 would be to download and customize the new css and replace assets/prism.css.

Contribute

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.

Colophon

License

Copyright (c) 2018 Marcus Kazmierczak.

Licensed under GPL 2.0 or later .