feat: support markers: '*' and custom inline title (#1)

Author: holtwick

README.md

@@ -95,6 +95,22 @@ You might change `github-colors-dark-media.css` to `github-colors-dark-class.css
 
 Refer to the [source code](./styles) for more details.
 
+### Customization
+
+In order to also support [Obsidian callouts syntax](https://help.obsidian.md/Editing+and+formatting/Callouts) it is possible to allow any type of markers with the following setting:
+
+```js
+md.use(MarkdownItGitHubAlerts, {
+  markers: '*'
+})
+```
+Alternative titles are also supported, by appending it to the marker like this:
+
+```markdown
+> [!note] Nota bene
+> The custom title will replace the regular title.
+```
+
 ## Sponsors
 
 <p align="center">

src/index.ts

@@ -5,7 +5,7 @@ export interface MarkdownItGitHubAlertsOptions {
    * List of markers to match.
    * @default ['TIP', 'NOTE', 'IMPORTANT', 'WARNING', 'CAUTION']
    */
-  markers?: string[]
+  markers?: string[] | '*'
 
   /**
    * If markers case sensitively on matching.
@@ -54,7 +54,8 @@ const MarkdownItGitHubAlerts: MarkdownIt.PluginWithOptions<MarkdownItGitHubAlert
     classPrefix = 'markdown-alert',
   } = options
 
-  const RE = new RegExp(`^\\[\\!(${markers.join('|')})\\]\\s`, matchCaseSensitive ? '' : 'i')
+  const markerNameRE = markers === '*' ? '\\w+' : markers.join('|')
+  const RE = new RegExp(`^\\[\\!(${markerNameRE})\\]([^\\n\\r]*)`, matchCaseSensitive ? '' : 'i')
 
   md.core.ruler.after('block', 'github-alerts', (state) => {
     const tokens = state.tokens
@@ -72,13 +73,9 @@ const MarkdownItGitHubAlerts: MarkdownIt.PluginWithOptions<MarkdownItGitHubAlert
         const match = firstContent.content.match(RE)
         if (!match)
           continue
-
         const type = match[1].toLowerCase() as keyof typeof icons
-        const title = titles[type] ?? capitalize(type)
-        const icon = icons[type]
-        if (!icon)
-          throw new Error(`No icon found for marker ${type}`)
-
+        const title = match[2].trim() || (titles[type] ?? capitalize(type))
+        const icon = icons[type] ?? ''
         firstContent.content = firstContent.content.slice(match[0].length).trimStart()
         open.type = 'alert_open'
         open.tag = 'div'

test/fixtures.test.ts

@@ -38,7 +38,9 @@ describe('fixtures', () => {
           xhtmlOut: true,
         })
 
-        md.use(MarkdownItGitHubAlerts)
+        md.use(MarkdownItGitHubAlerts, {
+          markers: '*',
+        })
 
         const rendered = [
           md.render(content),

test/input/1.basic.md

@@ -14,3 +14,11 @@
 
 > [!CAUTION]
 > Negative potential consequences of an action.
+
+# Custom
+
+> [!nOtE] My title
+> With `markers: '*'` case of chars is not required and titles are supported.
+
+> [!custom]
+> Also any other alert name is allowed.

test/output/1.basic.html

@@ -9,6 +9,11 @@ <h1>Hello</h1>
 </div>
 <div class="markdown-alert markdown-alert-caution"><p class="markdown-alert-title"><svg class="octicon octicon-stop mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Caution</p><p>Negative potential consequences of an action.</p>
 </div>
+<h1>Custom</h1>
+<div class="markdown-alert markdown-alert-note"><p class="markdown-alert-title"><svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>My title</p><p>With <code>markers: '*'</code> case of chars is not required and titles are supported.</p>
+</div>
+<div class="markdown-alert markdown-alert-custom"><p class="markdown-alert-title">Custom</p><p>Also any other alert name is allowed.</p>
+</div>
 
 <style>
 html {