How can I display a code block within a shortcode?

support
1

Hello,
I have a shortcode that displays a callout box.

It worked fine for displaying a code block until I switched to using Markdown from Org format. Now, it doesn’t work. Here is the content of my shortcode:

{{- $calloutType := .Get 0 | default "note" -}}
<div class="callout {{ $calloutType }}">
  <p class="callout-title"><em>{{ $calloutType | upper }}</em></p>
  <p>{{ .Inner | markdownify }}</p>
</div>

And here’s the result:

result
result920×227 19.2 KB

It displays the fenced block itself rather than rendering the actual code block. This only happens when using Markdown. It worked fine with Org syntax

#+begin_src cmd
$ su -
#+end_src

Any idea where I could look to find the cause of this issue?

2

mmh, I cannot reproduce your problem, maybe I missunderstood something

having your shortcode in `/shortcodes/callout.html` 
{{- $calloutType := .Get 0 | default "note" -}}
<div class="callout {{ $calloutType }}">
   <p class="callout-title"><em>{{ $calloutType | upper }}</em></p>
   <p>{{ .Inner | markdownify }}</p>
</div>

  • calling it like that"

    {{< callout "note" >}}
The # sign means ... **something like that**
```
$ su -x sdcx
```
{{</callout>}}

  • produces

    <div class="callout note">
   <p class="callout-title"><em>NOTE</em></p>
   <p><p>The # sign means &hellip; <strong>something like that</strong></p>
<pre tabindex="0"><code>$ su -x sdcx
</code></pre></p>
</div>

which seems to work pretty well…???

Hint: with hugo 0.132+ you could also use an blockquote render hook of type alert and write something like that: (which formats nicer in visual studio code preview)

> [!NOTE] Note Title
>
> The # sign means ... **something like that**
> ```
> $ su -x sdcx
> ```
3

Your HTML output looks fine. For me, it only produces a paragraph, without the <code> tags. I have no idea why.

<p>```cmd$ su -```</p>

I would prefer using the shortcodes.

4

what’s the

  • content of your md file
  • involved layouts
  • any special settings in configuration (markup…)
5

Is the file extension still org ? It should be one of md, markdown or mdown.

Or you can set markup = 'markdown' in front matter, but I would change the extension instead.

See:

6

I’m using .md

It works inside a block quote:


> Block quote:
> ```cmd
> $ test
> ```

produces:

bq
bq895×162 5.26 KB

It occurs only when using the fenced block within my shortcode.

fb
fb1885×783 142 KB

7

I used your code and it works great. Try it:

git clone --single-branch -b hugo-forum-topic-52136 https://github.com/jmooring/hugo-testing hugo-forum-topic-52136
cd hugo-forum-topic-52136
hugo server
1 Like
8

Oh, me stupid. I had an org file inside /content/


/content
    + posts
             + 20241025-blog-post
                         index.md
    _index.org <-- I had to rename this outside one to _index.md

Now it works.

9

That’s a bug. That should not happen. A section’s content format should not automatically cascade down to descendant pages. I’ll log an issue. Thanks.

10 
# hugo version  
  hugo v0.135.0+extended freebsd/amd64 BuildDate=2024-09-29T15:55:47Z+0000 VendorInfo=freebsd

I’m using Hugo from the FreeBSD 14.1 repository. pkg install gohugo. I think it’s a bit outdated compared to the version on the official site. The only reason I opted for it because it auto-updates whenever a new version is published in the repository.

11

This behavior is (unfortunately) expected, and yet another reason to always use .Page.RenderString instead of markdownify.

At some point we aliased markdownify to site.Home.RenderString. So if the home page is an .org file, and the current page is an .md page, the markdownify function thinks its input is org instead of markdown.

There’s a similar issue here:
https://github.com/gohugoio/hugo/issues/9692

And I’ve added a comment that describes the problem you encountered:
https://github.com/gohugoio/hugo/issues/9692#issuecomment-2439044198

12

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