Use html as content

Hello all

can i actually use html as content or only markdown?
I have not quite understood that in the documentation. My home page is too complex to be displayed with markdown.

Yes.

I do it often in my personal site when making small HTML / CSS / JS fiddles.

hi and thanks for the quick reply.
How do you do that? When I put .html files in the content folder I only get an error message that html is not allowed there.

I keep my content files in markdown as normal (as in foo/index.md) then write HTML directly inside them.

then i get the error message:
plain HTML documents not supported

Well, now the ball is in your court :slight_smile:

If I or someone else are to help you further, you must provide a minimal reproducible sample.

I have built a template here, which also works wonderfully: https://butterfly-aspect.de
But I need a complex page that I can only map via html, but as soon as I enter <h2>Charta</h2> I get the above error message, if I enter only Charter it works fine.

i’m not sure right now what i should show for samples in this case

Per this GitHub issue, make sure you have frontmatter at the beginning of the content file.

Sample

---
---

<p>Yo, I am plain HTML.</p>
1 Like

Ok, I didn’t realize that I need the frontmatter if I don’t want to enter anything there

but now it shows me the html in a <code> tag instead of resolving it

the first code block is simply not displayed at all

Make sure you enable unsafe HTML.

For example, in your config.yaml, add this:

markup:
  goldmark:
    renderer:
      unsafe: true
1 Like

Ok thanks now once the first block is displayed but from the second block it is still code

Not sure on that one.

Confirm that you’re not incorrectly using any of the following:

  • three backticks
  • html code element
  • html pre element

i have no code or pre element in my code and what mean three backticks?

Three backticks is how you write code blocks in markdown.

Am out of ideas for your remaining issue. Someone else may be able to help.

ok sorry :confused:
here the code snippet

---
---
<h2>Unsere Dienste im Überblick</h2>
<content class="home">
    <p class="text-center"><b class="firstpart">Rollenspiel</b><b class="lastpart">Monster</b> bietet euch folgende Dienste kostenlos an. Unser Ziel ist es euch eine freie und datensparsame Alternative zu
        bekannten Diensten zur Verfügung zu stellen.</p>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card">
                <a href="ts3server://RollenspielMonster"  onClick="_paq.push(['trackLink', 'ts3server://RollenspielMonster', 'link']);">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fab fa-teamspeak fa-3x"></i></h5>
                        <h6 class="card-subtitle mb-2">Teamspeak</h6>
                        <p class="card-text">Teamspeak-Server für eure Rollenspielrunden</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="col">
            <div class="card">
                <a href="http://guilded.gg/RollenspielMonster"  onClick="_paq.push(['trackLink', 'http://guilded.gg/RollenspielMonster', 'link']);">
                    <div class="card-body">
                        <h5 class="card-title">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 60px;height: 60px;" viewBox="30 28 75 75">
                                <g id="Assets-/-Logomark-/-Guilded-Wordmark-White" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M47.8903288,48.2641509 C47.8903288,48.2641509 47.9503286,56.8036226 52.3351089,65.6355094 C56.8398888,74.1369434 63.0510609,79.5977358 68.175038,81.7730189 C73.4694143,79.2981887 78.5837914,75.0023019 81.3749789,70.3735849 L66.840644,70.3735849 C63.0798608,67.2568679 60.1206741,62.0861132 59.4414771,56.109434 L102.079686,56.109434 C99.9772956,65.718717 95.5157156,74.4578868 91.2653346,80.023283 C85.3658754,87.739919 77.3664831,93.6292832 68.2062379,97 L68.0718385,97 C52.7791069,90.9068302 44.5519438,81.309434 39.1231681,70.480566 C35.6407837,63.5410566 32,50.9410566 32,34 L104,34 C104.011637,38.7709414 103.690875,43.5370029 103.039682,48.2641509 L47.8903288,48.2641509 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                                </g>
                            </svg>
                        </h5>
                        <h6 class="card-subtitle mb-2">Guilded</h6>
                        <p class="card-text">Guilded-Server für Spielersuche, Öffentliche- sowie Gruppengespräche</p>
                    </div>
                </a>
            </div>
        </div>
  • You can have HTML files as content files (as in: name them foo.html etc.)
  • You can use shortcodes etc.
  • But they need front matter (even if just empty)

Putting lots of HTML in Markdown isn’t something I would recommend. CommonMark is very strict so you quickly end up with “code” blocks when indenting things etc.

2 Likes

ok with the front matter i can also use a .html file
thanks for the help

such a tile view with mousover and fontawesome is just not feasible in markdown

Using html as content has serious issue I’ve just bump up. And it seems Hugo developers won’t pay attention to it for half a year:

1 Like

There’s one more option: You could turn that page into a layout that you then use for that particular page only.