diff --git a/src/elements/markdown/callout.mjs b/src/elements/markdown/callout.mjs
new file mode 100644
index 0000000..42b6a1d
--- /dev/null
+++ b/src/elements/markdown/callout.mjs
@@ -0,0 +1,9 @@
+import {CustomElement} from "../base.mjs";
+
+export class Callout extends CustomElement {
+    static get template() {
+        return document.getElementById("template-callout")
+    }
+
+    // TODO: Last time, you were here!
+}
\ No newline at end of file
diff --git a/src/elements/markdown/renderer.mjs b/src/elements/markdown/renderer.mjs
index 8cb52a5..12a8c55 100644
--- a/src/elements/markdown/renderer.mjs
+++ b/src/elements/markdown/renderer.mjs
@@ -29,7 +29,7 @@ export class MarkdownElement extends CustomElement {
                         tokens: this.lexer.inline(cap[1])
                     };
                 }
-            }
+            },
         },
         extensions: [
             {
@@ -58,8 +58,7 @@ export class MarkdownElement extends CustomElement {
                 name: "mathBlock",
                 level: "block",
                 start(src) {
-                    const match = src.match(/[$][$]/)
-                    return match?.index
+                    return src.match(/[$][$]/)?.index
                 },
                 tokenizer(src, _) {
                     const match = src.match(/^[$][$](.*?)[$][$]/s)
@@ -75,6 +74,30 @@ export class MarkdownElement extends CustomElement {
                     return `<x-math document="${token.document}" block></x-math>`
                 }
             },
+            {
+                name: "callout",
+                level: "block",
+                start(src) {
+                    return src.match(/[$][$]/)?.index
+                },
+                tokenizer(src, _) {
+                    const match = src.match(/^ {0,3}> ?\[!(.+)]([-+])? ?(.+)?\n+( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/)
+                    if(match) {
+                        return {
+                            type: "callout",
+                            raw: match[0],
+                            kind: match[1],
+                            collapse: match[2],
+                            admonition: match[3],
+                            contents: match[4],
+                        }
+                    }
+                },
+                renderer(token) {
+                    console.log(token)
+                    return `<x-callout kind="${token.kind}" collapse="${token.collapse}" admonition="${token.admonition}" contents="${token.contents}"></x-callout>`
+                }
+            },
             {
                 name: "wikilink",
                 level: "inline",