Multiple highlighting styles in Hugo

For pre-generated syntax code highlighting, Hugo uses Chroma (go-based) or Pygments (Python-based). I use Prism or Highlight.js for client-side highlighting. Since the production site build happens on Netlify, I use client-side code to highlight languages these packages don’t support. I’ll also talk about how I use highlighting for non-code purposes.

Code

The most common reason to use any syntax highlight is to improve code readability, and its use here is no exception. My early programming career involved languages that are not found in common highlighters: dBase, the programming and application development language for Ashton-Tate’s (and later, Borland’s) dBase product; IBM midrange computer languages including RPG (Report Program Generator), UIM (User Interface Manager), and CL (command language). Still a work-in-progress, I’ve attempted highlighters for these languages. In particular, RPG is complex, given that a single “specification” can contain multiple formats. Since these highlighters are generally Regex-based, it can be challenging.

To make Prism’s use somewhat distinct from Hugo’s built-in Chroma highlighting, I use the Autoloader Prism plugin and this syntax:

<pre data-src="path-to-code-file"></pre>

To give:

Prism.languages.ibmuim = {
  // Version 0.1, 20170103, Hanna Goodbar
  // Heavily based on the "markup" language as UIM is tag-based.
  'comment': /^([.][*].*)/,
  'tag': {
    pattern: /:.*?\./i,
    inside: {
      'tag': {
        pattern: /^:[^\s]+/i,
        inside: {
          'punctuation': /:/
        }
      },
      'attr-value': {
        pattern: /=(?:('|")[\w\W]*?(\1)|[^\s.]+)/i,
        inside: {
          'punctuation': /[=\."']/
        }
      },
      'punctuation': /\./,
      'attr-name': {
        'pattern': /[^\s\.]+/
      }
    }
  },
  'symbol': /(&(amp;)?(amp|colon|cont|msg|period|slr)[.])/i
};

NOTE: Updated 7 Jan 2019: The above has been altered to use Hugo’s built-in Chroma highlighting, as Prism has been removed from the site in 2019.

Code output

Sometimes when showing code, it’s useful to show its output as well. I don’t want output to be syntax-highlighted; rather, it should look like “code” meaning using a computer-ish text (as of this writing, the Fira Code typeface is used). It also takes on the default near-white page background instead of the Solarized Dark theme used for code above.

Code output uses three backticks (```) to delimit. This generates a block that will looks like code, but is not highlighted.

```
This is code output.
```

Yields:

This is code output.

Writing

Finally, structured writing such as poems, I want to look like a typewriter. Code blocks are repurposed here also. Poems take the look of typewriter text by using the sans-serif fallback font, which is monospaced. The pre tag by itself with no language specified, flows through without any styling.

<pre>
The next sentence is true.
The previous sentence is false.
</pre>

Shows:

The next sentence is true.
The previous sentence is false.