Skip to main content

Introduction

remark-notes-plugin is a plugin for remark that transforms markdown blockquotes into beautifully styled note elements.

npm npm GitHub

Overview​

This plugin enhances your markdown content by converting standard blockquotes into visually distinct note elements, making your documentation more engaging and readable. It supports five different note types:

  • Note: Standard informational notes
  • Tip: Helpful suggestions and advice
  • Important: Critical information that requires attention
  • Quote: Styled quote blocks
  • Bonus: Additional information or features

Features​

  • Simple integration with any remark-based markdown pipeline
  • Five distinct note types with different styling
  • Easy to use with popular frameworks like Astro, Gatsby, Next.js, and more
  • Fully customizable through CSS
  • Lightweight with minimal dependencies

Quick Example​

Markdown Input:

> [!note]
> This is a note.

> [!tip]
> This is a tip.

> [!important]
> This is important information.

> [!quote]
> This is a quote.

> [!bonus]
> This is a bonus tip.

HTML Output:

Beautifully styled note elements that stand out in your content, each with its own distinct appearance based on the note type.

note

This is a note.

tip

This is a tip.

important

This is important information.

quote

This is a quote.

bonus

This is a bonus tip.