remark-callout



> [!important]
> Website: https://r4ai.github.io/remark-callout

A remark plugin to add obsidian style callouts to markdown.

``md
> [!note] title here
> body here
`

Installation

`sh


npm

`ts
import remarkParse from "remark-parse";
import { unified } from "unified";
import remarkCallout from "@r4ai/remark-callout";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeStringify from "rehype-stringify";

const md =
> [!note] title here
> body here
;

const html = unified()
.use(remarkParse)
.use(remarkCallout)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeStringify)
.processSync(md)
.toString();

console.log(html);
`

yields:

`html


> [!WARNING]
> To display the callout icon as HTML using options.icon or options.foldIcon, you need to set the allowDangerousHtml option to true in remark-rehype and add rehype-raw as a plugin.

$3

1. Install the plugin:

`sh
npm install @r4ai/remark-callout
`

2. Add @r4ai/remark-callout to remark plugins in your astro config file (e.g. astro.config.ts):

`ts
// astro.config.ts
import remarkCallout from "@r4ai/remark-callout";

export default defineConfig({
// ...
markdown: {
// ...
remarkPlugins: [
// ...
remarkCallout,
],
},
});
`

Note: This plugin works fine in MDX files as well. For instructions on how to use MDX with Astro, see @astrojs/mdx.

3. Start using callouts in your markdown or mdx files:

`md
> [!note] title here
> body here
`

yields:

`html


`ts
// astro.config.ts
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
integrations: [
tailwind({
// Example: Allow writing nested CSS declarations
// alongside Tailwind's syntax
nesting: true,
}),
],
});
`

cf.

Or if you are using MDX, you can use custom components to style the callouts:

`ts
// astro.config.ts
import { remarkCallout } from "@r4ai/remark-callout";

export default defineConfig({
// ...
markdown: {
// ...
remarkPlugins: [
// ...
[
remarkCallout,
{
root: (callout) => ({
tagName: "callout",
properties: {
calloutType: callout.type,
isFoldable: String(callout.isFoldable),
},
}),
title: (callout) => ({
tagName: "callout-title",
properties: {
calloutType: callout.type,
isFoldable: String(callout.isFoldable),
},
}),
},
],
],
},
});
`

`astro
---
// src/components/Callout.astro

type Props = {
calloutType: string
isFoldable: boolean
}
const { calloutType, isFoldable } = Astro.props
---

class={/ Your TailwindCSS style here /}
>