Writing a blog can be fun and possibly, for the reader, educational. As i enjoy technology, it satisfies a creative urge to write on discoveries i come across in the wonderful world of technology. Often this takes the form of developing code for various platforms in a variety of different languages. One problem i find in blogging platforms is the ability to format and display segments of software code in a pleasing fashion.This wordpress platform has several features to do so.
Part of WordPress Edit Page
The html <pre> and <code> elements provide some scope for this. With these html tags, i can present fragments of code and script in several languages. The actual presentation of these elements can be marked up with additional CSS. This gives me a wider scope to show my findings in an appealing way.
Unfortunately, the wordpress blogging platform does not allow me to include javascript files and css markup files as free, stand-alone files. If i need that level of control, i resort to the HTML tab at the top of my editing page.
This leads me on to the subject of syntax highlight utilities. These utility modules offer a number of ways to improve the readability of code fragments. One module i’ve been learning is the Syntax Highlighter written by Alex Gorbatchev. He’s written this module in javascript and it did take me quite a while to learn how to use it.
Unzipped Layout of Syntax Highlighter Folders
Firstly, you can only use this tool when you are able to include your own CSS and javascript files into your blog or website. If you use wordpress on-line then you will not be able to do this. If you download and host wordpress on your own system, you might, but have not done so, therefore cannont comment. The download page can be found here. A zip file will arrive with a filename that indicates the version of highlighter you’ve downloaded. Unzip that file in your preferred location and you should find several directories within the root directory of syntax highlighter.
Minimum List of Required Files in Blue
Two folders hold the key components necessary to markup a web page or code fragment. The styles folder has the CSS files for markup and the scripts folder has javascript code to do the deed. Click the image right to view the minimum set of files needed to use syntax highlighting. There are two core files, one each for CSS and javascript. A second pair of files hold basic default values. The markup of code fragments can be controlled using themes and brushes.
Each programming language can have it’s keywords colored using the idea of brushes. Since i do a lot of work in the groovy programming language, the blue bars in the image right shows the shBrushGroovy.js javascript file that has logic to color my code fragments according to keywords of the groovy programming language.
Ok, let’s cover this again : the files we need to invoke syntax highlighting total a minimum of seven files.
Javascript :
- shCore.js – the foundation logic for all syntax highlighting, written in javascript
- shBrushGroovy.js – this javascript file has logic to color the keywords in groovy
CSS:
- shCore.css – the foundation style markup for syntax highlighting
- shCoreDefault.css – foundation coloring
- shCoreMidnight.css – one of three theme support files, this theme is Midnight
- shThemeDefault.css – a base theme with default values if no other theme chosen
- shThemeMidnight.css – a color scheme for the shCoreMidnight.css theme
These files will need to be declared in your html page. See my example in next post. Here is a squint at the html markup for that example page :
Minimum files needed to support syntax highlighting
To Recap :
Code fragments can be colored according to the keywords of each language. The Syntax Highlighter of Alex supports keywords for at least 13 scripting and coding languages declared in ‘brush’ files. Brush files are written in javascript. You will typically have at least one language-specific brush for a code fragment. This ‘brush’ will color the keywords.
A ‘theme’ will construct and color the overall look of our box containing the code fragment. A minimum of three core CSS files plus two theme-based CSS files apply a color scheme onto your code fragment, courtesy of several files with javascript. the inclusion of jquery 1.6 is a convenience feature to activate syntax highlighter after our html page has finished loading.
IN part two, we’ll explore further requirements to make this all work.
