Mephisto - code highlighter

Presenting highlighted code (css, ruby, javascript, html, etc) not only looks good but it's also easier for the reader to follow.

Installing the mephisto code highlighter plugin is relatively simple; the problem seems to be a lack of accurate documentation. This tutorial will show how to install the plugin and how to code your articles to make use of it.

As with any plugin, log into your server and navigate to your Mephisto directory:

cd public_html/mephisto_install

We'll install the plugin from there. Ensure the code below is entered on one line, note that there's a space between trunk/ and vendor:

svn co
http://svn.danwebb.net/external/rails/plugins/filtered_column_code_highlighter/trunk/
vendor/plugins/filtered_column_code_highlighter_macro

Now the plugin is installed, we need to move some of the downloaded javascript files to the public/javascript directory:

mv vendor/plugins/filtered_column_code_highlighter_macro/assets/*.js public/javascripts/

The plugin highlights code syntax on the client side, so no server resources are used and if the user doesn't have javascript enabled, they still see the code, just not in pretty colours.

To show the highlights, we need to create a CSS file:

nano public/stylesheets/codehighlight.css

What CSS you put in the file is entirely up to you but to give you a start please feel free to copy the one I use on this site:

example codehighlight.css

That's the base install done, now some changes to the layout.liquid template are required.

Log into your Mephisto Admin Area and click on the 'Design' tab and the layout.liquid link.

In the header section, add a link to the stylesheet and a link to the javascript files we copied earlier. Note that if you are not going to use a particular language, such as html, there is no need to include it in the header.

The format for the stylesheet is:

{{ 'codehighlight' | stylesheet }}

and to add the javascripts:

{{ 'code_highlighter' | javascript }}
{{ 'css' | javascript }}
{{ 'html' | javascript }}
{{ 'javascript' | javascript }}
{{ 'ruby' | javascript }}

As with any plugin install, restart the web server. If you are using Litespeed:

sudo /usr/local/lsws/bin/lswsctrl restart

Using the plugin:

Now to the part that seems to cause some confusion: using the plugin.

Very simply, when you are writing an article, any code you intend to show goes between a starting <macro:jscode> tag and a finishing </macro:jscode> tag.

To specify and highlight a particular language, add lang="xxx" in the first tab e.g: <macro:jscode lang="css">

An example of a plain block of code (as used so far in this article) would be:

<macro:jscode>
sudo /usr/local/lsws/bin/lswsctrl restart
</macro:jscode>

which would produce the following:

sudo /usr/local/lsws/bin/lswsctrl restart

To show highlighted CSS code you would enter:

<macro:jscode lang="css">
pre {
  background: #faf4de;
  margin-bottom: 1.5em;
  border-top: solid 2px #8f3743;
  overflow: auto;
}
</macro:jscode>

which would produce:

pre {
  background: #faf4de;
  margin-bottom: 1.5em;
  border-top: solid 2px #8f3743;
  overflow: auto;
}

You may have noticed from the javascript and CSS files that the default languages are css, hmtl, javascript and ruby. However, with some minor tinkering to a new javascript file and some more styling, other languages would be available.

Plugin author: Dan Webb

PickledOnion.

Digg it | del.icio.us | reddit | StumbleUpon