From 6d06a12d8b8a9364bbd02d930d548c4c2022c2e9 Mon Sep 17 00:00:00 2001
From: Tuure <tuure.piitulainen@gmail.com>
Date: Wed, 18 Sep 2024 17:44:58 +0300
Subject: [PATCH] feat(#141): allow custom markers, propose default colors

---
 src/parser/markdown.ts                 |  4 +++-
 static/colors.css                      |  4 ++++
 static/markdown.css                    |  8 ++++++++
 tests/rendering/markdown-additional.md | 21 +++++++++++++++++----
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts
index 20eaafcc..7c8cb7dc 100644
--- a/src/parser/markdown.ts
+++ b/src/parser/markdown.ts
@@ -65,8 +65,10 @@ mdit.use(anchor, {
         placement: 'before',
     }),
 });
+mdit.use(githubAlerts, {
+    markers: '*'
+});
 mdit.use(graphviz);
-mdit.use(githubAlerts);
 mdit.use(mermaid);
 
 const renderMarkdown: Renderer = (content: string) => {
diff --git a/static/colors.css b/static/colors.css
index d3bf14c0..bba38e1f 100644
--- a/static/colors.css
+++ b/static/colors.css
@@ -44,6 +44,8 @@
     --alert-warning: #ffaf00;
     --alert-caution: #ff5f5f;
 
+    --alert-custom-default: #c0c0c0;
+
     --ipynb-bg-error: rgba(255, 0, 0, 0.1);
 }
 
@@ -97,6 +99,8 @@
         --alert-warning: #bf8700;
         --alert-caution: #cf222e;
 
+        --alert-custom-default: #404040;
+
         --ipynb-bg-error: rgba(255, 0, 0, 0.1);
     }
 }
diff --git a/static/markdown.css b/static/markdown.css
index e15c326b..b8da31a7 100644
--- a/static/markdown.css
+++ b/static/markdown.css
@@ -149,6 +149,14 @@ blockquote {
     vertical-align: text-bottom;
     fill: currentColor;
 }
+/* default style for custom markers (Obsidian Callout style) */
+.markdown-alert {
+    border-left: .25rem solid var(--alert-custom-default);
+}
+.markdown-alert .markdown-alert-title {
+    color: var(--alert-custom-default);
+}
+/* default styles for GitHub style markers */
 .markdown-alert-note {
     border-left: .25rem solid var(--alert-note);
 }
diff --git a/tests/rendering/markdown-additional.md b/tests/rendering/markdown-additional.md
index 28214ae9..8bba8cb3 100644
--- a/tests/rendering/markdown-additional.md
+++ b/tests/rendering/markdown-additional.md
@@ -42,11 +42,13 @@ While not a markdown syntax, this has a default style:
 
 Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, and <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste!
 
-## Custom attributes
+## Custom attribute
 
 This paragraph has a red background color.{style=background-color:red}
 
-## Github alert blockquote
+## GitHub style alert
+
+### The 5 default GitHub style alerts
 
 > [!NOTE]  
 > Something to take into account
@@ -63,7 +65,18 @@ This paragraph has a red background color.{style=background-color:red}
 > [!CAUTION]
 > Do not do this and that!
 
-With a custom title:
+### With a custom title
 
 > [!NOTE] Foo bar
-> Hello
+> 'Note' with a custom title
+
+### Using custom markers ([Obsidian Callout](https://help.obsidian.md/Editing+and+formatting/Callouts) style)
+
+> [!CUSTOM]
+> Something more special
+
+> [!fOoBaR]
+> The marker is case-insensitive and turns into Title Case
+
+> [!CUSTOM] paY aTtEntiOn
+> You can use a custom title with a custom marker as well