Embeding a multi line markdown variable in a html shortcode

Question

I'm trying to display some information about a person including Picture & Biography. The biography comes from a user controlled source that accept markdown. I managed to print multiline input without breaking the page by using "`" around the text. But I would prefer if the final output used the original markdown.

for example

bio="Here are some achievements
- First thing
- List item
- and this is **really** important"

is currently rendered as

"Here are some achievements - First thing - List item - and this is **really** important"

I would like it to be rendered as

Here are some achievements

First thing
List item
and this is really important

my html shortcode looks like this

<table>
  <tr>
    <td VALIGN=TOP rowspan="2" width="170"><img src="{{ .Get "img"}}" width="150"> </th>
    <td width="600" height="30"><b>{{ .Get "name"}}</b>, <i>{{ .Get "title"}}</td>
  </tr>
  <tr> 
    <td VALIGN=TOP>{{ .Get "bio" }}</td>      
  </tr>   
</table> 
<br>

not sure how to create another shortcode that would accept markdown (I read about {{% %}} but not sure if the template needs to be print_bio.html or print_bio.md and how I can call it from within my current html shortcode or at least have it position at the right place in the html table.

Any help/pointers would be appreciated.

Scoubi · Accepted Answer · 2024-07-14 19:28:46Z

Well, I asked ChatGPT and it gave almost the right answer. With other articles I've read before, I was able to make it work.

The shortcode is now like this

</style>
<table>
  <tr>
    <td VALIGN=TOP rowspan="3" width="170"><img src="{{ .Get "img"}}" width="150"> </th>
    <td width="600" height="30"><b>{{ .Get "name"}}</b>, <i>{{ .Get "title"}}</td>
  </tr>
  <tr> 
    <td VALIGN=TOP>{{ .Inner | markdownify }}</td>      
  </tr>  
  <tr> 
    <td>{{ .Get "social" }}</td>      
  </tr>  
</table>

Note: markdownify is case sensitive. It will fail if you capitalize it!

And in the .md file it looks like this

{{< speaker img="/img/john-doe" name= "John Doe" title="President, Doe Inc." >}} 
Here are some achievements
- First thing
- List item
- and this is **really** *important*
{{< /speaker >}}

So notice the {{ .Inner | markdownify }} to display text that is outside of the speaker shortcode. Also note that you need to tell Hugo where the shortcode ends now with {{< /speaker >}}.

Hope it will help others.

Jeremie · Accepted Answer · 2024-07-16 17:02:09Z

-1

Markdown require a specific syntax for multilines variables. Instead of using brackets, you start with a pipe. See YAML Multiline for syntax and demos. This will avoid you to have to use "`" around the text.
markdownify works most of the time. You can also have a look at renderstring in Hugo, which offers a bit more options regarding rendering.

answered Jul 16, 2024 at 17:02

Jeremie

1,08014 silver badges29 bronze badges

Collectives™ on Stack Overflow

Embeding a multi line markdown variable in a html shortcode

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related