published on 30.08.2020
edited on 23.01.2021

Mainly there are two ways of syntax highlighting. One is server-side and the other is client-side. Names are already self-explanatory, client-side highlighting occurs on the user’s browser via javascript. Highlight.js is one of the popular libraries which covers a crazy amount of languages. On the other hand, in server-side syntax highlighting, the styling information is already embedded in the HTML. We add syntax styling information before serving the website using some programs. Hugo’s default highlighter is Chroma which is written in Go and based on Pygments. So, I chose to go with the default option since it’s faster and I don’t like to add dependencies.

I’ve set highlight options in config.toml like this:

1
2
3
4
5
6
7
8
9
[markup.highlight]
      codeFences = true
      guessSyntax = true
      hl_Lines = ""
      lineNoStart = 1
      lineNos = true
      lineNumbersInTable = true
      tabWidth = 4
      noClasses = false

Normally you can add the style option style = monokai but I had to include a custom highlight.scss because I wanted to make other styling changes, e.g. inline code blocks, borders, margins, and font. Chroma uses hard-coded styling (inline CSS in HTML), to be able to edit CSS classes you need to tell chroma to use CSS classes instead of embed styling in HTML.

1
pygmentsUseClasses = true

Now, you have to use a custom CSS file for styling. You can generate it by:

1
hugo gen chromastyles --style=monokai > syntax.css

Highlighting for code fences isn’t enabled by default. So, you need to add this line too in your config file.

1
pygmentsCodefences = true

By the way, we are still using Chroma, not Pygments. Don’t let those 2 lines confuse you. Lastly, the original docs: Hugo Docs: Syntax Highligting which I believe lacks some detail.

You are reading the 14th of 19 episodes in Hugo.
Published on 30.08.2020 by Mert Bakır. Last update on 23.01.2021 with commit 3a172e2.
hugo
#code-highlighting #hugo #web-dev
Next episode:
Tips and Tricks for Hugo
published on 29.08.2020

My experience with Hugo has been pretty good so far. It’s fast and flexible. Ever since I started using Hugo, I’ve been improving my website with small tweaks. In this post, I am going to share some tricks and workarounds I’ve found online while working with Hugo. Besides that, …

published on 18.09.2020
edited on 13.02.2021

First of all, if you don’t know about data files, you may want to start reading from data files in hugo. This post is about a solution for a very particular problem. How can we use “group by” for the data from data files? Let me clarify with an example. I was creating a single page …

published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning …

published on 24.01.2021
edited on 11.06.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 23.01.2021
edited on 11.06.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 31.12.2020
edited on 26.06.2021

I’ve, recently, published a blog post called Perfect Workflow for Publishing Python Notebooks. I talked about some of the benefits of using Rmarkdown and reticulate. In this post, I’ll try HTML widgets and explain how we can embed those in our blog post using nothing but R. […] 1 …

published on 05.12.2020

Resume A4 is a side project of mine. It’s one page Hugo Theme that allows you to write your resume in YAML format and keep track of it using git. Also, you can publish it online as a static site using GitLab, GitHub Pages, Netlify, or some other service you are familiar with. A few months …

published on 30.11.2020

I’ve been searching for a good workflow for publishing Jupyter or RMarkdown Notebooks as static blog posts. I think I’ve found the optimal solution for my use case. In this post, I’ll explain my workflow and why chose this way with examples. […] In reality my main purpose to …