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.