remark-notes-plugin 📝

A powerful TypeScript remark plugin that transforms markdown blockquotes into beautifully styled note elements. Add professional-looking notes, tips, quotes, and more to your markdown documentation with minimal effort!

[!note] This was built for my AstroJS website but should work with any project.

✨ Features

🎨 5 Beautiful Note Types - Note, Tip, Important, Quote, and Bonus
🎯 Semantic HTML Output - Clean and accessible HTML structure
💅 Customizable Styling - Easy to override CSS classes
🔧 Easy Integration - Works with any remark-based markdown processor

📦 Installation

npm install remark-notes-plugin

🚀 Usage

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import remarkNotes from 'remark-notes-plugin'

const markdown = `
> [!note]
> This is a note about something important.

> [!tip]
> Here's a helpful tip for you.

> [!important]
> This is a very important message!

> [!quote]
> Here's a memorable quote.

> [!bonus]
> Here's some extra content for you!
`

const file = await unified()
  .use(remarkParse)
  .use(remarkNotes)
  .use(remarkStringify)
  .process(markdown)

console.log(String(file))

📝 Note Types

The plugin supports five distinct types of notes, each with its own unique style:

Note - For general information and remarks
```
> [!note]
> Your note content here
```
Tip - For helpful tips and tricks
```
> [!tip]
> Your tip content here
```
Important - For critical information and warnings
```
> [!important]
> Your important message here
```
Quote - For quotations and references
```
> [!quote]
> Your quote content here
```
Bonus - For additional, supplementary content
```
> [!bonus]
> Your bonus content here
```

🎨 Styling

Default styles are loaded automatically when you use the plugin. You can also modify the styles since the plugin uses a modular class structure that makes it easy to customize the appearance:

Base Classes

.remark-note - Base container for all note types
.remark-note-header - Note header container
.remark-note-icon - Icon styling
.remark-note-title - Note title styling
.remark-note-content - Note content container

Type-Specific Classes

.remark-note.note - Note type styling
.remark-note.tip - Tip type styling
.remark-note.important - Important type styling
.remark-note.quote - Quote type styling
.remark-note.bonus - Bonus type styling

Customization Example

/* Example: Customize the Note type */
.remark-note.note {
  background-color: #your-color;
  border-color: #your-border-color;
}

.remark-note.note .remark-note-title {
  color: #your-text-color;
}

🛠️ Development

This project is written in TypeScript. To contribute or modify:

# Install dependencies
yarn

# Build the project
yarn build

# Run tests
yarn test

# Watch mode for development
yarn watch

🤝 Contributing

Contributions are welcome! Feel free to:

Report bugs
Suggest new features
Submit pull requests

Please ensure your pull request passes all tests and includes appropriate documentation.

⭐️ If you find this plugin useful, please consider giving it a star on GitHub! ⭐️