diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts index 20eaafc..64243c2 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/markdown.css b/static/markdown.css index e15c326..b2a295f 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -149,6 +149,14 @@ blockquote { vertical-align: text-bottom; fill: currentColor; } +/* default style for unconfigured custom markers (Obsidian Callout style) */ +.markdown-alert { + border-left: .25rem solid var(--alert-note); +} +.markdown-alert .markdown-alert-title { + color: var(--alert-note); +} +/* 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..5558ef0 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,20 @@ 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 + +> [!TIP] Foo bar +> 'Tip' with a custom title + +### Using custom markers ([Obsidian Callout](https://help.obsidian.md/Editing+and+formatting/Callouts) style) + +> [!CUSTOM] +> Set custom icon and color for any marker +> +> If unconfigured, it's styled like 'Note' + +> [!fOoBaR] +> The marker is case-insensitive and turns into Title Case -> [!NOTE] Foo bar -> Hello +> [!CUSTOM] paY aTtEntiOn +> You can use a custom title with a custom marker as well