Code in highlight shortcode rendered as markdown

support
,
1

(hugo version 0.145.0)

I’m having some issues with code inside the highlight shortcode being rendered as if it was markdown, not verbatim source code. I.e. when I for instance reference Python dunder methods, like __init__, the absolutely essential underscores are interpreted as markdown formatting and replaced with html <strong>-tags.

For example

{{< highlight python "hl_inline=true, lineNumbersInTable=false" >}}__init__{{< /highlight >}}

gets rendered as init rather than as __init__.

It also happens when I use my shortcut-shortcode pyline. pyline.html:

{{ highlight .Inner "python" "hl_inline=true, lineNumbersInTable=false" }}

I.e. when writing

{{< pyline >}}__init__{{< /pyline >}}

it also gets rendered as init rather than as __init__.

I assume there must be a good reason for this but I simply cannot fathom when you would ever want this behavior, especially since there seems to be no way of manually escaping the underscores, making it impossible to correctly highlight any code that uses characters also used by markdown. What am I doing wrong here?

2

Are you using the embedded highlight shortcode, or did you roll your own? If the latter, please share it.

3

I’m using the embedded one. Even pyline simply calls the embedded highlight.

4

I am unable to reproduce the problem. Try it:

git clone --single-branch -b hugo-forum-topic-53952 https://github.com/jmooring/hugo-testing hugo-forum-topic-53952
cd hugo-forum-topic-53952
hugo server
5

What does this mean? A shortcode can’t “call” another shortcode.

6

Hmm, then what is my shortcodes/pyline.html actually doing here?

{{ highlight .Inner "python" "hl_inline=true, lineNumbersInTable=false" }}

It’s working as well as the embedded highlight, but maybe just by creating it I broke something?

7

It’s calling the highlight FUNCTION.

8

Where are you writing this?
How does what you have done compare to the test site I provided?

9

Are you doing something like this anywhere?

{{ .Content | markdownify }}
10

Ah, sorry, I did not realize there was a difference between the highlight shortcode and the highlight function. But either way, both shortcodes (the embedded highlight and my home-rolled pyline) render the same way. I’m using both in regular markdown content-files… Well, hmm, I thought I was but, no, actually I’m not in this case and I think that’s the problem. Both shortcodes actually work fine in regular markdown content-files! (As did your example.)

However, when using them in markdown files that are then included into other markdown files using the shortcode below (found somewhere on here, I believe) I get the behavior described in my opening post.

shortcodes/include.html:

{{ with site.GetPage (.Get 0) }}
  {{ .RenderShortcodes }}
{{ end }}

I still don’t really understand why this happens, but the problem is probably caused by that include-shortcode that has otherwise served me well until now.

11

how are you calling that shortcode?

At this point I have no idea what’s wrong. I suggest you share your project repository to save us both some time.

12

I’m calling it as {{% include "lab5_part1.md" %}} from the _index.md-file in the same directory.

Personally, I’d love to share the repository but I don’t think I can. I sort of inherited the whole project after my colleague who built it suffered a stroke and I’m not comfortable sharing what to 99% is not my work without consulting with him first and he’s on disability leave for the foreseeable future. I can see about making a MWE from the template though.

13

I still can’t reproduce it, doing exactly what you did. Somehow this is getting double-rendered, and without a reproducible example I am unable to help.

14

Totally understandable. Many thanks for trying though! At least I know where the issue happens now. I’ll see if I can put together a MWE and will revive the thread once that’s done. It’s 1.40 AM here though so I should probably give up for tonight and pick it up tomor… Uh, later today. Again, many thanks!

15

I finally had some time to work out what is actually happening during the build process in the code I’m working with and I managed to put together an equivalent example. I believe that what I’m really struggling with is nested shortcodes. I can’t seem to work out how to stop the output form the highlight shortcode getting rendered as markdown when the shortcode it is nested within gets rendered. I might be making a really obvious mistake but my mental model of hugo is still under construction.

16

It would be helpful to know what you are trying to do.

I understand that you want to deeply nest, but what do you want each shortcode to do?
Do you need to include Markdown after an opening acc tag?
Do you need to include Markdown after an opening div tag?

How you intend to use a shortcode dictates both the way you call it and how you code it.

17

I am working with instructions for a lab assignment. The assignment has multiple parts which I want to put inside an accordion. Here’s an example of what I’m trying to do, it’s from a different course but uses the same hugo theme and build system originally put together by my colleague: 729G87-HT24 > Assignment 4

So the answer is yes to both questions, though the only markdown in an acc that is not also in a div is ##-headings that acts as the heading for each accordion cell in the accordion. In the example page above, the code is currently used like this (with the actual content removed for brevity):

{{% acc %}}

## Exercise 1 - Your first Web Component

{{< div >}}

<!-- Markdown describing Excercise 1. -->

{{< /div >}}

## Exercise 2 - Toggle button

{{< div >}}

<!-- Markdown describing Excercise 2. -->

{{< /div >}}

## Exercise 3 - Accordion

{{< div >}}

<!-- Markdown describing Excercise 3. -->

{{< /div >}}

{{% /acc %}}
18

I’ve had a couple of students getting confused by there being syntax highlight in code blocks but not in inline code snippets, and I found the highlight-shortcode but when I use it inside such an accordion, it seems to get rendered as markdown after it’s already been rendered as code. The repo I posted in my previous comment contains a very paired down example where I’m trying to do the same without CSS or JS or anything else confusing the matter.

19

I don’t think what you want to do is possible.

At a basic level, this example rendered by the CommonMark reference implementation demonstrates the challenge.

1 Like
20

Huh, maybe not. It doesn’t seem like that strange of a use-case to me. It always just worked for code blocks (I added code blocks to the example repo as a sanity check for myself, and they render just fine). In my naivety, I assumed that it would be fairly simple for inline code as well. As I said though, my mental model of hugo (and rendering Markdown for that matter) is very far from complete and there are probably fundamental issues that I’m simply unaware off. Thanks for humoring me anyway!