Hugo Doesn't Like Embedded HTML which contain UTF-8 Characters

ANSI Escape Codes

I have some code which runs on the command-line, and generates character control codes to make various bits e.g. bold or white or blue. This is standard ANSI escape codes used for everything in the terminal.

There is also a project, called ansifilter, which takes in this ANSI-escaped code, and emits valid HTML with color codes via using spans and <pre> and various other bits.

$ brew install cowsay lolcat ansifilter

Example

I created a Gist which shows an example of using these three commands together to generate colorized, ANSI-escape-coded characters, as well as the HTML output from ansifilter (with a screenshot).

Getting It To Work In Hugo

My understanding of Markdown is that you can embed any HTML that you want, but Markdown parsing stops while inside of HTML tags. It should then be trivial to paste the output of ansifilter --html into a Markdown file, and have it rendered by Hugo, but this does not happen.

What am I doing wrong here, and how can I get my colorized terminal output (note: I am NOT talking about plain syntax highlighting here!) to show up in my Hugo blog posts?

Looking at Inspector

In Safari Inspector, I see the following:

<!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<blockquote>
</blockquote>

So clearly Hugo is doing something here and dislikes my HTML. How can I make Hugo happy to render my HTML for me?

I managed to sort this out, apparently you need a shortcode that injects the html:

layouts/shortcodes/rawhtml.html

<!-- raw html -->
{{.Inner}}

content/posts/mypost.md

{{< rawhtml >}}
<pre>
...
</pre>
{{< /rawhtml >}}

No need for any of the above.

To insert raw HTML into a Markdown content file you need to enter the unsafe = true in the project config, under Goldmark’s settings.

This has already been discussed in this forum, many times before.

When encountering an issue it is advisable to use the forum search before opening a duplicate topic that already has an answer.

Also see the Requesting Help guidelines.

@alexandros Thanks for the tip, I didn’t see anything in the search results and it seems to me that using a shortcode to only allow raw HTML in very specific bits is a more secure / less “unsafe” way to do things.

Are there any drawbacks to using the rawhtml shortcode like I did, versus unsafe = True?

No drawbacks whatsoever, in using a rawhtml shortcode.

It’s just that it’s simpler and more portable to enable raw HTML directly withing Markdown.

But if you have security concerns (like for example if there are other content editors in your project) then do not enable the unsafe flag.

This topic was automatically closed after 22 hours. New replies are no longer allowed.