Skip to main content

@mdit/plugin-alert


Plugin to support GFM style alerts. (Refopen in new window)

Usage

TS
import MarkdownIt from "markdown-it";
import { alert } from "@mdit/plugin-alert";

const mdIt = MarkdownIt().use(alert);

mdIt.render(`
> [!warning]
> Warning Text
`);

Syntax

With this plugin you can create block alerts with blockquote starting with [!ALERT_NAME] like:

> [!warning]
> This is warning text

The ALERT_NAME isn't case sensitive and can be the following string:

  • note
  • tip
  • important
  • caution
  • warning

Nesting and escaping

  • By default, GFM style alerts can only be placed at root, but you can use deep: true to enable deep and nesting support:

    md.use(alert, {
      name: "warning",
      deep: true,
    });
    
    > [!warning]
    > This is warning text
    >
    > > [!warning]
    > > This is a nested warning
    
    - > [!warning]
      > This is warning text
    

    will be

    Warning

    This is warning text

    Warning

    This is a nested warning

    • Warning

      This is warning text

  • Escaping can be done by adding \ to escape the ! [ or ] marker:

    > [\!warning]
    > This is warning text
    
    > \[!warning]
    > This is warning text
    

    will be

    [!warning] This is warning text

    [!warning] This is warning text

Options

interface MarkdownItAlertOptions {
  /**
   * Allowed alert names
   *
   * @default ['important', 'note', 'tip', 'warning', 'caution']
   */
  alertNames?: string[];

  /**
   * Whether handle deep alert syntax
   *
   * @default false
   */
  deep?: boolean;

  /**
   * Hint opening tag render function
   */
  openRender?: RenderRule;

  /**
   * Hint closing tag render function
   */
  closeRender?: RenderRule;

  /**
   * Hint title render function
   */
  titleRender?: RenderRule;
}

Demo

Note

This is note text

Important

This is important text

Tip

This is tip text

Warning

This is warning text

Caution

This is caution text

Styles

With default options, you can import and use the following styles in your project:

.markdown-alert {
  padding: 8px 16px;
  margin-bottom: 16px;
  color: inherit;
  border-left: 0.25em solid var(--border-color);
}
.markdown-alert > :first-child {
  margin-top: 0;
}
.markdown-alert > :last-child {
  margin-bottom: 0;
}
.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: var(--base-text-weight-medium, 500);
  align-items: center;
  position: relative;
}
.markdown-alert .markdown-alert-title:before {
  content: " ";
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-position: left;
  background-repeat: no-repeat;
}
@media print {
  .markdown-alert .markdown-alert-title:before {
    display: none;
  }
}
.markdown-alert.markdown-alert-note {
  border-left-color: #2f81f7;
}
.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: #2f81f7;
}
.markdown-alert.markdown-alert-note .markdown-alert-title::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%232f81f7' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
}
.markdown-alert.markdown-alert-important {
  border-left-color: #a371f7;
}
.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: #a371f7;
}
.markdown-alert.markdown-alert-important .markdown-alert-title::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23a371f7' d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E");
}
.markdown-alert.markdown-alert-tip {
  border-left-color: #3fb950;
}
.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: #3fb950;
}
.markdown-alert.markdown-alert-tip .markdown-alert-title::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233fb950' d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'/%3E%3C/svg%3E");
}
.markdown-alert.markdown-alert-warning {
  border-left-color: #d29922;
}
.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: #d29922;
}
.markdown-alert.markdown-alert-warning .markdown-alert-title::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d29922' d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E");
}
.markdown-alert.markdown-alert-caution {
  border-left-color: #f85149;
}
.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: #f85149;
}
.markdown-alert.markdown-alert-caution .markdown-alert-title::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f85149' d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
}