Setting the class of markdown tables

support
#1

I use a theme that uses pure css. When I create a markdown table, it generates html code that looks like this

<table>
...
</table>

But what I want is

<table class="pure-table">
...
</table>

to apply the css styles existing in the theme. How can I do this in hugo?

2 Likes
#2

That’s probably impossible with Markdown. Hugo uses Blackfriday for parsing Markdown and that doesn’t seem to support any additional attributes for Tables.

You’ll have to use plain HTML (which you can freely mix with Markdown).

1 Like
#3

Inline attributes are not part of the Markdown “standard,”, but you can use mmark with Hugo. Just use a mmark file extension for your content. See the Inline Attribute Lists section of the mmark Syntax page or this blog post on how to use inline attributes.

1 Like
#4

thanks !
does exactly what I was looking for without resorting to inline html.

#5

Cool, I learnt something today! I too use pure CSS and I too have been using inline HTML for things like this. Need to explore mmark.

#6

Note that if you do not want to rename your markdown files to *.mmark you can set Markdown = mmark in frontmatter.

1 Like
#7

hi bep,

I just tried set Markdown = mmark in frontmatter. But seems it dont work. Can you explain more?

Thanks!

Vam

#8

See Optional variables. But support for the mmark can be disabled soon.

#9

Yeah it works. Thank you very much Mikhail!

#10

Thank you all for the answers! I needed this feature too, and was glad to find mmark supporting setting the class (and other attributes) in its implementation of Markdown tables.

Here is an example summarizing the answers above:

---
markup: "mmark"
---

{.table .pure-table .table-striped .table-responsive}
Name    | Age
--------|-----:
Bob     | 27
Alice   | 23

See:

1 Like
#11

@Mikhail Thank you so much for your reminder! I totally forgot about https://github.com/gohugoio/hugo/issues/1970! Rest assured, mmark support in Hugo isn’t going away, but I really need to get that issue (helpers: Mmark support incomplete, e.g. missing EXTENSION_ABBREVIATION) fixed soon. Can’t believe it has been over 2 years ago! Time flies!

1 Like