feat(#141): allow custom markers, propose default colors

jannis-baum · Sep 18, 2024 · 6d06a12 · 6d06a12
1 parent 9b1d6be
commit 6d06a12
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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