Codeblocks lets you add highlighted and formatted source code into your website without cluttering the visual editor. Write your code in individual blocks outside the built-in Content editor, and access these blocks simply by adding
[codeblock name='MY_BLOCK']
into your blog post or page. Codeblocks highlights the code on your website using
Rainbow.js, and themes can customize the color scheme of your code.
http://z43studio.com/2014/05/codeblocks/
Theme editors: See the Installation section for information on how to adjust Codeblocks options in your theme.
The plugin is simple to install:
- Download the Codeblocks plugin file (
.zip
)
- Unzip and upload the plugin files folder to your
wp-content/plugins
folder
- Go to the Plugins page and activate the Codeblocks plugin
While writing a post or page in your blog, add your code in the
Codeblocks section of the Edit page. If this section does not show up, open the
Screen Options dropdown from the top of the page and make sure Codeblocks is checked.
In your article content, you can access your blocks of code using
[codeblock name='MY_BLOCK']
where
MY_BLOCK
is whatever you titled your block of code. Codeblocks will automatically take care of setting up the highlighting feature on your website.
Theme Editors
You can hook into
codeblocks/rainbow_theme
filter inside your
functions.php
file to change the Rainbow.js theme (there are many
themes on GitHub). Return a URL to the new theme stylesheet file, or
null
to disable highlighting, or
true
to only include the Rainbow.js file without a theme (useful if your themes already-loaded stylesheet file contains the code highlighting styles). Here's a few examples:
add_filter('codeblocks/rainbow_theme', function($oldURL) {
// Use the file 'cool-rainbow.css' inside our theme directory
return plugins_url('cool-rainbow.css',
FILE);
});
You can also disable code highlighting with your theme by returning
null
in the filter.
add_filter('codeblocks/rainbow_theme', function($oldURL) {
// Disable code highlighting on our theme
return null;
});
If your theme's base stylesheet file already includes the Rainbow.js styles, just return
true
and we'll skip importing the stylesheets, and just load the Rainbow.js plugin.
add_filter('codeblocks/rainbow_theme', function($oldURL) {
// Add Rainbow.js tags, but don't include a separate stylesheet file
return true;
});