How to use highlight shortcode with <!--more-->?

While writing a Hugo tutorial, I noticed that <!--more--> seems to disappear when using the highlight shortcode.

Here is an example:

{{< highlight md >}}
---
date: "2024-10-20T11:58:09+03:00"
draft: true
title: "Example"
---
Summary
<!--more-->
Content
{{</ highlight >}}

When this is rendered, <!--more--> disappears.

Is there a way to escape the more tag or is this a bug in the highlight shortcode? :thinking:

This is the manual summary delimiter. looks like that’s brute force deleted without considering any context. Happens also outside of a shortcode - so could be considered as a bug

You may as a workaround add a second delimiter somewhere but ofc this will affect the .Summary for that page

like this

# Page Content

<!--more-->

{{< highlight md >}}
---
title: test
---
Summary
<!--more-->
Content
{{< /highlight >}}

or even in the code block

Page Content

{{< highlight md >}}
---
title: test
---
Summary
<!--more-->
<!--more-->
Content
{{< /highlight >}}
1 Like

Thank you! It never came to my mind to use <!--more--> twice. This workaround solves my problem. My goal was have a highlight block that shows an example of how to manually define a summary using <!--more-->. That is why it was important to have it visible for the readers.

I added an issue for this: <!--more--> does not show inside highlight shortcode · Issue #12973 · gohugoio/hugo · GitHub

If your content format is Markdown, use a fenced code block instead of the highlight shortcode, and create a shortcode to insert the summary separator.

layouts/shortcodes/more.html

&lt;!--more--&gt;{{- /**/ -}}

example.md

```text
foo
{{< more >}}
bar
```

foo `{{< more >}}` bar
```
2 Likes

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.