Releases: r4ai/remark-callout
Releases · r4ai/remark-callout
v0.2.0
Minor Changes (BREAKING)
In v0.2.0, option to specify a HTML tag and HTML attributes for the Body portion of the Callout is added.
For example, In v0.1.x,
> [!note] title here
> body herewould be rendered as follows:
<div data-callout data-callout-type="note" data-callout-is-foldable="false">
<div data-callout-title>title here</div>
<p>body here</p>
</div>however, in v0.2.0, the previous markdown is rendered as follows
<div data-callout data-callout-type="note" data-callout-is-foldable="false">
<div data-callout-title>title here</div>
<div data-callout-body>
<p>body here</p>
</div>
</div>This change is a breaking change because it changes the structure of the rendered HTML. If you have any custom CSS or JavaScript that relies on the structure of the rendered HTML, you will need to update it to account for this change.
Now you can specify a HTML tag and HTML attributes for the Body portion of the Callout by using the body option.
Example:
import remarkParse from "remark-parse";
import { unified } from "unified";
import remarkCallout from "../src/index";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
const md = `
> [!note] title here
> body here
`;
const html = unified()
.use(remarkParse)
.use(remarkCallout, {
body: {
tagName: "callout-body",
properties: {
className: "callout-body",
},
},
})
.use(remarkRehype)
.use(rehypeStringify)
.processSync(md)
.toString();
console.log(html);yields
<div data-callout data-callout-type="note" data-callout-is-foldable="false">
<div data-callout-title>title here</div>
<callout-body class="callout-body">
<p>body here</p>
</callout-body>
</div>