In a previous post and associated email on the fossil-users list, I had promised a write-up of how to get nice diff highlighting. Considering how long ago I wrote that post, I think it is obvious I might have forgotten about it. A recent email chain on the same list snapped me out of it. Thanks to this response to my original fossil styling tutorial on the user list, you will find a simple solution that doesn’t require committing anything to your fossil repository that will highlight your source code and your diffs.
Highlight.js
The javascript library that I chose to use is “highlight.js“. I looked at a bunch of different options (including jQuery based ones, SHJS, etc.), but settled on highlight.js for two very simple reasons:
- all you need for all your highlighting (of 40+ languages) is one 24kB javascript file, and any associated css you would like. It fits the bill exactly when looking at integrating it into fossil. [1]
- It automatically guesses the language that you are displaying and changes the styling accordingly
The one drawback is that highlight.js expects the code to be placed in “<pre><code>”, rather than the single “<pre>” that fossil uses. We will take care of this later through some more (easy) javascript.
Thanks to Ivan’s comment, I took another look at the js code, and something clicked this time. There is, in fact, no problem with going with just the <pre> tags. The javascript to put in the footer has been updated to reflect this.
So, download the highlight.js zip file (version 6!), and expand into any directory. We won’t actually be copying the files, so as long as you can open them in a text editor, we’re all set!
Changing your Fossil Repository
In fossil, we will be keeping things as simple as possible. For me, that means no committing some “/www” folder to the repository, and using the available “/doc/tip/www/*” url scheme that is available in fossil. Instead, we will be copy & pasting directly into the header and footer parts of fossil admin.
- Open the fossi web interface (“fossil ui”), and click on over to “Admin” and then “Header”.
- Open the “highlight.pack.js” file in any text browser (somewhere you can copy from).
- At the bottom of your <head> tag, copy in the javascript form the packed file between some <script type=”text/javascript”> tags.
- Click “Apply Changes” and head on over to the “Admin” and “Footer” section.
- Add the following code to the footer section right above the end of the <body> tag:
<script type="text/javascript"> var block=document.getElementsByTagName('pre'); for (var i = 0; i < block.length; i++) { hljs.highlightBlock(block[i]); } </script> - Make sure to hit “Apply Changes”
- Finally, we need to make sure that everything is styled properly. Highlight.js comes with several css files for styling the generated output. I personally like the github style, so I used that. Pick one of the files and open it in a text editor.
- Go to “Admin” > “CSS”. At the bottom of the text box, simply copy in the entirety of the relevant css file. Hit “Apply Changes”
Note: for those of you who are using the “Google Code”-esque style that I described in my previous post, you will need to make some changes. Namely, that css has a bunch of “.title” css descriptors. However, that same CSS class is used in the context of “pre code .title”. So, to separate the two, go through and change every instance of “.title” to “div.title” where it is not part of the “pre code .title” blocks. - Done! As a bonus, there was no need for committing anything. Here are some examples from the XMP repository:
PHP source highlighting:
Diff highlighting:
Please let me know in the comments if you find anything wrong with the above instructions!
Fossil Repository Template
Since I like my Fossil skin & highlighting set up, I don’t want to go through the trouble of adding it to every new repository that I create. So I set up a template fossil repository. Everyone is welcome to clone it anonymously:
fossil clone http://kott.fm/cgi-bin/fossil/template template.fossilFinally, you can download the skin with associated highlighting code. (Unzip it) This is a combination of the Google Code-esque skin + the highlighting. I’ve corrected for the CSS title problems. Import it into your existing repository via
fossil config import googleSkinHighlight.configin an open repository or
fossil config import googleSkinHighlight.config -R repo.fossilif you don’t have your repository “repo.fossil” open.
- [1] You can choose which languages to include in the packed file. If you only want one or two specific languages, then the file will be smaller! If you want all supported languages, the file weighs in at 94 kB ↩
A bit of clarification about highlight.js.
- The size depends on the number of languages included in the package. The file with 40+ languages weighs around 97K. But you rarely need it so, yes, for most people it’s somewhere under 30K. There’s a hosted version with common languages — see http://softwaremaniacs.org/soft/highlight/en/download/ for details.
- It’s not actually bound to <code> markup (it’s just a default for the built-in initializer). See “Custom initializtion” in the docs: http://softwaremaniacs.org/soft/highlight/en/description/
(ed: fixed syntax; wp interpreted the code as a tag!)
First, thanks for a great javascript syntax highlighting solution!
Second, I had taken a look at the custom initialization when I was first integrating the script, but couldn’t make heads or tails of it for some reason. Something about your comment clicked though, and I played around with it for a second now (while replying the first time, in fact). I saw the obvious part of what I had been doing wrong the first time around. Step 5 has now been updated to reflect that change.
Thanks again!
Glad it worked for you this time!
Hiya! i will definitely be swapping out my theme for this one very soon.
I’m glad you like it Stephan! I am happy that fossil supports such (fairly) easy style changes.
I think you still need the
<code>tags, since some of the CSS themes hardcode the selector as “pre code”. This breaks e.g. theme backgrounds.A possible solution would be to use a class instead of the tags as a selector, but that would require changing highlight.js…
@lvh I didn’t mean to imply in the post that the solution would work for all the CSS themes. I have tested and used it with my “google-like” styling, and it works for that. For the CSS themes that use both <pre> and <code> the solution should still work, except that it would always include the <code> within the text of the code block, right?
You might need to play with the JavaScript I gave for the footer to correctly select blocks to be highlighted.