Code Now Displayed with Hack

I hope everyone's having a nice Labor Day and not working. I'm not, unless you count working on more frog comics.

I did, however, take a few minutes to update my Eclipse to use this awesome font. It's called Hack, and it's designed specifically for source code.

This is the Hack font. Note how l looks different than 1, and 0 looks different than O. I like it.

After remembering that Eclipse has waaaaaay more configuration items than reasonably fit on its chosen method of display and fumbling through them anyway to find where to change the font, I had the thought that I should update the way I display code on my blog here to use Hack as well.

The code snippets that show up on my blog are styled using SyntaxHighlighter by Alex Gorbatchev. I downloaded it years ago and set it up on my web server. I then edited my blog template code here on Blogger to load the scripts and stylesheets necessary to make it work. Here's what I added inside the HEAD tag near the top of my Blogger template's HTML (not a real IP address - if you do this, use the address of wherever you have the SyntaxHighlighter installation):

<link href='//cdn.jsdelivr.net/font-hack/2.010/css/hack.min.css' rel='stylesheet' type='text/css'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shCore.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushJava.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushXml.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushCss.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushBash.js' type='text/javascript'/>
<link href='//1.2.3.4/syntaxhighlighter/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();</script>

I am using a CDN for the Hack font itself, but my own server for SyntaxHighlighter. On my server, I just edited the CSS to prefer the Hack font first before "standard" monospace fonts. I also changed the font-size to 0.98em from 1em because I thought it was a bit large. I think it looks great now. Hopefully you agree, if you actually look at any of the code I post here.

When I post code, I use the <pre> method. I have to escape my HTML code with this method, but that's not usually a big deal. Take this snippet, for example:

<pre class="brush: js">
// I put JavaScript code here
console.log("log something");
while (froot) {
    console.log("loop")'
}
</pre>

It will look this this on the page:

// I put JavaScript code here
console.log("log something");
while (froot) {
    console.log("loop")'
}

Using SyntaxHighlighter to highlight the code used for syntax highlighting. So meta.

One thing I did notice about this font is that it is very similar to the default terminal font on my Red Hat Linux workstation. Maybe that's why I like it.

I hope you like today's comic as much.

Amphibian.com comic for 7 September 2015