markdown-it-callouts
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

markdown-it-callouts

A simple markdown-it plugin that adds support for Obsidian callouts or GitHub Flavored Markdown alerts.

Given the following markdown:

> [!note] Title!
> Body line 1
>
> Body line 2

The rendered HTML looks like:

<div class="callout callout-note">
    <h3 class="callout-title">Title!</h3>
    <p>Body line 1</p>
    <p>Body line 2</p>
</div>

The second class generated, callout-note, will pull the callout type from Markdown so you can easily style different callout types differently.

The elements generated are also configurable. The config is defined as follows:

export interface Config {
  /**
   * The element that wraps the created callout. Defaults to "div"
   */
  defaultElementType?: string;
  /**
   * An override map to use different elements for different callout types.
   *
   * All callout types are converted to lowercase, so use lowercase keys
   */
  elementTypes?: Partial<{ [calloutType: string]: string }>;
  /**
   * The element that wraps the title and symbol
   */
  calloutTitleElementType?: string;
  /**
   * A symbol inserted before the title for given callout types
   *
   * All callout types are converted to lowercase, so use lowercase keys
   */
  calloutSymbols?: Partial<{ [calloutType: string]: string }>;
  /**
   * The element to wrap callout symbols in. Defaults to "span"
   */
  calloutSymbolElementType?: string;
}

This package is inspired by the Eleventy Notes package implementation of callout parsing. It's designed to be pretty drop-in, especially for Eleventy blogs.

Readme

Keywords

Package Sidebar

Install

npm i markdown-it-callouts

Weekly Downloads

103

Version

1.0.3

License

MIT

Unpacked Size

8.72 kB

Total Files

5

Last publish

Collaborators

  • ryanisaacg