You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
- 🎯 **Semantic HTML Output** - Clean and accessible HTML structure
12
+
- 💅 **Customizable Styling** - Easy to override CSS classes
13
+
- 🔧 **Easy Integration** - Works with any remark-based markdown processor
14
+
15
+
## 📦 Installation
16
+
17
+
```bash
18
+
npm install remark-notes-plugin
19
+
```
20
+
21
+
## 🚀 Usage
22
+
23
+
```typescript
24
+
import { unified } from'unified'
25
+
importremarkParsefrom'remark-parse'
26
+
importremarkStringifyfrom'remark-stringify'
27
+
importremarkNotesfrom'remark-notes-plugin'
28
+
29
+
const markdown =`
30
+
> [!note]
31
+
> This is a note about something important.
32
+
33
+
> [!tip]
34
+
> Here's a helpful tip for you.
35
+
36
+
> [!important]
37
+
> This is a very important message!
38
+
39
+
> [!quote]
40
+
> Here's a memorable quote.
41
+
42
+
> [!bonus]
43
+
> Here's some extra content for you!
44
+
`
45
+
46
+
const file =awaitunified()
47
+
.use(remarkParse)
48
+
.use(remarkNotes)
49
+
.use(remarkStringify)
50
+
.process(markdown)
51
+
52
+
console.log(String(file))
53
+
```
54
+
55
+
## 📝 Note Types
56
+
57
+
The plugin supports five distinct types of notes, each with its own unique style:
58
+
59
+
1.**Note** - For general information and remarks
60
+
```markdown
61
+
> [!note]
62
+
> Your note content here
63
+
```
64
+
65
+
2.**Tip** - For helpful tips and tricks
66
+
```markdown
67
+
> [!tip]
68
+
> Your tip content here
69
+
```
70
+
71
+
3.**Important** - For critical information and warnings
72
+
```markdown
73
+
> [!important]
74
+
> Your important message here
75
+
```
76
+
77
+
4.**Quote** - For quotations and references
78
+
```markdown
79
+
> [!quote]
80
+
> Your quote content here
81
+
```
82
+
83
+
5.**Bonus** - For additional, supplementary content
84
+
```markdown
85
+
> [!bonus]
86
+
> Your bonus content here
87
+
```
88
+
89
+
## 🎨 Styling
90
+
91
+
Include the provided `styles.css` in your project to get the default styling for the notes. The plugin uses a modular class structure that makes it easy to customize the appearance:
92
+
93
+
### Base Classes
94
+
95
+
-`.remark-note` - Base container for all note types
96
+
-`.remark-note-header` - Note header container
97
+
-`.remark-note-icon` - Icon styling
98
+
-`.remark-note-title` - Note title styling
99
+
-`.remark-note-content` - Note content container
100
+
101
+
### Type-Specific Classes
102
+
103
+
-`.remark-note.note` - Note type styling
104
+
-`.remark-note.tip` - Tip type styling
105
+
-`.remark-note.important` - Important type styling
106
+
-`.remark-note.quote` - Quote type styling
107
+
-`.remark-note.bonus` - Bonus type styling
108
+
109
+
### Customization Example
110
+
111
+
```css
112
+
/* Example: Customize the Note type */
113
+
.remark-note.note {
114
+
background-color: #your-color;
115
+
border-color: #your-border-color;
116
+
}
117
+
118
+
.remark-note.note.remark-note-title {
119
+
color: #your-text-color;
120
+
}
121
+
```
122
+
123
+
## 🛠️ Development
124
+
125
+
This project is written in TypeScript. To contribute or modify:
126
+
127
+
```bash
128
+
# Install dependencies
129
+
yarn
130
+
131
+
# Build the project
132
+
yarn build
133
+
134
+
# Run tests
135
+
yarn test
136
+
137
+
# Watch mode for development
138
+
yarn watch
139
+
```
140
+
141
+
## 🤝 Contributing
142
+
143
+
Contributions are welcome! Feel free to:
144
+
145
+
- Report bugs
146
+
- Suggest new features
147
+
- Submit pull requests
148
+
149
+
Please ensure your pull request passes all tests and includes appropriate documentation.
150
+
151
+
---
152
+
153
+
⭐️ If you find this plugin useful, please consider giving it a star on GitHub! ⭐️
0 commit comments