Hugo Netlify - No Code Syntax Highlighting

3 years ago

source link: http://brianyang.com/hugo-netlify-no-code-syntax-highlighting/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Hugo Netlify - No Code Syntax Highlighting

March 03, 2020

This tripped me up for an unusually long period of time. I'm documenting this here for anybody else who faces the same problem. I wasn't getting code syntax highlighting when deploying to Netlify.

TL;DR

update version of Hugo on Netlify by adding a netlify.toml file

I searched for:

hugo serve highlights code syntax

I wanted to see if somebody else had this same issue. When running hugo serve then the code syntax was showing up. Came across a bunch of posts and none of these pointed me to the write direction. Looking at the deploy config in Netlify, it was running Hugo --gc --minify.

So I ran a production build locally, and noticed I wasn't getting colors. Bingo, I had reproduced the issue locally and was getting closer. So I did some more reading and learned about Chroma. Running this command would now show syntax highlighting after running a production build, locally.

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

This generated a syntax file in the root, but it still wasn't showing on Netlify.

So it had nothing to do with adding custom css or context.production.environment configuration in config.toml. Didn't add environment variables to change the Hugo version, though that works too.

In the end the problem was solved by adding a netlify.toml file.

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.65.3"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.65.3"
HUGO_ENV = "production"

[context.deploy - preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy - preview.environment]
HUGO_VERSION = "0.65.3"

[context.branch - deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch - deploy.environment]
HUGO_VERSION = "0.65.3"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

This was explained clearly in the Hugo docs but I skimmed past this part because I thought it wasn't relevant.

https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

Checkout the Algorithms and Data Structures site I've created at:

https://algorithms-and-data-structures.netlify.com/

Recommend

152

Github github.com 6 years ago
Cache

GitHub - vim-python/python-syntax: Python syntax highlighting for Vim

Python syntax highlighting for Vim This is an enhanced version of the original Vim 6.1 Python syntax highlighting python.vim by Neil Schemenauer. Features Enhanced highlighting for: Strings...

scotch.io 3 years ago
Cache

VS Code April Update is Out w/ Faster Syntax Highlighting

It's incredible what VS Code is able to do from month to month. The dev team has consistently put out features and updates every month. We've got 1.45 out this month with some ni...