That’s because you’re showing summaries of the post on the homepage. The template for the homepage probably uses {{ .Summary }} instead of {{ .Content }}.
Summaries are great, but they are a summary of the text content. Moreover, it’s famously bad at handling certain types of edge cases, like posts starting with an image or a code block. There’s an open issue for that at the Hugo repository on GitHub.
So you have to work around that problem by:
- Avoid publishing blog posts that start with a code block. Always start with a long enough text paragraph instead. (Or use a short text paragraph and truncate the post with
<!--more-->.) - Change the template to show the full posts instead of summaries. Use
{{ .Content }}instead of{{ .Summary }}. - Implement your own summary functionality using the Hugo templating language. I’ll leave that as an exercise to the reader. But maybe the following is a good start?
{{ .Content | truncate 70 }}