diff --git a/gallery/src/pages/lovelace/markdown-card.ts b/gallery/src/pages/lovelace/markdown-card.ts
index 700283b6b8..576e6189c7 100644
--- a/gallery/src/pages/lovelace/markdown-card.ts
+++ b/gallery/src/pages/lovelace/markdown-card.ts
@@ -65,15 +65,20 @@ const CONFIGS = [
     >> ...by using additional greater-than signs right next to each other...
     > > > ...or with spaces between arrows.
 
-    > **Warning** Hey there
-    > This is a warning with a title
+    > [!NOTE]
+    > This is a GitHub note alert
 
-    > **Note**
-    > This is a note
+    > [!TIP]
+    > This is a GitHub tip alert
 
-    > **Note**
-    > This is a multiline note
-    > Lorem ipsum...
+    > [!IMPORTANT]
+    > This is a GitHub important alert
+
+    > [!WARNING]
+    > This is a GitHub warning alert
+
+    > [!CAUTION]
+    > This is a GitHub caution alert
 
     ## Lists
 
diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts
index 0e806b7c7d..e282378ada 100644
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -3,7 +3,14 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 
-const _blockQuoteToAlert = { Note: "info", Warning: "warning" };
+const _legacyGitHubBlockQuoteToAlert = { Note: "info", Warning: "warning" };
+const _gitHubBlockQuoteToAlert = {
+  "[!NOTE]": "info",
+  "[!TIP]": "success",
+  "[!IMPORTANT]": "info",
+  "[!WARNING]": "warning",
+  "[!CAUTION]": "error",
+};
 
 @customElement("ha-markdown-element")
 class HaMarkdownElement extends ReactiveElement {
@@ -71,18 +78,25 @@ class HaMarkdownElement extends ReactiveElement {
         // Map GitHub blockquote elements to our ha-alert element
         const firstElementChild = node.firstElementChild;
         const quoteTitleElement = firstElementChild?.firstElementChild;
-        const quoteType =
+        const blockQuoteType =
+          firstElementChild?.firstChild?.textContent &&
+          _gitHubBlockQuoteToAlert[firstElementChild.firstChild.textContent];
+        const legacyBlockQuoteType =
+          !blockQuoteType &&
           quoteTitleElement?.textContent &&
-          _blockQuoteToAlert[quoteTitleElement.textContent];
+          _legacyGitHubBlockQuoteToAlert[quoteTitleElement.textContent];
 
-        // GitHub is strict on how these are defined, we need to make sure we know what we have before starting to replace it
-        if (quoteTitleElement?.nodeName === "STRONG" && quoteType) {
+        if (
+          blockQuoteType ||
+          (quoteTitleElement?.nodeName === "STRONG" && legacyBlockQuoteType)
+        ) {
           const alertNote = document.createElement("ha-alert");
-          alertNote.alertType = quoteType;
-          alertNote.title =
-            (firstElementChild!.childNodes[1].nodeName === "#text" &&
-              firstElementChild!.childNodes[1].textContent?.trimStart()) ||
-            "";
+          alertNote.alertType = blockQuoteType || legacyBlockQuoteType;
+          alertNote.title = blockQuoteType
+            ? ""
+            : (firstElementChild!.childNodes[1].nodeName === "#text" &&
+                firstElementChild!.childNodes[1].textContent?.trimStart()) ||
+              "";
 
           const childNodes = Array.from(firstElementChild!.childNodes);
           for (const child of childNodes.slice(