Hugo will not render {{ .Content }} as markdown

support
1

I am trying to render the markdown content of a single, but it renders as straight html and not markdown.

Here is the single.html file:

    {{ define "main" }}
<div class="section">
    <h1>{{ .Title }}</h1>
    {{ partial "metadata.html" . }}
    <br><br>
    <div class="columns is-centered">
        <div class="column is-full-mobile is-half-desktop">
            <img style="border-radius: 3%" src={{ printf "%s%s" .Site.BaseURL .Params.Recipe_image }} alt="Placeholder image">
            <div class="container has-text-centered">
                <h1 class="title is-bold"> {{ .Title }}</h1>
                <p class="subtitle is-italic"> {{ .Params.Author }}</p>
                <hr>
            </div>
            <div class="container has-text-centered">    
                {{ partial "statstable.html" . }}
            </div>
            <hr>
            <p class="subtitle is-italic"> {{ .Params.Tagline }}</p>
            {{ .Content }}
        </div>
    </div>
</div>
{{ end }}

Here is my baseof.html:

<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
    {{- partial "header.html" . -}}
    <div id="content">
    {{- block "main" . }}{{ end }}
    </div>
    {{- partial "footer.html" . -}}
    {{- partial "script.html" . -}}
</body>
</html>

If I move the {{ .Content }} after the {{ end }} tag it renders fine.
Using hugo v0.72.0

2

To render raw markdown instead of the .Content variable you need to use .RawContent

See:

3

That doesn’t work either for me, it renders as the raw content, not the formatted markdown.

# Ingredients - First Ingredient - Second Ingredient - Third Ingredient - Fourth Ingredient - Fifth Ingredient ### Directions 1. Step One 1. Sub Step One 2. Step Two 3. Step Three 4. Step Four 5. Step Five 6. Step Six

Looking at it closer, it is like the CSS is broken somehow when it renders. When I render it inside the block contents are still organized with <h1> and <h3> tags, but they aren’t headers, and the lists have no markers. When I render it outside the block it works fine.

4

Could you clarify what kind of output you are looking for?

Do you have your code in a repo somewhere we can have a look at to replicate?

5

Yes, I just created it, it has the theme and the content I am using to test theme.

Cookbook Github

EDIT: This is the URL I am looking at specifically for testing: http://localhost:1313/recipe12/

6

It is still unclear what kind of output you are looking for.

Are you trying to output the contents as markdown, which is how your original question (and the topic title) reads as?

Or do you want the HTML rendered from your markdown content?

If you inspect your page in the browser, it is already doing the latter.

7

When I render it outside of the {{ end }} block it looks like this:

2021-01-02 16_58_43-

When I render it inside my {{ main }} block it looks like this:

2021-01-02 16_59_00-My New Hugo Site _ My Yummy Ramen - Brave

When I render it inside my block I want it to be rendered markdown with the list dots and headings.

8

It’s the CSS you are using: Content | Bulma: Free, open source, and modern CSS framework based on Flexbox

when you just want to directly use HTML tags, use content as container.

<div class="content">
{{ .Content }}
</div>
1 Like
9

Thank you, very fast and helpful!

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.