@widcardw/remark-callouts

Thanks to @portaljs/remark-callouts.

A plugin that can transform obsidian callouts into custom container.

Usage

Install the plugin.

npm i -D @widcardw/remark-callouts

Import it into remark plugin list.

import { remarkCallouts } from '@widcardw/remark-callouts'
// https://astro.build/config
export default defineConfig({
  // ...
  markdown: {
    remarkPlugins: [
      remarkCallouts, 
      { 
        leadingIcon: true, // (optional, default: true) add loading icon to the start of summary
        foldIcon: true, // (optional, default: true) add fold icon to the end of summary
        customClass: '__custom_callout', // (optional) ass custom class to <detail> and <summary>
      },
    ],
  },
})

Import css at your web app entry.

import '@widcardw/remark-callouts/index.css'

Then it will transform blockquotes like

> [!note] This is a note
> Here is the note content.

into custom container.

You can add the open or closed label to set the container folded or unfolded.

> [!note|closed] This is a note
> Its body will be folded by default.

The following callout types are supported.

|Type |Aliases| |-------|-------| |note |note, seealso| |abstract |abstract, summary, tldr| |info |info, todo| |tip |tip, hint, important| |success |success, check, done| |question |question, help, faq| |warning |warning, caution, attention| |failure |failure, fail, missing| |danger |danger, error| |bug |bug| |example |example| |quote |quote, cite|