diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts index 20eaafc..7c8cb7d 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 d3bf14c..bba38e1 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 e15c326..b8da31a 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 28214ae..8bba8cb 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 Ctrl + C to copy, and Ctrl + V 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