How can I help

Stay informed and learn

Let's connect

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  |
Newer post

Google Chrome is getting a new Progressive Web App feature

Older post

Apache performance tuning: configuring MPM directives

comments powered by Disqus

Looking for an IT professional?

Book a call Email me