v4.0.0
-
Sheds some DOM elements The hint icons are no longer wrapped inside a
div
.Also, if there's only one paragraph in the callout body, the content of paragraph are unwrapped instead of being wrapped inside a redundant paragraph element(reverted in v4.1.0). This is where things might break for you; you might have to tweak your styles to fix them. -
New themes and ready to use aliases for GitHub and VitePress lookalike callouts. Remix your own if things don't look fancy enough for your taste. Themes and configurations are now properly exposed through
package.json
so you can directly import them.For example, you can import GitHub configuration as follows.
import githubCalloutOptions from "@microflash/remark-callout-directives/config/github"; unified().use(remarkParse).use(remarkDirective) .use(remarkCalloutDirectives, githubCalloutOptions) .use(remarkRehype, { allowDangerousHtml: true }) .use(rehypeStringify, { allowDangerousHtml: true }) .process(await read("example.md"));
All themes now support light and dark color schemes (through
prefers-color-scheme
).Also, this version gets rid of Infima theme; the plugin gives you enough flexibility to recreate it (check out the GitHub theme as the starting point).
-
Accessibility improvements The hint icons are now marked as decorative through
aria-hidden=true
. I'm not a screen reader user, so please do let me know if you feel papercuts because of this plugin. I'd be exceedingly happy to improve things.