Written by Edd Turtle on makewithhugo.com
on

Changing the Syntax Highlighting Style in Hugo

When building a website using Hugo, you might want to customize the syntax highlighting to match your site’s overall aesthetic. Hugo uses Chroma, a powerful syntax highlighting engine, to provide code highlighting out of the box.

In this blog post, we’ll guide you through the process of changing the syntax highlighting style in Hugo using Chroma, with the help of the hugo gen chromastyles command.

1. Explore Chroma Styles

Chroma offers a wide range of built-in styles that you can use to customize the look of your code snippets. To see a list of all available styles, run the following command in your terminal:

1

hugo gen chromastyles --list

This will show you a list of available styles, such as ‘monokai’, ‘solarized-dark’, ‘dracula’, and many more.

View Themes (on xyproto.github.io)

2. Preview Your Preferred Style

To preview how your chosen style will look when applied to your code snippets, use the hugo gen command,

For example, if you want to preview the ‘dracula’ style, the command would be:

1

hugo gen chromastyles --style=dracula > syntax.css

This command generates a CSS file called ‘syntax.css’ in your project’s root directory. Open this file in your favorite text editor to preview the style’s CSS rules.

3. Apply the Style

To apply your chosen syntax highlighting style to your Hugo website, you will want to include it with your current style system. It will be either raw css or built with sass. Because we can’t see this, we’ll just show how to attach the css file itself.

Move the ‘syntax.css’ file to your project’s ‘static/css’ directory. If the ‘css’ directory does not exist, create it first:

1

mkdir -p static/css

1

mv syntax.css static/css/

In your project’s layout, add a reference to the ‘syntax.css’ file. Usually, this is done in the ‘head’ section of your layouts/partials/head.html file:

1

<link rel="stylesheet" href="/css/syntax.css">

Save your changes and rebuild your site with hugo.

Your chosen syntax highlighting style should now be applied to your code snippets.

#syntax #highlight #chroma #css #generate #theme #dracula
Author Edd Turtle

Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.

Tweet me! ☕   Buy me a Coffee

Related Posts

  • Using Parameters in Your Theme –
    In Hugo, you can access the parameters specified in the front matter of your content files (e.g., Markdown files) through your Hugo templates. These are called ‘Page-level Params’. This post explores how you can use these within your theme. We’ll be using an example of featured_image added our post below. 1 2 3 4 5 --- title: "My Post" date: 2023-06-01 featured_image: "/img/2022/goldie1.jpg" --- You can then use this parameter when editing your theme using the template tag shown below:
  • Add Adsense Ads to Your Posts –
    This post sets out how you can add your Google Adsense code to your blog posts. As this is MakeWithHugo, we’ll be adding them to our Hugo site. You’ll need a few things before starting, an Adsense account, the snippet of code from Adsense and knowing where you want to put them (or auto ads for the easy option). There’s a few different ways to achieve this, based on where you want them.
  • Add a 404 Not Found Page –
    In an ideal world, every web page would exist, but sometimes links go to pages that doen’t exist. This is why we make “404 - not found” pages. In Hugo you can do the same. Many of our sites are hosted with Netlify which also support these files - automatically returning the correct http status code for them. To make yours, you can add a file into your layouts folder.