title: Blog
post: Improved syntax highlighting on my website
description: Getting to know SHJS and GNU source-highlight
date: 2022-06-12
update: 2022-11-10
comments: true
---

For another page on this site I wanted to enable syntax highlighting for `.ini` files.
Looking at the language files included in [my SHJS 'distribution'](https://git.xythobuz.de/thomas/website/src/branch/master/static/js/sh) I didn't find an obvious file for 'ini'.
I tried the 'desktop' language, because these seem similar to 'ini' files, but the resulting syntax highlighting didn't look good.
The SHJS docs don't mention 'ini' at all.

I then took a little dive into how these files work.
Turns out [SHJS](http://shjs.sourceforge.net/doc/documentation.html) uses the language definition files from [GNU source-highlight](http://www.gnu.org/software/src-highlite/).
These are then converted to the js files needed by SHJS.
The source-highlight page mentions they support ini files, but I couldn't find a matching definition file in there.
Looking at my Arch system, I saw that source-highlight is already installed, including the language definitions in `/usr/share/source-highlight`.
So I ran `source-highlight --lang-list` which confirms that the desktop language is indeed the one to use for 'ini' files.
I also downloaded the most recent SHJS source distribution from their Sourceforge.

Looking at the SHJS source, they include the source-highlight definitions as well, and they seem very similar, with one important difference.

<pre class="sh_diff">
--- /home/thomas/Projekte/extern/shjs-0.6-src/source-highlight-lang/desktop.lang        2022-06-12 10:37:47.468000842 +0200
+++ /usr/share/source-highlight/desktop.lang    2021-12-17 06:57:29.000000000 +0100
@@ -5,3 +5,7 @@
 section start '\[.*\]'

 (type,paren,normal,symbol) = `([^="\[]+)((?:\[.+\])*)([[:blank:]]*)(=)`
+
+include "number.lang"
+include "symbols.lang"
+include "c_string.lang"
</pre>

They removed the includes at the end for some reason.
So I wanted to convert the language definition from my system distributed source-highlight to the format needed by SHJS, which is done with their `sh2js.pl` script.

It didn't run however.

Turns out some time ago Perl distributions disabled loading modules from the current directory.
So I had to add this to the beginning of the script.

<pre class="sh_perl">
use FindBin 1.51 qw( $RealBin );
use lib $RealBin;
</pre>

I also had to install some dependencies with CPAN.

<pre class="sh_sh">
$ perl -MCPAN -e shell
</pre>

Namely `Parse::RecDescent`.

<pre class="sh_perl">
install Parse::RecDescent
</pre>

Then I was able to convert the file.

<pre class="sh_sh">
$ perl sh2js.pl /usr/share/source-highlight/desktop.lang > desktop_test.lang.js
</pre>

And minify it, like the SHJS devs are doing in their makefile.
For this, I had to get `yuicompressor` first.

<pre class="sh_sh">
$ wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar
$ mv yuicompressor-2.4.8.jar ~/bin/
</pre>

And run it on the generated js file.

<pre class="sh_sh">
$ java -jar ~/bin/yuicompressor-2.4.8.jar desktop_test.lang.js > desktop_test.lang.min.js
</pre>

That's it, worked flawlessly!
Now I have some nicer ini file syntax highlighting.
And this was a fun little exercise for sunday morning!

**Update** from November 2022:

I also added [YAML](https://gist.githubusercontent.com/AlexZeitler/48813447f253360ccc431ae22d6939fd/raw/1c1d9372cce5fb2b568b2dd953d334ef8fe3f33d/yaml.lang), for which I found a ready-made language definition file by AlexZeitler.

And I added support for G-Code by making my own language definition, [based on this](https://github.com/PrismJS/prism/blob/master/components/prism-gcode.js):

<pre>
# highlighting for CNC G-Code
# based on https://github.com/PrismJS/prism/blob/master/components/prism-gcode.js

comment = `;.*|\B\(.*?\)\B`
string = `"(?:""|[^"])*"`
keyword = `\b[GM]\d+(?:\.\d+)?\b`
function = `\b[A-Z]`
number = `(\*)\d+`
label = `[:*]`
</pre>