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.
- It automatically guesses the language that you are displaying and changes the styling accordingly
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).
- 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:
- 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:
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.fossil
Finally, 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.config
in an open repository or
fossil config import googleSkinHighlight.config -R repo.fossil
if you don’t have your repository “repo.fossil” open.
-  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 ↩