|

HAM v1.1: Supporting tables and technical diagrams!

Save or share to

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">.


Thanks for reading this article! By the way, we’re also working on finishing these interesting posts. Revisit this site soon or follow us to see them once they’re published!

[display-posts post_status=”future” include_link=”false” wrapper_id=”future-list”]

Save or share to

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *