HUGO

@zwbetz - load a table from an .md file

I want to thank zwbetz for the solution I found on his website - https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/ - how to load a table from .md file! Works fine!
Zachary, it would be so nice if you can explain your shortcode. I think you were trying to create a shortcode for any table on the site, and to assign individual styling to it with $class - did you?

"<table class=\"%s\">" $class }}

It is not very clear how you were going to use it.
Thank you!

You also can do it directly in the .md file by adding the style information just before the table and adding mmark in the front matter

---
markup: "mmark"
---

For example

{.table .pure-table .table-striped .table-responsive}
Type | Types de cookies        | A
-----|-------------------------|----
|Cookies strictement nécessaires | A
|Cookies fonctionnels | A
|Cookies de performance | A
|Cookies de marketing, tiers, à base de consentement | A

and (from memory) using markdownify in your template (not sure if this part is really needed)

{{ .Content | markdownify }}

@vistad my solution was specific to how Bootstrap styles their tables, so if you’re using a different CSS library then the shortcode may have to be adapted.

Thanks for the info, but AFAIK mmark is an alternative markdown processor - while here in Hugo we use Blackfriday by default.

Zachary, I definitely use Bootstrap. Could you please clarify this code?:

class=\"%s\">" $class 

Thank you!

It’s helpful to look at the full code first:

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

The line you’re referring to is building the new table tag with bootstrap classes, which will replace the original tag.

Yep, it is alternative, but included in stock hugo, so I use this frontmatter option “mmark” when I need this table feature. Stock hugo.

May be the actual testing about using Goldmark will bring something usefull on this front

Maybe help you this page:

https://www.mybluelinux.com/how-create-bootstrap-tables-in-hugo/

1 Like