MDExCustomHeadingID - Custom Heading ID Plugin for MDEx

Over the last several months, I’ve been using Tableau to rebuild my long-neglected website. Tableau is part of the Elixir Tools project headed by @mhanberg, and is built on top of MDEx by @leandrocp. This library is one of ten libraries and Elixir extensions that I built. Most of these were built with the assistance of Kiro.

MDExCustomHeadingID is an MDEx plugin that supports custom heading IDs using the widely-accepted {#id} syntax that’s always on the verge of acceptance into CommonMark. It interacts well with the default MDEx configuration option header_ids.

Example

MDEx.to_html!(
  "## My Heading {#custom-id}\n\n## My Other Heading",
  plugins: [MDExCustomHeadingId],
  extension: [header_ids: ""]
)

This generates:

<h2>
  <a href="#custom-id" aria-hidden="true" class="anchor" id="custom-id"></a>
  My Heading
</h2>
<h2>
  <a
    href="#my-other-heading"
    aria-hidden="true"
    class="anchor"
    id="my-other-heading"
  ></a>
  My Other Heading
</h2>

2 Likes