Create a custom code highlight for Hugo

This article explains how to change the code highlight for a custom hugo website theme.

Suppose that the website is based on the PaperMod theme, and the source code colors needs to be customized.

In the PaperMod theme, the highlight.js library is used to provide different styles for each defined language. This file is located in:

.
└── themes
    └── PaperMod
        └── assets
           └── js
               └── highlight.min.js

Now, update the minified library in the custom theme to apply the changes, and change the css style for the target language:

• download the latest library at https://highlightjs.org/download/ selecting the appropriate package from the website. The downloaded folder should contain the following files:

  .
  ├── highlight
  │   ├── DIGESTS.md
  │   ├── es
  │   ├── highlight.js
  │   ├── highlight.min.js
  │   ├── languages
  │   ├── LICENSE
  │   ├── package.json
  │   ├── README.md
  │   └── styles
  ...
  

• copy the dowloaded highlight.min.js in the assets folder of the website, using the same structure used in the theme to allow the override:

  .
  ├── assets
  │   └── js
  │       └── highlight.min.js
  └── themes
      └── PaperMod
          └── assets
             └── js
                 └── highlight.min.js
  

• create a new .css file for the language, in assets/css/extended/ called highlight.qml.css.

  .
  └── assets
     ├── css
     │   └── extended
     │       └── highlight.qml.css
     └── js
         └── highlight.min.js
  

• copy the content of the style associated to QML language, which can be found in the file highlight/styles/qtcreator-dark.min.css in the downloaded folder, and apply the changes:

  pre code.hljs{
      display:block;
      overflow-x:auto;
      padding:1em
  }
  code.hljs{
      padding:3px 5px
  }
  .hljs{
      color:#aaa;
      background:#000
  }
  .hljs-emphasis,.hljs-strong{
      color:#a8a8a2
  }
  .hljs-bullet,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{
      color:#89c7f0
  }
  .hljs-code .hljs-selector-class{
      color:#aaf
  }
  .hljs-emphasis,.hljs-stronge,.hljs-type{
      font-style:italic
  }
  .hljs-function,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-symbol{
      color:#7c5b32
  }
  .hljs-subst,.hljs-tag,.hljs-title{
      color:#ffb560
  }
  .hljs-attribute{
      color:#a37942
  }
  .hljs-class .hljs-title,.hljs-params,.hljs-title.class_,.hljs-variable{
      color:#88f
  }
  .hljs-addition,.hljs-link,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-tag,.hljs-template-variable,.hljs-type{
      color:#379443
  }
  .hljs-comment,.hljs-deletion,.hljs-meta{
      color:#797878
  }
  .hljs-built_in {
      color:#55aaff
  }
  

• the new style should have been applied :D