This theme uses Prism for code highlighting. Other Hugo themes usually include a pre-configured version of Prism, which complicates updates and clutters the source code base with third-party JavaScript.

Only the Prism features you select in the Hugo site configuration are bundled by the build process. This way, Prism can be easily updated with npm and the size of the JavaScript and CSS bundles are minimized by only including what you need.

Here is a an example configuration demonstrating how to configure languages and plugins in the config.toml file of your Hugo site:

[params]
  [params.prism]
    languages = [
      "markup",
      "css",
      "clike",
      "javascript"
    ]
    plugins = [
      "normalize-whitespace",
      "toolbar",
      "copy-to-clipboard"
    ]

Languages

The following languages are available:

  
    




  
      abap
      abnf
      actionscript
      ada
      agda
      al
      antlr4
      apacheconf
      apex
      apl
      applescript
      aql
      arduino
      arff
      armasm
      arturo
      asciidoc
      asm6502
      asmatmel
      aspnet
      autohotkey
      autoit
      avisynth
      avro-idl
      awk
      bash
      basic
      batch
      bbcode
      bicep
      birb
      bison
      bnf
      brainfuck
      brightscript
      bro
      bsl
      c
      cfscript
      chaiscript
      cil
      clike
      clojure
      cmake
      cobol
      coffeescript
      concurnas
      cooklang
      coq
      core
      cpp
      crystal
      csharp
      cshtml
      csp
      css-extras
      css
      csv
      cue
      cypher
      d
      dart
      dataweave
      dax
      dhall
      diff
      django
      dns-zone-file
      docker
      dot
      ebnf
      editorconfig
      eiffel
      ejs
      elixir
      elm
      erb
      erlang
      etlua
      excel-formula
      factor
      false
      firestore-security-rules
      flow
      fortran
      fsharp
      ftl
      gap
      gcode
      gdscript
      gedcom
      gettext
      gherkin
      git
      glsl
      gml
      gn
      go-module
      go
      graphql
      groovy
      haml
      handlebars
      haskell
      haxe
      hcl
      hlsl
      hoon
      hpkp
      hsts
      http
      ichigojam
      icon
      icu-message-format
      idris
      iecst
      ignore
      inform7
      ini
      io
      j
      java
      javadoc
      javadoclike
      javascript
      javastacktrace
      jexl
      jolie
      jq
      js-extras
      js-templates
      jsdoc
      json
      json5
      jsonp
      jsstacktrace
      jsx
      julia
      keepalived
      keyman
      kotlin
      kumir
      kusto
      latex
      latte
      less
      lilypond
      linker-script
      liquid
      lisp
      livescript
      llvm
      log
      lolcode
      lua
      magma
      makefile
      markdown
      markup-templating
      markup
      mata
      matlab
      maxscript
      mel
      mermaid
      mizar
      mongodb
      monkey
      moonscript
      n1ql
      n4js
      nand2tetris-hdl
      naniscript
      nasm
      neon
      nevod
      nginx
      nim
      nix
      nsis
      objectivec
      ocaml
      odin
      opencl
      openqasm
      oz
      parigp
      parser
      pascal
      pascaligo
      pcaxis
      peoplecode
      perl
      php-extras
      php
      phpdoc
      plant-uml
      plsql
      powerquery
      powershell
      processing
      prolog
      promql
      properties
      protobuf
      psl
      pug
      puppet
      pure
      purebasic
      purescript
      python
      q
      qml
      qore
      qsharp
      r
      racket
      reason
      regex
      rego
      renpy
      rescript
      rest
      rip
      roboconf
      robotframework
      ruby
      rust
      sas
      sass
      scala
      scheme
      scss
      shell-session
      smali
      smalltalk
      smarty
      sml
      solidity
      solution-file
      soy
      sparql
      splunk-spl
      sqf
      sql
      squirrel
      stan
      stata
      stylus
      supercollider
      swift
      systemd
      t4-cs
      t4-templating
      t4-vb
      tap
      tcl
      textile
      toml
      tremor
      tsx
      tt2
      turtle
      twig
      typescript
      typoscript
      unrealscript
      uorazor
      uri
      v
      vala
      vbnet
      velocity
      verilog
      vhdl
      vim
      visual-basic
      warpscript
      wasm
      web-idl
      wiki
      wolfram
      wren
      xeora
      xml-doc
      xojo
      xquery
      yaml
      yang
      zig


  

Plugins

Before using a plugin in production, read its documentation and test it thoroughly. E.g., the remove-initial-line-feed plugin is still available despite being deprecated in favor of normalize-whitespace.

Many Prism plugins require using <pre> tags with custom attributes. Hugo uses Goldmark as Markdown handler, which by default doesn’t render raw inline HTML, so make sure to enable unsafe rendering if required:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

The following plugins are available:






  
    autolinker
    autoloader
    command-line
    copy-to-clipboard
    custom-class
    data-uri-highlight
    diff-highlight
    download-button
    file-highlight
    filter-highlight-all
    highlight-keywords
    inline-color
    jsonp-highlight
    keep-markup
    line-highlight
    line-numbers
    match-braces
    normalize-whitespace
    previewers
    remove-initial-line-feed
    show-invisibles
    show-language
    toolbar
    treeview
    unescaped-markup
    wpd

Examples

Copy to Clipboard

copy-to-clipboard requires the toolbar plugin, so make sure to add it after adding toolbar in the config.toml file:

Config:

[params.prism]
  # ...
  plugins = [
    "toolbar",
    "copy-to-clipboard"
  ]

Line Numbers

Config:

[params.prism]
  plugins = [
    "line-numbers"
  ]

Input:

<pre class="line-numbers">
  <code>
    Example
  </code>
</pre>

Output:

  
    Hello,
    World!

    Foo
    Bar
  

Command Line

Config:

[params.prism]
  languages = [
    "bash"
  ]
  plugins = [
    "command-line"
  ]

Input:

<pre class="command-line language-bash" data-user="root" data-host="localhost">
  <code>
    cd /usr/local/etc
    cp php.ini php.ini.bak
    vi php.ini
  </code>
</pre>

<pre
  class="command-line language-bash"
  data-user="chris"
  data-host="remotehost"
  data-output="2, 4-8"
>
  <code>
    pwd
    /usr/home/chris/bin
    ls -la
    total 2
    drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
    drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
    -rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
    -rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
  </code>
</pre>

Output:

  
    cd /usr/local/etc
    cp php.ini php.ini.bak
    vi php.ini
  
  
    pwd
    /usr/home/chris/bin
    ls -la
    total 2
    drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
    drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
    -rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
    -rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
  

Diff Highlight

Config:

[params.prism]
  languages = [
    "javascript",
    "diff"
  ]
  plugins = [
    "diff-highlight"
  ]

Input:

<pre class="language-diff-javascript diff-highlight">
  <code>
    @@ -4,6 +4,5 @@
    -    let foo = bar.baz([1, 2, 3]);
    -    foo = foo + 1;
    +    const foo = bar.baz([1, 2, 3]) + 1;
         console.log(`foo: ${foo}`);
  </code>
</pre>

Output:

  
    @@ -4,6 +4,5 @@
    -    let foo = bar.baz([1, 2, 3]);
    -    foo = foo + 1;
    +    const foo = bar.baz([1, 2, 3]) + 1;
         console.log(`foo: ${foo}`);