Styling Tables With Hugo Shortcode

Markdown is a great way of writing your posts for new static website generators, but sometimes you need to add HTML classes directly to the output to make it look better. Here comes to play Hugo shortcodes that will help you programmatically add custom HTML to your markdown files.

Create a Table Shortcode

Put this code in /layouts/shortcodes/table.html

{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}

How To Use Created Shortcode

{{</*table "table table-striped table-bordered"*/>}}
| -  -  - -| -  -  - -| -  -  - -|
| Item 1   | Item 2   | Item 3   |
| Item 1a  | Item 2a  | Item 3a  |
{{</*/table*/>}}