Technology and the code that drives it is becoming more important to our society and technological evolution.As more and more people learn how to program (and move onto the harder discipline of software engineering) it becomes more important to stand out from the multitude. This is where presenting your work becomes important both as an expression of you and for others to learn from. And thus we have syntax highlighters that make the code more presentable and at the same time single out the actual syntax of the language.
Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks
WordPress™ is a registered trademark, please see: wordpressfoundation.org/trademark-policy
Other names / logos can be trademarks of their respective owners. Please review their website for details.
I am independent from the organisations listed above and am in no way writing for or endorsed by them.
All code ‘shown’ in the images is my own.
So what does a syntax highlighter do?
Essentially it takes the code you want to describe and transforms its appearance. This can be within an integrated development environment or a web page. For the web page, you may have placed the code within a post or page etc. that will be published by a supporting environment like Moodle or WordPress. I will be covering the web page within Moodle and WordPress aspect here.
As code has lots of symbols then from an HTML point of view it needs to be at least placed within ‘pre’ tags. I believe that for XHTML then there is a secondary requirement of being within a ‘code’ tag that is within the ‘pre’ tag. There are lots of syntax highlighters out there, but for the purposes of this article I’m going to concentrate on one by Alex Gorbachev – github.com/syntaxhighlighter/syntaxhighlighter – for the main reasons that I’m familiar with it and it is also in my Shoelace theme – moodle.org/plugins/theme_shoelace.
And so to illustrate what it does, here is some code in a label in Shoelace:
How it works
All syntax highlighters work subtlety different and you’ll need to consult their documentation. With Alex’s you have to specify what ‘brush’ to use in the class of the ‘pre’ tag, where the ‘brush’ is the name of the language. For example, for Java we would type ‘<pre class=”brush:java”>’ and for C we would have ‘<pre class=”brush:c”>. Then the highlighter uses that to select the right set of rules pertaining to the given language. Then the highlighter uses that to select the right set of rules pertaining to the given language, for example:
The highlighting process can at times not be perfect and will need fixing. For the ‘C program’ I will illustrate shortly I had to change the ‘<’ and ‘>’ symbols to ‘<’ and ‘>’ respectively in order not to get a repeat of the line ‘#include <stdio.h>’ at the bottom of the text.
Life is about learning and Moodle is not the only content management platform out there, but it is more learning specific. So as a ‘marketing front end’ to the ‘learning front end’ what about WordPress? From it you can write about your software development courses and illustrate your work. For example we can describe ‘unions in C’ with the following program:
This has been presented using a custom filter I wrote:
that when it sees a ‘pre’ tag with a brush class then it loads the highlighter. This is my first WordPress plug-in, so may not be complete.
What does this mean for learning?
I believe that it will enhance the overall presentation of your courses. Software engineering seems to have the ‘dull’ social attribute pinned to it. It is not seen as exciting or dare I say ‘cool’. But it is challenging, rewarding, creative and as each person has their own style, even artistic. When you understand code there can be a beauty to how someone has written and crafted that code.
Learning how to be a software engineer with the programming element needs to be an exciting and enjoyable thing to do. Thus by syntax highlighting your examples, this is just one way of achieving that goal.
Some of my code
It first sees if the ‘iconcolour’ setting has been set by the user. Then if so sees if it has changed from the colour the icons are already. If so then it will load each SVG file that the theme has overridden and replace with the new if the colour is not white or already the new colour, finally saving it. Lastly a ‘Purge all caches’ is done so that when loading the page the new version of the icon is used and it’s local file cache updated.
So, ignoring the technical complexities, you can see how the syntax highlighting aids the readability of the code to the user.
What about accessibility?
We have learnt about syntax highlighters, their purpose, how they work and how they can be applied within a given context. What do you think? Are they good or bad? Are they worth using? What more needs to be done? Are there alternatives to the problem of describing code?