Hugo site syntax highlighting working locally but not through Netlify

I built a static site through Hugo. Site looks different through Netlify as compared to running it locally. A specific example is syntax highlighting for YAML. In the code I do the following:

```yaml
---
- name: Getting started
  hosts: iosxe
  gather_facts: no

  tasks:
  - name: GATHERING FACTS
ios_facts:
  gather_subset: hardware
```

So I’m “tagging” my snippet as a YAML snippet.

When I run hugo locally:
Screenshot 2020-05-05 at 08.41.08

As a new user I can only add one image in my post here, so please have a look at the first snippet on this page to see how it looks like when it’s deployed through Netlify.

To have the syntax highlighting, I have added in the config.toml file the following (as per the Hugo documentation):

pygmentsCodefences = true 
pygmentsStyle = "arduino"

So I would indeed expect the Netlify hugo build command to look at that setting and apply it. But it looks like this is not happening (only for yaml as it seems)

The strange thing with all this, is that the syntax highlighting works for Python code (both locally and via Netlify).

Is this something YAML specific? Am I not setting it correctly?

hi there, could you maybe share a screenshot of what you are expecting it to look like vs what it actually looks like? thanks.

Sorry for the late reply. As a new user I could not upload two images in that post so I have done it through imgur. See here. First one is as it looks when deploying the site through Netlify. Second images is when I run the site locally through ‘hugo server -D’.

I would want the colour highlighting to work through Netlify as well. Note: this only seems to be the case for YAML files. Here is an example for Python. As you can see, this works same on both Netlify as localhost.

Hey @wiwa1978, are you still running into this? When I visit, i.e., https://blog.wimwauters.com/networkprogrammability/2020-05-08_ansible_iosxe_napalm/, the YAML looks correctly highlighted… let us know! :slight_smile:

Hi, I have the same issue in my website. It’s rendering locally in both Chrome and Firefox, but I can’t get the syntax to work when deployed.
I also get some “Insecure mixed content detected in matiasandina” emails, not sure if related. Appreciate any help

A link to your webpage would help more and one to your repo would be the best.

Sorry about that.
This is my site matiasandina.netlify.com/
This is my repo github.com/matiasandina/webpage

I have narrowed it down to your JavaScript being the cause.

As you can see, your JS recourses are not loading on the live website:

image

And you’re not using Hugo’s inbuilt syntax highlighting, instead you’re using some JS library (prism.js to be exact). Thus the problem. If you fix these JS errors, the highlighting should work.

Indeed, I am using prism.js for the syntax. Is this not compatible with netlify at all?
I would like to use this way, if possible, because the theme I am using has that by default and it was working as intended for my use.

No one said anything about it being incompatible. It’s a simple JavaScript file, of course it’s compatible.

If you see my screenshot above, it will answer your question of why it’s not working. To explain a bit, the integrity that you (or your theme) are applying on the JavaScript file is not CORS enabled. I’d say, remove the integrity attribute (themes/hello-friend-ng/layouts/partials/javascript.html line 5) and it might work.

I am a total noob on this, I will try your suggestion, thank you so much!

Commenting the whole line didn’t work for me, but removing the “integrity” part of the line worked!
Thank you so much agani!

1 Like