Callouts support

We would follow Obsidian style as listed on here https://help.obsidian.md/How+to/Use+callouts

> [!INFO]
> Here's a callout block.
> It supports **markdown** and [[Internal link|wikilinks]].

Acceptance

repo: https://github.com/flowershow/remark-callouts npm: https://www.npmjs.com/package/remark-callouts

• Support blockquote obsidian style callouts
• Support 13 type with appropriate styling in default theme
• Supports nested blockquote callouts
• Supports aliases for types
• Defaults to note style callout for all other types eg. > [!xyz]
• Supports dark and light mode styles

Screenshots

• with callout

• without callout

Tasks

• Do analysis and estimate e.g. do we do a new remark plugin? (we could put in our existing plugin?) ✅ 2022-09-14 create new remark plugin @ repo: https://github.com/flowershow/remark-callouts
• Add following features in plugin ✅ 2022-09-23
  • All admonitions that exist in obsidian including their aliases
  • Add custom titles (also support markdown)
  • Add nested callouts similar style in obsidian
  • Colors and Icons same as in obsidian
  • Add dark and light mode styles
• Fix headings added due to rehype-auto-link-headings ✅ 2022-09-26
  • added classNames (blockquote-heading) so above package can emit

Notes

• custom titles in callout headers can support markdown (as in obsidian) but not [[wiki-links]] (yet).

[khalilcodes]

@rufuspollock the headings was resolved on Monday and the npm package has been published and ready to go.

repo: https://github.com/flowershow/remark-callouts npm: https://www.npmjs.com/package/remark-callouts

One minor limitation is that wiki links do not parse in the callout’s header section (works in body), although other markdown stuff does just as in Obsidian. For eg …

> [!tip] # custom title // this works (parses the title as h1)

> [!tip] [[wiki-link]] // this doesn't -->  shows Tip instead

> [!tip]
> [[wiki-link]] // this works

I will update the tasks shortly.

[rufuspollock]

@khalilcodes amazing! 👏 👏 let’s integrate it and deploy it!