HAM v1.1: Supporting tables and technical diagrams!

Shift, the boy

The version 1.1.0 was quickly withdrawn due to issues loading with custom tables

HAM, our homegrown static Jekyll wiki framework now just got an update. Just like our past versions, this one is heavily motivated by our internal projects that are using HAM.

With this new version, you can now render diagrams with Mermaid. Mermaid is an open-source language and engine that lets you render technical charts and graphs from plaintext, just like Markdown for rich text.

Mermaid has been used in some notable Markdown-based apps that we personally love, including Joplin and GitHub. However, for the time being, we currently only support Mermaid when embedded inside a <pre class="mermaid"> HTML tag, instead of ```mermaid (as an annotated Markdown code block).

The latter may clash with our existing syntax highlighting feature powered by Highlight.js.

A screenshot of a desktop website version of Shift's Digital Garden (shift.reinhart1010.id), loading a page which contains technical diagrams rendered with Mermaid.
In our digital garden, we use Mermaid to render Entity Relationship Diagrams (ERDs) and Unified Modeling Language (UML) diagrams.

And lastly, we also decided to add support for tables, just like our main website!

A screenshot of a desktop website version of Shift's Digital Garden (shift.reinhart1010.id), loading a page which contains a table beautifully rendered in HAM.

If you have previously used other table markups, like the ones offered in Bootstrap 5, you will need to opt out from default styling by adding a special data- property, i.e. <table data-ham-ignore="true">.

You should also read: