Vim syntax highlighting for Hugo HTML templates

[jm3]

Fellow vim users: how are you setting up your vim language for editing Hugo HTML templates? Do you use vim-go or something else? Is there a syntax-highlighting plugin I’m not aware of? I was surprised that syntax highlighting in vim only barely works because Hugo seems like it appeals to a sort of vim / command-line power user, and I know the project has been around for a few years. Maybe the nested syntax is just too gnarly to easily highlight?

There is one vim plugin (vim-hugo-helper) listed on the Hugo editor plugins page which doesn’t do syntax highlighting, and Google hasn’t suggested that other better plugins exist. I know that Hugo uses Go’s html/template, and the vim-go plugin technically does syntax highlighting, but not really — for some reason, only attribute strings are highlighted (i.e. not tags, elements, comments, etc.)

Here’s how mine looks:

Is anyone interested in pairing on a PR for vim-go to supercharge the syntax highlighting?

[ju52]

Look at the last entry in

Enabling markdown highlighting in Vim

[bep]

Not sure what vim-go is written in, but I would recommend look at either:

• Chroma (solid Go template + HTML support)
• Visual Studio Code has surprisingly good support with an extension (by @budparr – I think he ported it from some other platform)

[maiki]

The text you are showing is from https://github.com/jm3/todayilearned/blob/39c7664299e0e341bfd3ae314c07b5aa154fd4be/layouts/shortcodes/img.html

<div class="picture">
  {{ if .Get "caption"}}
  <figure>
  {{ end }}
    <picture>
      <!-- Large screens -->
      <source
        media="(min-width: 535px)"
        data-srcset="{{ .Get "src" }}.{{ .Get "type" }} 1x,
                     {{ .Get "src" }}@2x.{{ .Get "type" }} 2x">
      <!-- Small screens -->
      <source
        media="(max-width: 534px)"
        data-srcset="{{ .Get "src" }}-sm.{{ .Get "type" }} 1x,
                     {{ .Get "src" }}-sm@2x.{{ .Get "type" }} 2x">
      <!-- Fallback -->
      <img
        data-src="{{ .Get "src" }}.{{ .Get "type" }}"
        data-srcset="{{ .Get "src" }}@2x.{{ .Get "type" }} 2x"
        alt="{{ .Get "alt" }}"{{ if .Get "caption"}} class="lazy"{{ end }}
        >
    </picture>
  {{ if .Get "caption"}}
    <figcaption>{{ .Get "caption" }}</figcaption>
  </figure>
  {{ end }}
</div>

I use neovim, and here’s a screenshot of my syntax highlighting:

[jm3]

Sorry, I posted my first screenshot above with a pretty dull theme, so it sort of obscured my main point, which is that the Go syntax — e.g. the conditionals — is not being highlighted. You can see this in your screenshot by looking at the conditional at the bottom that’s wrapped around the <figcaption> element.

I just installed Neovim, thanks for the tip. By running nvim-from-vim I was able to use my complete vim plugin & configs as-is by only changing only one line. Thank you!

PS. how did you ID the exact file that code was from so quickly ?

[maiki]

@jm3

PS. how did you ID the exact file that code was from so quickly ?

Profile link to GitHub link to hugo-blog repo and searched for class = picture.

Next time it would be faster if you linked to the file, or copied the code into the post. Easier on us troubleshooters.

[jm3]

That is some impressive detective work. Sorry to have sent you on a hunt, next time I’ll be sure to reference a more specific code sample. Thanks again for the Neovim suggestion.

[Grob]

Just as a side note:

As I only need the syntax and indentation for gohtmltmpl from vim-go (just two files) I use this simple script to detect the filetype:

function DetectGoHtmlTmpl()
    if expand('%:e') == "html" && search("{{") != 0
        set filetype=gohtmltmpl 
    endif
endfunction

augroup filetypedetect
    au! BufRead,BufNewFile * call DetectGoHtmlTmpl()
augroup END

Checks if file extension is html and if file contains search term {{

Maybe someone can use this.

[rsolva]

Hi @Grob, could you write out the steps go get this to work in (n)vim? Do you have the whole vim-go plugin installed or have you extracted the two relevant files only? Where do you apply your script?

My nvim setup is very close to the default with only a few minor customization. I like to keep things simple, but it would be lovely to get correct syntax highlighting when working with hugo template files!

[Grob]

Hi @rsolva!

Just put the code posted above in init.vim (or maybe a linked autogroups.vim file).

Then open a Hugo/Go template file in Neovim, press : and enter set ft?. This should prompt:

filetype=gohtmltmpl

Then you can install the whole plugin or just download the needed files and put them in the corresponding folders in e.g. ~/.config/nvim/.

I use these files only:

~/.config/nvim/ftplugin/gohtmltmpl.vim
~/.config/nvim/indent/gohtmltmpl.vim
~/.config/nvim/syntax/gohtmltmpl.vim

Good luck!

[rsolva]

Thanks @Grob, I got this to work by installing the whole Go plugin and adding your code snippet in init.vim. When I tried adding only the 3 files you mentioned, I got errors however. I can live with having the whole Go plugin installed

Thanks for your help!