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:
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):
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?
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.
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
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:
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.
