Skip to content

Instantly share code, notes, and snippets.

@djibe
Last active January 26, 2023 15:03
Show Gist options
  • Save djibe/7a8ba9516f4495dbd6fdf1d1de7a60fe to your computer and use it in GitHub Desktop.
Save djibe/7a8ba9516f4495dbd6fdf1d1de7a60fe to your computer and use it in GitHub Desktop.
Hugo static site ultimate table shortcode
{{ $htmlTable := .Inner | markdownify }}
{{ $old := "<table>" }}
{{ $new := "" }}
{{ $title := .Get "title" }}
{{ $extraClass := .Get "class" }}
{{ $id := "" }}
{{ with .Get "id" }}
{{ $id = . }}
{{ else }}
{{ $id = delimit (shuffle (seq 1 9)) "" }}
{{ end }}
{{ if $title }}
{{ $new = printf "<table class=\"table %s\" id=\"%s\" itemscope itemtype=\"https://schema.org/Table\"><caption id=\"table-caption-%s\" itemprop=\"about\"><b>Tableau.</b> %s</caption>" $extraClass $id $id $title }}
{{ else }}
{{ $new = printf "<table class=\"table %s\" id=\"%s\">" $extraClass $id}}
{{ end }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable := replaceRE "align=\"([a-z]+)\"" "style=\"text-align: $1\"" $htmlTable }}
<div class="data-table" role="region" tabindex="0" {{ if $title }}{{ printf "aria-labelledby=\"table-caption-%s\"" $id | safeHTMLAttr }}{{ end }}>
{{ $htmlTable | safeHTML }}
</div>
<!-- Inspired by https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/ and improved by djibe-->
<!-- Features: HTML5 compatibility (no align-*), Bootstrap 4/5 compatibility, html table caption support, Schema.org markup, WAI accessibility, custom CSS class, custom Id (or unique one), responsive (with CSS) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment