G-DE

Hugo: Expanding the Todo Shortcode

The first version of my Todo Shortcode was a quick implementation to highlight in a site build if TODO items were still present in the pages, but it had a number of flaws:

  1. The page wasn’t included in the warning
  2. The TODO wasn’t very visible in the page
  3. Passing HTML into the shortcode would inject it into the page

So here’s the improved version:

{{/* /layouts/shortcodes/todo.html */}}
{{- warnf "TODO: %s (%s)" (.Inner | strings.TrimSpace | plainify) .Page }}
<div class="todo">
  <h6>TODO</h6>
  <div class="todo-body">{{ .Inner | strings.TrimSpace | markdownify }}</div>
</div>

/* todo.css */
.todo {
  background: rgba(255, 255, 0, 0.1);
  border: solid 1px rgba(255, 255, 0, 0.5);
  border-radius: 0.5em;
  padding: 0.5em;
}

(How you add the CSS will depend on the theme you are using)

…and here is what it looks like:

Change detected, rebuilding site (#29).
2025-03-23 21:15:42.949 +0000
Source changed /posts/2025-02-21-hugo-todo-shortcode/index.md
WARN  TODO: Rework content here... (/workspaces/g-de.co.uk/content/posts/2025-02-21-hugo-todo-shortcode/index.md)
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Total in 12 ms
TODO
This is an example

Features of the new version:

  • The body is parsed as markdown, allowing rich markdown content, but preventing HTML
  • The build warning now includes the page location
  • The styling makes the todo much more visible in the page*

*This may require adjustments to better stand out in your theme.