will
January 21, 2023, 10:31pm
1
This:
{{< highlight go-text-template >}}
{{</* paige/youtube
controls=true
end=20
fullscreen=true
loop=true
mute=true
start=10
title="My title"
video="dQw4w9WgXcQ"
*/>}}
{{< /highlight >}}
Results in this:
Above, note that the “end” param is bolded like a Boolean value, and not like the other param names.
I’m not sure whether this is a shortcode highlighting issue or a template highlighting issue, so I thought I would start here.
Hugo:
hugo env
hugo v0.110.0+extended darwin/amd64 BuildDate=unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.19.5"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.2.4"
Yeah, I’m not sure what do with this; end is obviously picked up as a keyword instead of a key.
The Chroma lexer is for Go templates, not Hugo templates. The lexer has no concept of shortcodes or Hugo’s functions and methods.
It seems like we would need a lexer tailored to Hugo.
You can try to use other lexers (for this case HTML looks mostly good except for the namespace), or simply text.
And the final visual result also depends on the highlighting style.
3 Likes
will
January 22, 2023, 11:16pm
4
Perhaps this could be addressed with a Hugo lexer that supports shortcode syntax, so we can do {{< highlight hugo >}}.
This is coming up in the documentation I’m writing for a Hugo theme in its example site. While it’s not a deal-breaker, it would be good for it to look nice. I assume the root problem is the less-than and greater-than symbols in the syntax, which doesn’t seem that complicated to accommodate.
will
January 22, 2023, 11:19pm
5
@septs For what it’s worth, I settled for documenting shortcodes by having an example, like in my screenshot above, followed by a <dl> describing each param. For example: GitHub - willfaught/paige: Powerful, pliable pixel perfection. An advanced Hugo theme.
