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