Question 397707 in Html Question posted in
Some basic documentation can be found here.

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

  • 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search