Using shortcodes in html content

support
1

I struggle with using markdown inside a node (I hope I use the terms correctly).
example: I’d like to use hugo’s support to highlight code via the in-built shortcode highlight (described in https://gohugo.io/extras/highlighting/). Directly including it in the index.html file does not work.
other example: my index.html file contains a lot of content and I’d like to write the sections in markdown that can be included into the content after they are rendered.
is there a way to do this in hugo?

edit: my optimal setup would enable me to write a index.html file like this:

...
<head>
    {{ partial "head.html" . }}
</head>
    <body id="page-top" class="index">
        {{ partial "nav.html" . }}
        {{ render_as_cpp "example.cpp" . }}
        {{ partial "footer.html" . }}
    </body>
</html>
...
1 Like
2

I am confused about the {{ render_as_cpp "example.cpp" . }}, do you want to create a shortcode that gets a file name and highlights it?

3

the {{ render_as_cpp "example.cpp" . }} would be kind of nice and would mean:

  • get the content of example.cpp

  • render it by some equivalent of this:

    {{< highlight cpp >}}
    – file content –
    {{< /highlight >}}

  • insert it (include it) into the index.html file

4

my initial try was to use the shortcode directly in the index.html file but this seems not to be possible and I get an exception like:
template: theme/index.html:6: unexpected "<" in command

5

No, that doesn’t work; shortcodes are for content files (but there is nothing you cannot do in a template file that a shortcode file can).

What you can do, if all you want is a HTML file and do not need markdown content etc., you can do put the html directly into /content, so /content/test.html:

<html>
<h1>Test</h1>

{{< foo >}}
</html>

Will work and accessible at http://localhost:1313/test/ or http://localhost:1313/test.html if uglyUrls.

This is a somewhat hidden feature in Hugo.

As to reading the “example.cpp”, see https://github.com/spf13/hugo/pull/2008

I will probably wrap that up later today.

1 Like
6

I guess I’m still confused by the distinction of file types. With your suggestion I actually can write *.html files in content using shortcodes. Can someone clarify for me what is and what is not content?
still, I don’t see how to solve my original problem using the /content/ folder approach:
can I use it similar to a partial?
what would solve my problem is if I could write a partial that can use a shortcode :confused: