GoranStimac.com
How Can I Help
Stay Informed
Let's Connect

©2018 - 2021 Goran Štimac. All rights reserved.
v1.28_b2021-09-14

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

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

How To Use Created Shortcode

1{{<table "table table-striped table-bordered">}}
2|———-|———-|———-|
3| Item 1   | Item 2   | Item 3   |
4| Item 1a  | Item 2a  | Item 3a  |
5{{</table>}}
Share:

comments powered by Disqus
Hostinger Affiliate

Let’s Talk About Your Needs

Free Consultation