Hugo

Vim syntax highlighting for Hugo HTML templates

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?

Look at the last entry in

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)
1 Like

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:

2 Likes

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 :laughing: ?

1 Like

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. :slight_smile:

1 Like

That is some impressive detective work. :slight_smile: 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.

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.

2 Likes