mdit-plugin-callouts v1.2.0

mdit plugin callouts

This is a plugin for vite that support callout blocks. The callout block is inspired by Obsidian.

Example

For more examples, view them on my personal blog.

Installation

Step 1. Install the plugin

Install the plugin with npm/yarn/pnpm.

npm install mdit-plugin-callouts

Import it into vite.config.ts

// vite.config.ts
import CalloutPlugin from 'mdit-plugin-callouts'
export default defineConfig({
  plugins: [
    Markdown({
      // ...
      markdownItSetup(md) {
        md.use(CalloutPlugin)
      }
    })
  ]
})

Step 2. Import css

Import css into the entry file main.ts

// main.ts
import 'mdit-plugin-callouts/index.css'

If you are using vitepress, you should notice the docs. You are supposed to import the css file in docs/.vitepress/theme/index.ts, not in docs/.vitepress/config.ts.

// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import 'mdit-plugin-callouts/index.css' // <-- css files should be imported here

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // ...
  },
}

If you prefer the style of vitepress, you can change it into

import 'mdit-plugin-callouts/vp.css'

Usage

Basic usage.

> [!note] This is a note
> This is the body of callout block.
>
> You can write more lines.

If you do not want the callout body, just write the title, and the fold icon will be hidden.

> [!tip] Callout without body

All of the callout blocks are expanded by default, except the example block. However, you can change it mannually. If you want to fold the block by default, you can write open or closed in the options.

> [!info|closed] The block will be folded by default.
> You can click the header to expand it.

The following callout types are supported.

License

MIT License © 2022 widcardw