Goldmark Extension for GitHub Alerts & Obsidian Callouts

ZMT Creative LLC has released an extension for Goldmark that provides GitHub-Style Alerts and Obsidian-Style Callouts (GitHub calls them Alerts but they work mostly the same way as Obsidian Callouts – see the GitHub page for more info).

This extension uses the syntax:

> [!NOTE]
> This is a note.

…which will generate HTML code that looks like this:

<div class="callout callout-note iconset-gfmplus" data-callout="note">
  <div class="callout-title">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
      class="lucide lucide-info-icon lucide-info">
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M12 16v-4"></path><path d="M12 8h.01"></path>
    </svg>
    <p class="callout-title-text">Note</p>
  </div>
    <div class="callout-body">
      <p>This is a note.</p>
    </div>
</div>

… which then renders an alert/callout that can look like this:

(This extension only generates the HTML element wrappers for the callout – you still have to create the necessary CSS to style it into something like the above.)

The package is available via:

• Go Package Repository: github.com/ZMT-Creative/gm-alert-callouts
• GitHub: https://github.com/ZMT-Creative/gm-alert-callouts.