I’m using my own Chili plugin on this website, and I made it exactly for that: highlighting my snippets on my websites. It is very good for many languages, but not for Ruby. Some years ago I started developing a new version, much more powerful than ever, but later I was sucked up into life again and I left that behind…

So now that I wanted to publish some Ruby code here, I recently wandered in the internet looking for some kind of replacement, or at least something that I could use side by side with Chili, and which could highlight Ruby. I mean, highlight Ruby as real Ruby, because I could easily write any fake Ruby recipe for Chili myself… But if I had this kind of code I want it highlighted as it should:

a = "#{ b="#}#{ 1 }"; b }" #c

Note that such a snippet is perfectly valid Ruby code (results in a == “#}1”) but it is easy to understand why a highlighter could fail on it. And many do.

Luckily I eventually stumbled upon highlight.js (by Ivan Sagalaev) which is excellent for Ruby (and I think all other languages it supports, too). As you see above, it correctly understands how string interpolation works in Ruby. That is thanks to its context based architecture (which Chili lacks).

Use this CSS to reset PRE tags:

pre, code {
  padding: 0;
  margin: 0;
  line-height: 1em;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
}

pre {
  white-space: pre !important;
  overflow-wrap: normal;
  overflow-x: scroll;
}

Use this HTML to setup highlight.js for coloring PRE blocks containing CODE blocks with a class “hljs”. As usual Chili will ignore blocks with languages it doesn’t have a recipe for, and highlight.js will instead consider only its own blocks.

<link rel="stylesheet" href="http://example.com/.../xcode.css">
<script type='text/javascript' src='http://example.com/.../highlight.pack.js'></script>

<script type="text/javascript">
  jQuery(function ($) {
    $('pre code.hljs').each(function(i, e) {
      hljs.highlightBlock(e, '  ', false);
    });
  });
</script>