Syntax highlighting not working, hugo not found in language modes

[Jamie Gaehring]

I just installed the extension but I'm not getting any syntax highlighting in my Hugo project. I tried restarting VSC but no luck. I also checked in the language modes but didn't see any new modes I could activate (just HTML and Go modes).

Do I need to have a specific configuration file or something for it to work? The project's directory structure is a little weird, not sure if the extension is able to detect it's a Hugo project.

Thanks in advance for any help. Here's my system info:

Version: 1.36.1
Commit: 2213894ea0415ee8c85c5eea0d0ff81ecc191529
Date: 2019-07-08T22:55:08.091Z
Electron: 4.2.5
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Linux x64 4.15.0-54-generic

[Omar Abel Rodríguez-López]

I had the same problem as you did, @jgaehring. The only option left was to modify the extension files directly. In the extension directory, in the file src/syntaxes/hugo.tmLanguage.json, at the beginning of the file, I added/modified this fragment

{ 
  "name": "hugo-html",
  "scopeName": "text.html.hugo",
  "comment": "Hugo Templates",
  "fileTypes": [
    "html",
    "md"
  ],

Then I modified the package.json file, which ended up like this

"contributes": {
	"languages": [
		{
			"id": "hugo-html",
			"aliases": [
				"Hugo Templates (HTML)"
			],
			"extensions": [
				".html",
				".htm",
				".xhtml"
			],
			"configuration": "./hugo.configuration.json"
		}
	],
	"grammars": [
		{
			"language": "hugo-html",
			"scopeName": "text.html.hugo",
			"path": "./src/syntaxes/hugo.tmLanguage.json"
		}
	],
	"snippets": [
		{
			"language": "hugo-html",
			"path": "./src/snippets/html.snippets.json"
		},

As you can see, I ended up adding a new language mode, hugo-html (this was a trial-and-error procedure, I don't know much about extension development). If you reload the editor after making the changes, then the new language mode should appear: Hugo Templates (HTML) (hugo-html), and the syntax highlighting should work fine also.

Hope this helps.

[Jamie Gaehring]

Wow, that worked for me too!!

Thanks so much, @oarodriguez , I don't think I'd have figured that out.

[Bud Parr]

Hi guys. I just updated the extension with some new snippets. That means if you upgrade your changes are going to break. I can't replicate your issue, but I'd like to understand your changes to see if there's something that can be done. It looks like your creating Hugo has a separate syntax from HTML. Do you have to then assign your HTML files to the Hugo syntax?

[Omar Abel Rodríguez-López]

Hi @budparr. The issue was that after installing the extension (the very first time) syntax coloring worked fine. If later I opened a new template the syntax coloring was not working anymore. The solution I found (after several trial-and-error attempts) was defining a new language id in package.json for language and grammar: hugo-html. Also, I used this same id as the name in the hugo.tmLanguage.json file. Only this way I got a new Hugo Templates (HTML) (hugo-html) language mode. When I select this language mode, syntax coloring works, but if I select plain HTML (html) it does not work.

Before

After

[Tom Parker-Shemilt]

Any progress on getting these changes folded in as I'm hitting this one as well?

[Cory Richerson]

+1 for this issue.

Add syntax highlighting for shortcodes in markdown files.

This doesn't seem to be true-- this extension only adds snippets for markdown. It adds syntax AND snippets for HTML.

See this comment on this very issue.

[Bud Parr]

We've never been able to replicate this issue. I'd venture that you have some other plugin that's creating a conflict on HTML files.

@hammypants You're right there isn't syntax highlighting for shortcodes in markdown files. That's a separate issue. Can you submit a separate issue (or P.R.), please?

[Tomy Hsieh]

I had the same problem as you did, @jgaehring. The only option left was to modify the extension files directly. In the extension directory, in the file src/syntaxes/hugo.tmLanguage.json, at the beginning of the file, I added/modified this fragment

{ 
  "name": "hugo-html",
  "scopeName": "text.html.hugo",
  "comment": "Hugo Templates",
  "fileTypes": [
    "html",
    "md"
  ],

Then I modified the package.json file, which ended up like this

"contributes": {
	"languages": [
		{
			"id": "hugo-html",
			"aliases": [
				"Hugo Templates (HTML)"
			],
			"extensions": [
				".html",
				".htm",
				".xhtml"
			],
			"configuration": "./hugo.configuration.json"
		}
	],
	"grammars": [
		{
			"language": "hugo-html",
			"scopeName": "text.html.hugo",
			"path": "./src/syntaxes/hugo.tmLanguage.json"
		}
	],
	"snippets": [
		{
			"language": "hugo-html",
			"path": "./src/snippets/html.snippets.json"
		},

As you can see, I ended up adding a new language mode, hugo-html (this was a trial-and-error procedure, I don't know much about extension development). If you reload the editor after making the changes, then the new language mode should appear: Hugo Templates (HTML) (hugo-html), and the syntax highlighting should work fine also.

Hope this helps.

I bumped into the same problem today and made a fork based on this idea. If anyone needs it, you can clone it and install it with the instruction I updated on README.

@budparr Let me know if you'd like this to be turned into a PR.

[Tomy Hsieh]

Did some research on this lately. Wanna share my thoughts on this.

TL;DR: I end up using Go Template Support, cause it has better syntax highlight even after I made this extension work.

Hugo Language and Syntax Support:

Go Template Support:

---

If you still want to use this extension, you'll have to find out what's causing the conflict. This can be done by doing a bisect extension test on VSCode.

Another thing worth mentioning is that when you "uninstall" an extension from VSCode, it does not actually get removed from your device. The extension still lies in your directory; VSCode simply "unregisters" it from your profile. In this case, say you installed some modified version of an extension, and you want to test out whether a clean reinstall would fix the problem. You can not just simply do that on the extension management tab because you're actually unregistering the extension and registering it back again. You have to find where the extension is installed and remove it manually.