Shortcode markdown not rendering correctly

Sorry if this question is too basic, I have not been able to locate same question here or at Google

What I did is super simple, just 3 files

index.html file under layouts folder has this
{{ .Content }}

newshortcode.html sitting under layouts/shortcodes folder has this
{{ .Inner }}

And finally under content folder has the content below

title: "Home Page"
date: 2018-09-09T17:52:20+08:00
draft: true

{{% newshortcode %}}
**this is the text inside shortcode tags**
{{% /newshortcode %}}`

I would expect with using {{% I should see the text between those ** be bold, however I got
**this is the text inside shortcode tags**

And when I inspect this element at browser,
<pre><code>**this is the text inside shortcode tags**</code></pre> is what it rendered

Could anyone please advise what I did wrongly?

Many thanks


First undraft your Is the behavior still the same?

If yes, then please share a link to the source of your project.

draft: false does not help

And I pasted the codes that I got, thanks

Now just a minute, you cannot have only {{ .Content }} in your index.html template and expect to get a valid HTML page in the browser.

Please have a look at the repository of the Ananke theme that is used in the Quick Start Guide to see how you need to structure your Hugo project templates for valid HTML.


In addition to making sure you have valid HTML, you also need to be careful with spaces or indents in your content. I noticed your text is indented by 8 spaces; Markdown interprets 4-space indent as ‘this is a code block’.


Thanks @alexandros, I had my own theme in another hugo project that I created for learning purpose, markdown was not working and so I created a simple version for troubleshooting, but thanks for raising this up =)

thanks a lot @pointyfar, indentation is the cause, it is now working
newbie mistake =)

1 Like