@widcardw/remark-callouts v0.1.7

@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.