Skip to content
A Gutenberg block for editing and displaying code with syntax highlighting.
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/js/vendor
bin
blocks
php
.babelrc
.editorconfig
.gitignore
.phpcs.xml.dist
CHANGELOG.md
README.md
composer.json
package.json
screenshot-1.gif
shiny-code.php
webpack.config.js

README.md

Shiny Code

A Gutenberg block for editing and displaying code with syntax highlighting.

Requires: PHP 7.0 (or later)
License: GPLv2 (or later)

Animation showing how to convert a code block, set the code language, and change the syntax highlight theme.

Features

  • Choose a language for each code block
  • Toggle whether or not line numbers should display
  • Multiple syntax highlighting themes available
  • Highlight specific lines to draw attention to them
  • Choose a custom highlight color
  • Easily transform to/from core Code blocks
  • Code is saved as plain text, allowing it to be displayed in feeds and other contexts

Languages

Support for the following languages is included by default:

  • CSS
  • HTML
  • JavaScript
  • JSON
  • PHP

Additional languages can be registered using the shiny_code_languages filter.

Themes

Atom One Light and Atom One Dark themes are included and additional themes can be registered using the shiny_code_themes filter.

CodeMirror and Prism.js don't tokenize code exactly the same, so there will likely be slight differences between the colors in the editor and on the frontend.

Installation

To install Shiny Code:

  1. Download the latest release from GitHub (the saved file should be named shiny-code-{version}.zip).
  2. Go to the Plugins → Add New screen in your WordPress admin panel.
  3. Click the Upload button at the top next to the “Add Plugins” title.
  4. Upload the zip file downloaded in the first step.
  5. Click the Activate Plugin link after installation completes.

From Source

To build Shiny Code from source, clone this repository in wp-content/plugins/, then run the build steps:

git clone https://github.com/cedaro/shiny-code.git
cd shiny-code
composer install
npm install
npm run build

After building the plugin, go to the Plugins → Installed Plugins screen in your WordPress admin panel to activate Shiny Code.

You can’t perform that action at this time.