CODEWITHSUNDEEP
htmlmarkdownshortcodemultilinehugo
Scoubi
Scoubi

Reputation: 35

Embeding a multi line markdown variable in a html shortcode

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

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.

Upvotes: 1

Views: 107

Answers (2)

Jeremie
Jeremie

Reputation: 1018

  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.

  2. markdownify works most of the time. You can also have a look at renderstring in Hugo, which offers a bit more options regarding rendering.

Upvotes: 0

Scoubi
Scoubi

Reputation: 35

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.

Upvotes: -1

Related Questions