How to place HTML content inside a post

support
1

I have an html file with a canvas for WebGL renders. I pasted the html content into a content/posts/my-first-post.md file. However, the canvas doesn’t show up under the post, it shows up in localhost:<port>/posts. It kind of makes sense, since the index.html file is stored in the posts directory, but how can I make it so that it displays inside the post?

I tried deleting the index.html from the posts directory, which brings back the listing for the post on the home page, but it still doesn’t show the canvas inside the post. My .md file looks like this:

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

<html>
<head>
<script src="https://greggman.github.io/webgl-lint/webgl-lint.js" crossorigin></script>
<script type="text/javascript" src="./Common/initShaders2.js"></script>
.
.
.
<script type="text/javascript" src="./app.js"></script>

</head>
<body>
<canvas id="gl-canvas" width="700" height="500">
Not supported
</canvas>
</body>
</html>
2

  1. per default Hugo does not render HTML from markdown for security reasons. If you control the content you may turn HTML rendering on. see Configure markup | Hugo

    add this in your hugo.toml

    [markup.goldmark.renderer]
   unsafe = true

  2. HTML in Summaries is not displayed with the default summary setting. You will have to switch to manual summary by adding a <!--more--> tag to your source (see below) docs: Content summaries | Hugo and the comparison table on that page.

  3. you include full HTML code into the markdown - Your markdown commonly is rendered by some templates so this is at least unnecessary (maybe it also has bad effects.)

    with that my content would be: content/posts/my-new-post.md

    +++
title = 'My new Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

<canvas id="gl-canvas" width="100" height="100">
Not supported
</canvas>
<script>
let canvas = document.getElementById("gl-canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
<!--more-->

that should do the trick.

4

This worked nicely. I should add I had to change my script file paths to “…/” instead of “./” because the post links to a directory of the same name, and I had my file in the posts directory. I’ll leave my final files here for anyone else in the future.

hugo.toml:

languageCode = 'en-us'
title = 'Dilir Diyan Rafid'
theme = 'paper'
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

my-first-post.md:

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

<script src="https://greggman.github.io/webgl-lint/webgl-lint.js" crossorigin></script>
<script type="text/javascript" src="../Common/initShaders2.js"></script>
<script type="text/javascript" src="../Common/MVnew.js"></script>
<script type="text/javascript" src="../data.json"></script>
<script type="text/javascript" src="../camera.js"></script>
<script type="text/javascript" src="../Drawable.js"></script>
<script type="text/javascript" src="../square.js"></script>
<script type="text/javascript" src="../app.js"></script>
<script>
console.log(window.location.pathname);
</script>
<canvas id="gl-canvas" width="700" height="500">
</canvas>
<!--more-->
5

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