Is there a way to *inline* syntax highlight short code snippets?

[kaushalmodi]

Hello,

I tried out this, but Hugo renders that code block in a separate HTML block, not inline like a span tag would.

I would like to inline syntax highlight super short code snippets
where possible.

I am attempting to inline
{{< highlight emacs "linenos=inline" >}}(message "this highlight shortcode"){{< /highlight >}}.

But it is creating a paragraph break around it.

Is there a way to fix it, may be using some custom shortcode?

This is what it renders to: Inline Highlight shortcode | Hugo MWE

Recipe to quickly reproduce this issue

git clone https://gitlab.com/hugo-mwe/hugo-mwe
cd hugo-mwe
git checkout inline-highlight-sc-attempt
./srv.sh

[alexandros]

Try using Inline Shortcodes or a Shortcode that makes use of .Inner

From what I’ve seen a way to stop the creation of extra paragraphs is to bypass Goldmark.

[kaushalmodi]

I tried using this custom “hl2” shortcode:

{{- transform.Highlight .Inner (.Get 0) -}}

That didn’t help either (you can see the preview if you refresh that same page linked above).

[alexandros]

Then try an Inline shortcode variation.

The general idea is that the highlight element you try to output does not get processed by Goldmark.

[kaushalmodi]

Nope, still no dice.

I believe I am using inline shortcode here correctly because site at least renders, but I still see the code wrapped in div and pre tags and that’s the problem.

I am attempting to inline {{< hl3.inline >}}{{- transform.Highlight `(message "this hl3 shortcode")` "emacs" -}}{{</hl3.inline >}}, but still no luck.

Also, I don’t know how to define inline shortcode definitions that accept .Inner and arguments using .Get 0. For now, I hardcoded both in the above inline shortcode example, and that didn’t work.

You can see the preview if you refresh that same page linked above.

---

So looks like this will be a feature request for Hugo?

[alexandros]

@kaushalmodi

So looks like this will be a feature request for Hugo?

Perhaps someone else in the forum has a workaround.

If not, then open a GitHub issue.

[kaushalmodi]

I found a hack… replaced the div tag with span and removed the pre tag… and now it works as I want.

Updated Inline Highlight shortcode | Hugo MWE

---

Perhaps someone else in the forum has a workaround.

I would want the ox-hugo package to export Markdown with Hugo-builtin shortcodes if possible so that a user doesn’t need to add this hack to their site to make the inline code block syntax highlighting work.

[kaushalmodi]

I have opened this issue:

[feature] New attribute for code fence and highlight shortcode to allow span tag like inline but syntax highlighted code

[kaushalmodi]

This feature was implemented by bep today. Thank you!

The highlight shortcode will now understand hl_inline=true parameter.

This will work now:

I am attempting to inline
{{< highlight emacs "hl_inline=true" >}}(message "this highlight shortcode"){{< /highlight >}}

which will render as below:

---

The relevant commit is markup/highlight: Add hl_inline option · gohugoio/hugo@d863dde · GitHub. So this feature will be available in Hugo v0.101.0 .