Styling tables with Hugo

Markdown sometimes isn’t enough

Published March 2, 2020 #howto #bootstrap #hugo

Markdown is a nice format to write it, but sometimes you need to add HTML classes directly to the output to make it look how you want. Here’s a way to do that using hugo shortcodes.

Create a table shortcode

Put this 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 }}

Create a table

Like this:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Item 1   | Item 2   | Item 3   |
| Item 1a  | Item 2a  | Item 3a  |

Which should render like so:

Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1a Item 2a Item 3a

Wrap it in shortcodes

{{<table “table table-striped table-bordered”>}}
| Header 1 | Header 2 | Header 3 |
|———-|———-|———-|
| Item 1   | Item 2   | Item 3   |
| Item 1a  | Item 2a  | Item 3a  |
{{</table>}}

Which should render:

Header 1 Header 2 Header 3
Item 1 Item 2 Item 3
Item 1a Item 2a Item 3a

References

  1. https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/

Read next

Previous Post: Emacs Tramp tricks

See also

Building a hugo site and theme with Bootstrap

hugo is blazing fast

Now that’s its 2018 its time to retool the blog using hugo. Why not? Hugo is built in golang and is blazing fast and everything is cleaner than it was in the middleman years. One of the reasons that I liked middleman – it’s usage of the rails’ Sprockets library – is no longer a strength. The javascript and front-end world has moved over to WebPack and I’ve personally moved over to create-react-app.

Read more

Styling Hugo Diffs

Showing just what you changed

I often want to show small changes I’m making to a file and it would be nice for hugo to support styling patches directly. Lets see what we can do to make this process easier. Lets take the example of create node package.json file and add the following scripts worflow. How can we say this different than “copy this into your package.json file”? Create sample steps Lets first create the file using npm init -y and then immediately cp package.

Read more

Splitting Git Repos and Work Directories

all the fun things git can do

I found a tutorial on how to manage your dotfiles, that works by splitting up the git repository (normally the .git directory) from the work directory. Since I have a lot of code that I put in my tutorials, I adapted the technique to have individual article directories mirrored in their own github repository. Repositories and Work Directories The normal usage of git is to type git clone <remote> to get a copy of the local directory, mess with stuff, and then add and commit your changes.

Read more