Using toc with shortcode

Hi. My problem is the following

I use a shortcode that can contain headers (h2-h6), but they don’t fall into TableOfContents. You can somehow make it so that the headers from shortcode also fall into TableOfContents

Hi, AFAIK that’s a known shortcoming of hugo. We ended up using a custom toc builder as a workaround.
Search the forums for possible solutions, for example see this thread: Create a custom page TOC ("mini TOC") with Javascript
(There is another thread with a solution that does not use javascript, but can’t find it at the moment.)

I believe you need to use the {{% ... %}} shortcode syntax as stated in Shortcodes with Markdown:

In Hugo 0.55 we changed how the % delimiter works. Shortcodes using the % as the outer-most delimiter will now be fully rendered when sent to the content renderer (e.g. Blackfriday for Markdown), meaning they can be part of the generated table of contents, footnotes, etc.

2 Likes

You should. But you should also be very careful about how much you markdownify “down the line”. Doing it twice (if you for instance nest shortcodes) will lead to issues. Search for goldmark unsafe in that case (sounds worse than it is, but it’s a “hack” imho). I don’t have a real life example to explain, but it’s kind of a learned behaviour by now :wink:

2 Likes

So far I made it easier, but collectively

I use two different shortcodes so that the title appears in the md file.

This works for me

{{< test1 >}}
## Title
{{< test2 >}}

This is an obvious life hack, but it may come in handy for someone