Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lin-stephanie/rehype-callouts
Render blockquote-based callouts (admonitions/alerts).
https://github.com/lin-stephanie/rehype-callouts
admonitions alerts astro callouts markdow obsidian rehype-plugin
Last synced: 2 months ago
JSON representation
Render blockquote-based callouts (admonitions/alerts).
- Host: GitHub
- URL: https://github.com/lin-stephanie/rehype-callouts
- Owner: lin-stephanie
- License: mit
- Created: 2024-07-12T14:19:54.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-10-10T18:20:03.000Z (3 months ago)
- Last Synced: 2024-10-11T16:58:18.286Z (2 months ago)
- Topics: admonitions, alerts, astro, callouts, markdow, obsidian, rehype-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/rehype-callouts
- Size: 1.67 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rehype-callouts
[![codecov][coverage-badge]][coverage]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![jsDocs.io][jsdocs-src]][jsdocs-href]
A [rehype](https://github.com/rehypejs/rehype) plugin for processing and rendering blockquote-based callouts.
## What is this?
This plugin adds support for callouts (admonitions/alerts), allowing you to use [Obsidian's callout syntax](https://help.obsidian.md/Editing+and+formatting/Callouts) uniformly in markdown to achieve the following features:
- Includes default callout types for various themes.
- Optionally import stylesheets for corresponding [themes](#themes).
- Supports collapsible callouts with `-/+` and nestable callouts.
- Allows custom titles with markdown syntax.
- Customizable default callout types (title, icon, color).
- Configurable new callout types.
- Configurable aliases for callout types.
- Configurable icon display.
## When should I use this?
This plugin helps render markdown callouts, making it ideal for displaying Obsidian callouts on an Astro-powered blog.
It also modifies HTML directly (no `allowDangerousHtml` in [remark-rehype](https://github.com/remarkjs/remark-rehype)) and supports collapsible callouts using the `details` tag, all without JavaScript.
## Installation
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). In Node.js (version 16+), install with your package manager:
```sh
npm install rehype-callouts
yarn add rehype-callouts
pnpm add rehype-callouts
```
In Deno with [`esm.sh`](https://esm.sh/):
```js
import rehypeCallouts from 'https://esm.sh/rehype-callouts'
```
In browsers with [`esm.sh`](https://esm.sh/):
```html
import rehypeCallouts from 'https://esm.sh/rehype-callouts?bundle'
```
## Usage
Say `example.md` contains:
```md
> [!note] This is a _non-collapsible_ callout
> Some content is displayed directly!
> [!WARNING]- This is a **collapsible** callout
> Some content shown after opening!
```
And module `example.js` contains:
```js
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeCallouts from 'rehype-callouts'
import rehypeStringify from 'rehype-stringify'
import { readSync } from 'to-vfile'
const file = unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeCallouts)
.use(rehypeStringify)
.processSync(readSync('example.md'))
console.log(String(file))
```
Or for an Astro project, the `astro.config.ts` contains:
```ts
import { defineConfig } from 'astro/config'
import rehypeCallouts from 'rehype-callouts'
// https://docs.astro.build/en/reference/configuration-reference/
export default defineConfig({
// ...
markdown: {
// ...
rehypePlugins: [
// ...
rehypeCallouts,
],
},
// ...
})
```
Then running `node example.js` or `pnpm astro dev` yields:
```html
This is a non-collapsible callout
Some content is displayed directly!
This is a collapsible callout
Some content shown after opening!
```
### Styling
You can customize callout styles using the class names mentioned above or import the provided [theme-specific](#themes) stylesheets:
```ts
import 'rehype-callouts/theme/github'
import 'rehype-callouts/theme/obsidian'
import 'rehype-callouts/theme/vitepress'
```
If bundling CSS files, import the CSS in your main CSS file:
```css
@import 'rehype-callouts/theme/github';
```
For Sass, import the CSS in your main Sass file:
```scss
@use 'rehype-callouts/theme/github';
```
Alternatively, import the CSS directly in browsers via [unpkg.com](https://unpkg.com) or [jsdelivr.net](https://www.jsdelivr.com/):
```html
```
## API
This package exports no identifiers. The default export is `rehypeCallouts`.
### `unified().use(rehypeCallouts, options?)`
Used to render callouts, including an optional parameter [`options`](#options).
### `options: UserOptions`
You can configure this plugin with the following optional settings:
| Option | Type | Description |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| theme | `'github'\|'obsidian'\|'vitepress'`
(default: `obsidian`) | Specify your desired callout theme to automatically apply its default callout types. |
| [callouts](#callouts-recordstring-calloutconfig) | `Record` (default: see [source code](https://github.com/lin-stephanie/rehype-callouts/tree/main/src/themes) ) | Defines the properties for default and custom callouts. For example: `{'note': {title: 'CustomTitle'}, 'custom': {color: 'pink'}}` |
| aliases | `Record` (default: `{}`) | Configure aliases for callout types. For example: `{'note': ['n'], 'tip': ['t']}` |
| showIndicator | `boolean`(default: `true`) | Whether to display an type-specific icons before callout title. |
### `callouts: Record`
Defines properties for default and custom callouts. Each key represents a callout type, and the value is an object with the following optional properties:
| Property | Type | Description |
| --------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| title | `string` | Title for this callout type. For new callout types, defaults to the callout type name if unset. |
| indicator | `string` | Icon in SVG format as a string. For new callout types, the icon will not display unless set, even if `showIndicator` is `true`. You can get icons from [Iconify](https://icon-sets.iconify.design/). For example: `'...'` |
| color | `string \| [string, string]` | Color(s) as a [``](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#syntax) string. For new callout types, defaults to `#888` if unset. For example:
`'rgb(8, 109, 221)'`: works for both light and dark themes.
`['#0969da', '#2f81f7']` : first for light theme, second for dark theme. |
## Themes
This package offers callout styles for [GitHub](https://github.com/orgs/community/discussions/16925), [Obsidian](https://help.obsidian.md/Editing+and+formatting/Callouts), and [VitePress](https://vitepress.dev/guide/markdown#github-flavored-alerts), with dark mode support via the `.dark` class. For more, check the [source code](https://github.com/lin-stephanie/rehype-callouts/tree/main/src/themes).
### GitHub
### Obsidian
### VitePress
## Types
This package is fully typed with [TypeScript](https://www.typescriptlang.org/). See [jsDocs.io](https://www.jsdocs.io/package/rehype-callouts) for type details.
## Credits
- [staticnoise/rehype-obsidian-callout](https://gitlab.com/staticnoise/rehype-obsidian-callout) - basic functionality.
- [Octions](https://primer.style/foundations/icons/) - default icons for GitHub callouts.
- [Lucide](https://lucide.dev/) - default icons for Obsidian, VitePress callouts.
## Contribution
If you see any errors or room for improvement on this plugin, feel free to open an [issues](https://github.com/lin-stephanie/rehype-callouts/issues) or [pull request](https://github.com/lin-stephanie/rehype-callouts/pulls) . Thank you in advance for contributing!
## License
[MIT](https://github.com/lin-stephanie/rehype-callouts/blob/main/LICENSE) © 2024-PRESENT [Stephanie Lin](https://github.com/lin-stephanie)
[coverage-badge]: https://img.shields.io/codecov/c/github/lin-stephanie/rehype-callouts?style=flat&colorA=080f12&colorB=ef7575
[coverage]: https://codecov.io/github/lin-stephanie/rehype-callouts
[npm-downloads-src]: https://img.shields.io/npm/dm/rehype-callouts?style=flat&colorA=080f12&colorB=ef7575
[npm-downloads-href]: https://npmjs.com/package/rehype-callouts
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=ef7575
[jsdocs-href]: https://www.jsdocs.io/package/rehype-callouts