Background

To avoid getting sued because of this whole GDPR compliance mess it’s recommended to not load any assets (js/css/images/fonts) from third party servers or CDNs.

Setup

For HighlightJS this means:

Go to highlightjs.org
Configure the languages you want, in my case …
- Common: bash, css, diff, html/xml, http, ini/toml, json, javascript, makefile, markdown, nginx, objective-c, properties, python, sql, shell session, yaml
- Other: dockerfile, go, lua, postgresql sql dialect and pl/pgsql, swift, tex, vim script
Hit download
- Extract highlight.pack.js to js directory of site
- Extract styles as they are to css/highlight-js/ directory of site

If some code doesn’t get highlighted correctly the reason is probably because the language isn’t included. Reconfigure and redownload.

Site Integration

Originally you would have done:

<!-- In <head> (this is the non-themed version of the styles) -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">

<!-- Just before </body> (this only contains the default languages, so for example not Swift) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

Now you do:

<!-- In <head> (this is a themed version of the styles) -->
<link rel="stylesheet" href="css/highlight-js/tomorrow-night.css" type="text/css">

<!-- Just before </body> (your selection of languages) -->
<script src="js/highlight.min.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

Color scheme

Schemes can be previewed at the HighlightJS demo page. This site uses the tomorrow-night theme.

Font

Fira Code woff2 web font from https://github.com/tonsky/FiraCode.

Examples

Python

def fizzbuzz(n):
    if n % 3 == 0 and n % 5 == 0:
        return 'FizzBuzz'
    elif n % 3 == 0:
        return 'Fizz'
    elif n % 5 == 0:
        return 'Buzz'
    else:
        return str(n)

print "\n".join(fizzbuzz(n) for n in xrange(1, 21))

Swift

var multiple: Bool

for number in 1...100 {
    multiple = false
    if number % 3 == 0 {
        print("Fizz")
        multiple = true
    }
    if number % 5 == 0 {
        print("Buzz")
        multiple = true
    }
    if !multiple {
        print(number)
    }
    print("\n")
}

JavaScript

function FizzBuzz(aTarget) {
    for (var i = 1; i <= aTarget; i++) {
        var result = "";
        if (i%3 === 0) result += "Fizz";        
        if (i%5 === 0) result += "Buzz";
        if (result.length ===0) result = i;

        console.log(result);
    }
}

Ruby

def fizzbuzz(last_number)
  1.upto(last_number).each do |x|              
    if (x % 3 == 0) && (x % 5 == 0)
      puts " Fizzbuzz"
    elsif x % 3 == 0
      puts " Fizz"
    elsif x % 5 == 0
      puts " Buzz"
    else
      puts x
    end
  end
end

Unspecified Language (eg. DSL)

program Name und Kurzbeschreibung
   LiesDatenStruktur()
   LiesDatenInhalt()
    ...
   if DatenUnvollständig then
      FehlerMelden 
      exit
   end if
   HauptstatistikBerechnen
   ZusammenstellungBerechnen
   Resultate in HTML-Datei schreiben
end program Name

HighlightJS support for theme

PUBLISHED ON 2019-09-01 — HUGO