Skip to content

Android Tutorial Station

Highlight syntax with the WordPress Rainbow Hilite plugin

In most blogs sooner or later there is a need to insert some code snippet and highlighting its syntax gives it a better look while facilitating its reading. Today there are many plugins to highlight the syntax of code snippets but today we are going to talk about the WordPress Rainbow Hilite plugin that has unique features that make it different from the rest.

Then I will analyze the features of the WordPress Rainbow Hilite plugin and at the same time I will show the advantages and disadvantages compared to other plugins for syntax highlighting.

Analysis of the WordPress Rainbow Hilite plugin for syntax highlighting

It is a plugin that has recently been published in the plugin repository and has as a great novelty that it does not need the use of any shortcode to insert code snippets . The plugin makes use of the HTML <pre> tag that can be easily entered from the visual editor itself.

WordPress Rainbow Hilite makes use of the javascript library called Rainbow which is used for syntax highlighting. Rainbow is a lightweight open source javascript library that we can use freely and can be found on Github . This library supports syntax highlighting for 18 programming languages (C, C #, Coffeescript, CSS, D, Go, Haskell, HTML, Java, Javascript, Lua, PHP, Python, R, Ruby, Scheme, Shell and Smalltalk).

Once we install the plugin we find the options in the WordPress administrator panel in the Ajustes ? Escritura menu Ajustes ? Escritura .

How can we see in the options the plugin allows us to:

  • Select the color theme for syntax highlighting. Each syntax highlighting theme has its own CSS file which we can modify to our liking.
  • Show or not the line numbers. The plugin will even allow us to define which line to start counting on.
  • Define for which programming languages ??syntax highlighting is active.
  • Possibility of using the minified versions of the Rainbow JS script.

After installing the plugin, four new files are loaded with the following sizes (uncompressed):

  • plugins/wp-rainbow-hilite/js/rainbow-custom.min.js ? 28Kb
  • plugins/wp-rainbow-hilite/js/rainbow.linenumbers.min.js ? 1,7Kb
  • plugins/wp-rainbow-hilite/css/wp-rainbow-linenumbers-fix.css ? 129bytes
  • plugins/wp-rainbow-hilite/css/themes/github.css ? 1.4Kb

In total, after installing the plugin we will be loading about 30Kb more, although the size will be reduced if we have Gzip compression enabled in our WordPress .

Once set up at ease from the visual editor itself we can insert the <pre> tag and configure the highlighting options as seen in the following image:

The WordPress Rainbow Hilite plugin has several advantages over its competitors:

  • We do not depend on a shortcode.
  • You don’t need a “view raw” button that your competitors use because you can copy the code directly.
  • It integrates with the WordPress visual editor perfectly.

As an inconvenience I see one that has all the syntax highlighting plugins and it is that both the javascript library, and the necessary CSS files, are loaded on all WordPress pages whether or not they have code fragments to highlight.

No comments yet.

Leave a Reply

Your email address will not be published.

Comments (0)