Table of Contents
Hugo is a popular static site generator known for its speed and flexibility. Many developers choose Hugo to create technical blogs because it easily handles code snippets and syntax highlighting. This article explores how to set up a Hugo site with enhanced code highlighting features.
Setting Up Your Hugo Site
First, install Hugo on your local machine. You can download it from the official website or use package managers like Homebrew or apt. Once installed, create a new site with:
hugo new site my-technical-blogNavigate into your site directory and choose a theme that supports code highlighting. Many themes in the Hugo themes directory are suitable for technical blogs.
Configuring Syntax Highlighting
Hugo uses Chroma for syntax highlighting. To enable and customize it, modify your config.toml file with the following settings:
[markup]
highlight = true
noClasses = false
style = "monokai"
lineNos = true
lineNumbersInTable = true
These options enable syntax highlighting with the Monokai style, show line numbers, and use CSS classes for better customization.
Adding Code Snippets to Your Content
In your Markdown files, include code blocks using triple backticks and specify the language for proper highlighting:
```python
def hello_world():
print("Hello, World!")
```
When Hugo builds your site, it will render these snippets with syntax highlighting and line numbers, making your code easy to read and professional-looking.
Preview and Build Your Site
Run the following command to generate your static site:
hugo server -D
This command starts a local server where you can preview your blog with all code highlighting features. When ready, build the static files with:
hugo
Now, your Hugo-based technical blog with beautiful, highlighted code snippets is ready to be deployed!