marked-alert - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

changelog.md

@@ -0,1 +1,14 @@
+# marked-alert [2.0.0](https://github.com/bent10/marked-extensions/compare/marked-alert@1.2.1...marked-alert@2.0.0) (2023-11-20)
+
+
+### Features
+
+* add support for `[!TIP]` and `[!CAUTION]` ([452926c](https://github.com/bent10/marked-extensions/commit/452926c396cfea9369dff878d3296751f64d96c4)), closes [#18](https://github.com/bent10/marked-extensions/issues/18)
+* drop support for old syntax ([a46101b](https://github.com/bent10/marked-extensions/commit/a46101b161558dad96a9d2df067f84455fe72062))
+
+
+### BREAKING CHANGES
+
+* The initial syntax using e.g. `**Note**` isn't supported any longer.
+
 ## marked-alert [1.2.1](https://github.com/bent10/marked-extensions/compare/marked-alert@1.2.0...marked-alert@1.2.1) (2023-11-15)
@@ -2,0 +15,0 @@

dist/index.js

@@ -1,70 +0,64 @@
-const p = [
+const h = [
   {
     type: "note",
-    icon: '<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>',
-    titleClassName: "color-fg-accent text-semibold d-inline-flex flex-items-center mb-1"
+    icon: '<svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" 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>'
   },
   {
+    type: "tip",
+    icon: '<svg class="octicon octicon-light-bulb mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>'
+  },
+  {
     type: "important",
-    icon: '<svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
-    titleClassName: "color-fg-done text-semibold d-inline-flex flex-items-center mb-1"
+    icon: '<svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>'
   },
   {
     type: "warning",
-    icon: '<svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
-    titleClassName: "color-fg-attention text-semibold d-inline-flex flex-items-center mb-1"
+    icon: '<svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>'
+  },
+  {
+    type: "caution",
+    icon: '<svg class="octicon octicon-stop mr-2" viewBox="0 0 16 16" 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>'
   }
 ];
-function w(e) {
+function d(e) {
   return e.length ? Object.values(
-    [...p, ...e].reduce(
-      (a, s) => (a[s.type] = s, a),
+    [...h, ...e].reduce(
+      (n, r) => (n[r.type] = r, n),
       {}
     )
-  ) : p;
+  ) : h;
 }
-function C(e, a) {
-  return a ? ["note", "important", "warning"].includes(e) ? `${a}` : a : `text-${e}`;
+function v(e) {
+  return `^(?:\\[\\!${e.toUpperCase()}\\])[s]*?
+?`;
 }
 function u(e) {
-  return `^(?:\\[\\!${e.toUpperCase()}\\]|[\\*]{2}${f(
-    e
-  )}[\\*]{2})[s]*?
-?`;
-}
-function f(e) {
   return e.slice(0, 1).toUpperCase() + e.slice(1).toLowerCase();
 }
-function Z(e = {}) {
-  const { className: a = "markdown-alert", variants: s = [] } = e, x = w(s);
+function m(e = {}) {
+  const { className: n = "markdown-alert", variants: r = [] } = e, p = d(r);
   return {
-    walkTokens(t) {
-      var n, o, c;
-      if (t.type !== "blockquote")
+    walkTokens(c) {
+      if (c.type !== "blockquote")
         return;
-      const r = x.find(
-        ({ type: i }) => new RegExp(u(i)).test(t.text)
+      const t = p.find(
+        ({ type: i }) => new RegExp(v(i)).test(c.text)
       );
-      if (r) {
+      if (t) {
         const {
           type: i,
-          icon: v,
-          title: d = f(i),
-          titleClassName: g
-        } = r, l = (n = t.tokens) == null ? void 0 : n[0], h = (o = l.raw) == null ? void 0 : o.replace(
-          new RegExp(u(i)),
-          ""
-        ), m = C(i, g);
-        l.tokens = this.Lexer.lexInline(
-          `<span class="${m}">${v + d}</span>${h ? `<br />${h}` : ""}`
-        ), Object.assign(t, {
+          icon: o,
+          title: s = u(i),
+          titleClassName: a = `${n}-title`
+        } = t;
+        Object.assign(c, {
           type: "alert",
           meta: {
-            className: a,
+            className: n,
             variant: i,
-            icon: v,
-            title: d,
-            titleClassName: m
+            icon: o,
+            title: s,
+            titleClassName: a
           }
-        }), (c = t.tokens) == null || c.splice(0, 1, l);
+        });
       }
@@ -76,7 +70,11 @@ },
         level: "block",
-        renderer({ meta: t, tokens: r = [] }) {
-          let n = `<div class="${t.className} ${t.className}-${t.variant}">
+        renderer(c) {
+          var l;
+          const { meta: t, tokens: i = [] } = c, s = (l = i[0].raw) == null ? void 0 : l.replace(new RegExp(v(t.variant)), "").trim();
+          let a = `<div class="${t.className} ${t.className}-${t.variant}">
 `;
-          return n += this.parser.parse(r), n += `</div>
-`, n;
+          return a += `<p class="${t.titleClassName}">`, a += t.icon, a += t.title, a += `</p>
+`, a += s ? `<p>${s}</p>
+` : "", a += this.parser.parse(i.slice(1)), a += `</div>
+`, a;
         }
@@ -88,3 +86,3 @@ }
 export {
-  Z as default
+  m as default
 };

dist/index.umd.js

@@ -1,4 +0,6 @@
-(function(i,r){typeof exports=="object"&&typeof module<"u"?module.exports=r():typeof define=="function"&&define.amd?define(r):(i=typeof globalThis<"u"?globalThis:i||self,i.markedAlert=r())})(this,function(){"use strict";const i=[{type:"note",icon:'<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>',titleClassName:"color-fg-accent text-semibold d-inline-flex flex-items-center mb-1"},{type:"important",icon:'<svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',titleClassName:"color-fg-done text-semibold d-inline-flex flex-items-center mb-1"},{type:"warning",icon:'<svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',titleClassName:"color-fg-attention text-semibold d-inline-flex flex-items-center mb-1"}];function r(e){return e.length?Object.values([...i,...e].reduce((n,o)=>(n[o.type]=o,n),{})):i}function g(e,n){return n?["note","important","warning"].includes(e)?`${n}`:n:`text-${e}`}function d(e){return`^(?:\\[\\!${e.toUpperCase()}\\]|[\\*]{2}${h(e)}[\\*]{2})[s]*?
-?`}function h(e){return e.slice(0,1).toUpperCase()+e.slice(1).toLowerCase()}function w(e={}){const{className:n="markdown-alert",variants:o=[]}=e,b=r(o);return{walkTokens(t){var a,f,p;if(t.type!=="blockquote")return;const l=b.find(({type:s})=>new RegExp(d(s)).test(t.text));if(l){const{type:s,icon:m,title:u=h(s),titleClassName:C}=l,c=(a=t.tokens)==null?void 0:a[0],v=(f=c.raw)==null?void 0:f.replace(new RegExp(d(s)),""),x=g(s,C);c.tokens=this.Lexer.lexInline(`<span class="${x}">${m+u}</span>${v?`<br />${v}`:""}`),Object.assign(t,{type:"alert",meta:{className:n,variant:s,icon:m,title:u,titleClassName:x}}),(p=t.tokens)==null||p.splice(0,1,c)}},extensions:[{name:"alert",level:"block",renderer({meta:t,tokens:l=[]}){let a=`<div class="${t.className} ${t.className}-${t.variant}">
-`;return a+=this.parser.parse(l),a+=`</div>
-`,a}}]}}return w});
+(function(n,s){typeof exports=="object"&&typeof module<"u"?module.exports=s():typeof define=="function"&&define.amd?define(s):(n=typeof globalThis<"u"?globalThis:n||self,n.markedAlert=s())})(this,function(){"use strict";const n=[{type:"note",icon:'<svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" 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>'},{type:"tip",icon:'<svg class="octicon octicon-light-bulb mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>'},{type:"important",icon:'<svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>'},{type:"warning",icon:'<svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>'},{type:"caution",icon:'<svg class="octicon octicon-stop mr-2" viewBox="0 0 16 16" 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>'}];function s(a){return a.length?Object.values([...n,...a].reduce((c,o)=>(c[o.type]=o,c),{})):n}function h(a){return`^(?:\\[\\!${a.toUpperCase()}\\])[s]*?
+?`}function v(a){return a.slice(0,1).toUpperCase()+a.slice(1).toLowerCase()}function u(a={}){const{className:c="markdown-alert",variants:o=[]}=a,m=s(o);return{walkTokens(r){if(r.type!=="blockquote")return;const t=m.find(({type:i})=>new RegExp(h(i)).test(r.text));if(t){const{type:i,icon:p,title:l=v(i),titleClassName:e=`${c}-title`}=t;Object.assign(r,{type:"alert",meta:{className:c,variant:i,icon:p,title:l,titleClassName:e}})}},extensions:[{name:"alert",level:"block",renderer(r){var d;const{meta:t,tokens:i=[]}=r,l=(d=i[0].raw)==null?void 0:d.replace(new RegExp(h(t.variant)),"").trim();let e=`<div class="${t.className} ${t.className}-${t.variant}">
+`;return e+=`<p class="${t.titleClassName}">`,e+=t.icon,e+=t.title,e+=`</p>
+`,e+=l?`<p>${l}</p>
+`:"",e+=this.parser.parse(i.slice(1)),e+=`</div>
+`,e}}]}}return u});

dist/utils.d.ts

@@ -8,6 +8,2 @@ import type { AlertVariantItem } from './types.js';
 /**
- * Resolve the variant title classname.
- */
-export declare function resolveTitleClassName(type: string, classname?: string): string;
-/**
  * Returns regex pattern to match alert syntax.
@@ -19,2 +15,2 @@ */
  */
-export declare function ucFirst(str: string): string;
+export declare function ucfirst(str: string): string;

package.json

 {
   "name": "marked-alert",
   "description": "A marked extension to support GFM alert",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "publishConfig": {
@@ -6,0 +6,0 @@ "access": "public"

readme.md

@@ -37,2 +37,5 @@ # marked-alert
 
+> [!TIP]
+> Optional information to help a user be more successful.
+
 > [!IMPORTANT]
@@ -44,12 +47,4 @@ > Crucial information necessary for users to succeed.
 
-Old syntax:
-
-> **Note**
-> This is a note
-
-> **Important**
-> This is a important
-
-> **Warning**
-> This is a warning
+> [!CAUTION]
+> Negative potential consequences of an action.
 ```
@@ -76,62 +71,86 @@
 <div class="markdown-alert markdown-alert-note">
+  <p class="markdown-alert-title">
+    <svg
+      class="octicon octicon-info mr-2"
+      viewBox="0 0 16 16"
+      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
+    >Note
+  </p>
   <p>
-    <span
-      class="color-fg-accent text-semibold d-inline-flex flex-items-center mb-1"
-      ><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
-      >Note</span
-    ><br />Highlights information that users should take into account, even when
+    Highlights information that users should take into account, even when
     skimming.
   </p>
 </div>
+<div class="markdown-alert markdown-alert-tip">
+  <p class="markdown-alert-title">
+    <svg
+      class="octicon octicon-light-bulb mr-2"
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+      aria-hidden="true"
+    >
+      <path
+        d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+      ></path></svg
+    >Tip
+  </p>
+  <p>Optional information to help a user be more successful.</p>
+</div>
 <div class="markdown-alert markdown-alert-important">
-  <p>
-    <span
-      class="color-fg-done text-semibold d-inline-flex flex-items-center mb-1"
-      ><svg
-        class="octicon octicon-report mr-2"
-        viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        height="16"
-        aria-hidden="true"
-      >
-        <path
-          d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-        ></path></svg
-      >Important</span
-    ><br />Crucial information necessary for users to succeed.
+  <p class="markdown-alert-title">
+    <svg
+      class="octicon octicon-report mr-2"
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+      aria-hidden="true"
+    >
+      <path
+        d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+      ></path></svg
+    >Important
   </p>
+  <p>Crucial information necessary for users to succeed.</p>
 </div>
 <div class="markdown-alert markdown-alert-warning">
+  <p class="markdown-alert-title">
+    <svg
+      class="octicon octicon-alert mr-2"
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+      aria-hidden="true"
+    >
+      <path
+        d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+      ></path></svg
+    >Warning
+  </p>
   <p>
-    <span
-      class="color-fg-attention text-semibold d-inline-flex flex-items-center mb-1"
-      ><svg
-        class="octicon octicon-alert mr-2"
-        viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        height="16"
-        aria-hidden="true"
-      >
-        <path
-          d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-        ></path></svg
-      >Warning</span
-    ><br />Critical content demanding immediate user attention due to potential
-    risks.
+    Critical content demanding immediate user attention due to potential risks.
   </p>
 </div>
-<p>Old syntax:</p>
-...
+<div class="markdown-alert markdown-alert-caution">
+  <p class="markdown-alert-title">
+    <svg
+      class="octicon octicon-stop mr-2"
+      viewBox="0 0 16 16"
+      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>
 ```
@@ -150,5 +169,7 @@
 
-- `note`: Represents a note alert.
-- `important`: Represents an important alert.
-- `warning`: Represents a warning alert.
+- `[!NOTE]`: Highlights information that users should take into account, even when skimming.
+- `[!TIP]`: Optional information to help a user be more successful.
+- `[!IMPORTANT]`: Crucial information necessary for users to succeed.
+- `[!WARNING]`: Critical content demanding immediate user attention due to potential risks.
+- `[!CAUTION]`: Negative potential consequences of an action.
 
@@ -155,0 +176,0 @@ Each variant has an associated icon and title class name.

No alert changes

Improved metrics

Total package byte prevSize

24719

increased by25.09%

Lines of code

183

increased by5.17%

Number of lines in readme file

214

increased by10.88%

No dependency changes