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.
| 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 |
License
MIT License © 2022 widcardw
