af134cac8b
* [packages][m]: mv @flowershow/core package here * [packages/core][xs]: rename to @portaljs/core * [package.json][xs]: setup npm workspaces * [packages/core][xs]:replace deprecated rollup executor * [core/package.json][s]: fix mermaid versions * [core/tsconfig][xs]: rm extends * [core/jest.config][xs]: rm coverageDirectory * [core/package.json][xs]: install core-js * [packages.json][s]:use same version for all nrwl packages * [core/.eslintrc][xs]: adjust ignorePatterns * [core/project.json][xs]: rm publish targets * [packages][m]: mv @flowershow/remark-wiki-link here * [packages][m]: mv @flowershow/remark-wiki-link here * [packages][m]: mv @flowershow/remark-embed here * [remark-callouts/project.json][xs]: adjst test pattern * [package.json][s]: install missing deps * [remark-callouts][xs]: adjst fields in package.json * [remark-callouts][s]: rm pubish targets and adjst build executor * [remark-embed/jest.config][xs]: rm unknown option coverageDirectory * [remark-embed][xs]: rm publish targets * [remark-embed][s]: rename to @portaljs/remark-embed * [remark-wiki-link/eslintrc][xs]:adjst ignorePatterns * [package.json][xs]: install missing deps * [remark-wiki-link/test][xs]:specify format - also temporarily force any type on htmlExtension * [remark-wiki-link/README][xs]: replace @flowershow with @portaljs * [remark-wiki-link][xs]:rm old changelog * [remark-wiki-link][xs]: adjst package.json * [remark-wiki-link/project.json][xs]: rm publish targets * [core][s]: rm old changelog * [core/README][xs]:correct scope name * [remark-callouts/README][xs]: add @portaljs to pckg name * [remark-embed/README][xs]: add @portaljs to pckg name * [package-lock.json][xs]: refresh after rebasing on main
2.3 KiB
2.3 KiB
@portaljs/remark-callouts
Remark plugin to add support for blockquote-based callouts/admonitions similar to the approach of Obsidian and Microsoft Learn style.
Using this plugin, markdown like this:
> [!tip]
> hello callout
Would render as a callout like this:
Features supported
- Supports blockquote style callouts
- Supports nested blockquote callouts
- Supports 13 types out of the box (with appropriate styling in default theme) - see list below
- Supports aliases for types
- Defaults to note callout for all other types eg.
> [!xyz] - Supports dark and light mode styles
Future support:
- Support custom types and icons
- Support custom aliases
- Support Foldable callouts
- Support custom styles
Geting Started
Installation
npm install remark-callouts
Usage
import callouts from "remark-callouts";
await remark()
.use(remarkParse)
.use(callouts)
.use(remarkRehype)
.use(rehypeStringify).process(`\
> [!tip]
> hello callout
`);
HTML output
<div>
<blockquote class="callout">
<div class="callout-title tip">
<span class="callout-icon">
<svg>...</svg>
</span>
<strong>Tip</strong>
</div>
<div class="callout-content">
<p>hello callout</p>
</div>
</blockquote>
</div>
Import the styles in your .css file
@import "remark-callouts/styles.css";
or in your app.js
import "remark-callouts/styles.css";
Supported Callout Types
- note
- tip
aliases: hint, important - warning
alises: caution, attention - abstract
aliases: summary, tldr - info
- todo
- success
aliases: check, done - question
aliases: help, faq - failure
aliases: fail, missing - danger
alias: error - bug
- example
- quote
alias: cite
Change Log
[2.0.0] - 2022-11-21
Added
- Classname for icon.
Changed
- Extract css styles which can be imported separately.
[1.0.2] - 2022-11-03
Fixed
- Case insensitive match for types.
License
MIT