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.
--- /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"
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.
use FindBin 1.51 qw( $RealBin );
use lib $RealBin;
I also had to install some dependencies with CPAN.
$ perl -MCPAN -e shell
Namely `Parse::RecDescent`.
install Parse::RecDescent
Then I was able to convert the file.
$ perl sh2js.pl /usr/share/source-highlight/desktop.lang > desktop_test.lang.js
And minify it, like the SHJS devs are doing in their makefile. For this, I had to get `yuicompressor` first.
$ wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar
$ mv yuicompressor-2.4.8.jar ~/bin/
And run it on the generated js file.
$ java -jar ~/bin/yuicompressor-2.4.8.jar desktop_test.lang.js > desktop_test.lang.min.js
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):
# 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 = `[:*]`