Due to Markdown’s inability to center and resize image properly, I use the raw HTML tags inside markdown file to include images:

由于 Markdown 格式无法很好居中和设定图像尺寸,我使用 HTML tags 来添加图像(图像可以很好居中以及设定显示大小):

<p align="center">
<img src="xxx.xx.xx/test.jpg">
</p>

Recently, after updating to Hugo version 0.62, I found that all the images using HTML tags are missing in the generated HTML files.

最近,升级了 Hugo 0.62 版本以后,我发现所有使用 HTML tag 引入的图像在生成的最终 HTML 文件中都消失了。

I checked the generated HTML source file for my post and found that the raw HTML tag for image is rendered as the following comment tag:

我查看了某个博文渲染而成的 HTML 源文件,发现 Markdown 中的 HTML 图像 tag 被渲染成了 HTML 中的注释:

<!-- raw HTML omitted -->

After a little dig, I find out the cause. Previously, Hugo was using Blackfriday to render Markdown files. Since Hugo version 0.60, the default Markdown renderer has been changed to goldmark. In goldmark, the default is not to render raw HTML tags.

经过一番查找,我找了问题的原因。在之前的版本中(0.60 版本之前),Hugo 使用 Blackfriday 来渲染 Markdown 文件。从 0.60 版本开始,默认的 Markdown 渲染器已经改成了 goldmark。 Goldmark 渲染器默认不回渲染 HTML tags。

To fix this issue, we have two options.

为了修复这个问题,我们有两种不同的解决方法。

First option, set blackfriday as the default Markdown engine. Open config.toml and add the following setting:

第一种选择,重新把 blackfriday 设定为默认的 Markdown 引擎。打开 config.toml,加入以下设定:

[markup]
  defaultMarkdownHandler = "blackfriday"

second option, use goldmark and set the unsafe option of markup.goldmark.renderer to true:

第二种方式,使用 goldmark 引擎,加入以下设定,更改 goldmark 默认行为:

[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

References