Skip to content

Commit 7e1cd0c

Browse files
rishichawdarishichawda
committed
update docs to include new config options
Signed-off-by: rishichawda <[email protected]>
1 parent f47dfd3 commit 7e1cd0c

File tree

6 files changed

+298
-55
lines changed

6 files changed

+298
-55
lines changed

‎README.md‎

Lines changed: 86 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,13 @@ npm install remark-notes-plugin
2222

2323
## 🚀 Usage
2424

25+
### Basic Usage
26+
2527
```typescript
2628
import { unified } from 'unified'
2729
import remarkParse from 'remark-parse'
28-
import remarkStringify from 'remark-stringify'
30+
import remarkRehype from 'remark-rehype'
31+
import rehypeStringify from 'rehype-stringify'
2932
import remarkNotes from 'remark-notes-plugin'
3033

3134
const markdown = `
@@ -48,12 +51,40 @@ const markdown = `
4851
const file = await unified()
4952
.use(remarkParse)
5053
.use(remarkNotes)
51-
.use(remarkStringify)
54+
.use(remarkRehype)
55+
.use(rehypeStringify)
5256
.process(markdown)
5357

5458
console.log(String(file))
5559
```
5660

61+
### Configuration Options
62+
63+
```typescript
64+
import remarkNotes from 'remark-notes-plugin'
65+
66+
// Default configuration (styles are auto-injected)
67+
unified().use(remarkNotes)
68+
69+
// Custom class prefix
70+
unified().use(remarkNotes, {
71+
classPrefix: 'my-callout'
72+
})
73+
// Generates classes like: my-callout-remark-note, my-callout-remark-note-tip, etc.
74+
75+
// Disable automatic style injection (import CSS manually)
76+
unified().use(remarkNotes, {
77+
injectStyles: false
78+
})
79+
// Then import: import 'remark-notes-plugin/styles.css'
80+
81+
// Both options
82+
unified().use(remarkNotes, {
83+
classPrefix: 'custom',
84+
injectStyles: false
85+
})
86+
```
87+
5788
## 📝 Note Types
5889

5990
The plugin supports five distinct types of notes, each with its own unique style:
@@ -90,34 +121,75 @@ The plugin supports five distinct types of notes, each with its own unique style
90121

91122
## 🎨 Styling
92123

93-
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:
124+
By default, styles are automatically injected into your document. You can customize this behavior:
125+
126+
### Automatic Style Injection (Default)
127+
128+
Styles are included automatically when you use the plugin with default settings:
129+
130+
```typescript
131+
unified().use(remarkNotes) // Styles auto-injected
132+
```
133+
134+
### Manual Style Import
135+
136+
If you prefer to manage styles yourself (e.g., for SSR or custom build tools), disable auto-injection:
137+
138+
```typescript
139+
unified().use(remarkNotes, { injectStyles: false })
140+
```
141+
142+
Then manually import the CSS:
143+
144+
```typescript
145+
import 'remark-notes-plugin/styles.css'
146+
```
147+
148+
### Customizing Styles
149+
150+
The plugin uses a modular class structure that makes it easy to customize the appearance:
94151

95-
### Base Classes
152+
#### Base Classes
96153

97154
- `.remark-note` - Base container for all note types
98155
- `.remark-note-header` - Note header container
99156
- `.remark-note-icon` - Icon styling
100157
- `.remark-note-title` - Note title styling
101158
- `.remark-note-content` - Note content container
102159

103-
### Type-Specific Classes
160+
#### Type-Specific Classes
161+
162+
- `.remark-note-note` - Note type styling
163+
- `.remark-note-tip` - Tip type styling
164+
- `.remark-note-important` - Important type styling
165+
- `.remark-note-quote` - Quote type styling
166+
- `.remark-note-bonus` - Bonus type styling
167+
168+
#### Custom Class Prefix
169+
170+
You can add a custom prefix to all CSS classes:
171+
172+
```typescript
173+
unified().use(remarkNotes, { classPrefix: 'my-callout' })
174+
```
175+
176+
This generates classes like:
104177

105-
- `.remark-note.note` - Note type styling
106-
- `.remark-note.tip` - Tip type styling
107-
- `.remark-note.important` - Important type styling
108-
- `.remark-note.quote` - Quote type styling
109-
- `.remark-note.bonus` - Bonus type styling
178+
- `.my-callout-remark-note`
179+
- `.my-callout-remark-note-tip`
180+
- `.my-callout-remark-note-header`
181+
- etc.
110182

111-
### Customization Example
183+
#### Customization Example
112184

113185
```css
114186
/* Example: Customize the Note type */
115-
.remark-note.note {
187+
.remark-note-note {
116188
background-color: #your-color;
117189
border-color: #your-border-color;
118190
}
119191

120-
.remark-note.note .remark-note-title {
192+
.remark-note-note .remark-note-title {
121193
color: #your-text-color;
122194
}
123195
```
@@ -152,4 +224,4 @@ Please ensure your pull request passes all tests and includes appropriate docume
152224

153225
---
154226

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

‎docs/docs/examples/customization.md‎

Lines changed: 65 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,52 @@ You can customize the appearance of your notes by overriding the default CSS sty
1111
The plugin generates the following HTML structure for each note:
1212

1313
```html
14-
<div class="remark-note [type]">
14+
<blockquote class="remark-note remark-note-[type]">
1515
<div class="remark-note-header">
16-
<span class="remark-note-icon"></span>
16+
<span class="remark-note-icon"><!-- SVG icon --></span>
1717
<span class="remark-note-title">[Type]</span>
1818
</div>
19-
<div>
20-
<p class="remark-note-content">Note content...</p>
19+
<div class="remark-note-content">
20+
<p>Note content...</p>
2121
</div>
22-
</div>
22+
</blockquote>
2323
```
2424

2525
Where `[type]` is one of: `note`, `tip`, `important`, `quote`, or `bonus`.
2626

27+
### Available CSS Classes
28+
29+
- `.remark-note` - Base container for all note types
30+
- `.remark-note-[type]` - Type-specific class (e.g., `.remark-note-tip`)
31+
- `.remark-note-header` - Header container with icon and title
32+
- `.remark-note-icon` - Icon container
33+
- `.remark-note-title` - Title text
34+
- `.remark-note-content` - Content wrapper
35+
36+
### Custom Class Prefix
37+
38+
You can add a custom prefix to all CSS classes using the `classPrefix` option:
39+
40+
```javascript
41+
import { unified } from 'unified';
42+
import remarkNotes from 'remark-notes-plugin';
43+
44+
unified().use(remarkNotes, {
45+
classPrefix: 'my-callout'
46+
});
47+
```
48+
49+
This will generate classes like:
50+
51+
- `.my-callout-remark-note`
52+
- `.my-callout-remark-note-tip`
53+
- `.my-callout-remark-note-header`
54+
- `.my-callout-remark-note-icon`
55+
- `.my-callout-remark-note-title`
56+
- `.my-callout-remark-note-content`
57+
58+
This is useful for avoiding CSS conflicts or integrating with existing design systems.
59+
2760
## Basic Customization
2861

2962
You can customize the notes by targeting these CSS classes in your own stylesheet:
@@ -35,15 +68,20 @@ You can customize the notes by targeting these CSS classes in your own styleshee
3568
}
3669

3770
/* Change the border color of tip notes */
38-
.remark-note.tip {
71+
.remark-note-tip {
3972
border-color: #4caf50;
4073
}
4174

4275
/* Change the title style of important notes */
43-
.remark-note.important .remark-note-title {
76+
.remark-note-important .remark-note-title {
4477
color: #f44336;
4578
font-weight: bold;
4679
}
80+
81+
/* With custom prefix 'my-callout' */
82+
.my-callout-remark-note-tip {
83+
border-color: #4caf50;
84+
}
4785
```
4886

4987
## Complete Customization Example
@@ -60,70 +98,70 @@ Here's a complete example that changes the styling for all note types:
6098
}
6199

62100
/* Note title styles */
63-
.remark-note.title {
101+
.remark-note-title {
64102
font-size: 1.1em;
65103
font-weight: 600;
66104
margin-bottom: 8px;
67105
}
68106

69107
/* Standard note */
70-
.remark-note.note {
108+
.remark-note-note {
71109
background-color: #e8f4fd;
72110
border-left: 4px solid #1e88e5;
73111
}
74-
.remark-note.note .remark-note.title {
112+
.remark-note-note .remark-note-title {
75113
color: #1565c0;
76114
}
77115

78116
/* Tip note */
79-
.remark-note.tip {
117+
.remark-note-tip {
80118
background-color: #e8f5e9;
81119
border-left: 4px solid #43a047;
82120
}
83-
.remark-note.tip .remark-note-title {
121+
.remark-note-tip .remark-note-title {
84122
color: #2e7d32;
85123
}
86124

87125
/* Important note */
88-
.remark-note.important {
126+
.remark-note-important {
89127
background-color: #ffebee;
90128
border-left: 4px solid #e53935;
91129
}
92-
.remark-note.important .remark-note-title {
130+
.remark-note-important .remark-note-title {
93131
color: #c62828;
94132
}
95133

96134
/* Quote note */
97-
.remark-note.quote {
135+
.remark-note-quote {
98136
background-color: #ede7f6;
99137
border-left: 4px solid #7e57c2;
100138
}
101-
.remark-note.quote .remark-note-title {
139+
.remark-note-quote .remark-note-title {
102140
color: #5e35b1;
103141
}
104142

105143
/* Bonus note */
106-
.remark-note.bonus {
144+
.remark-note-bonus {
107145
background-color: #fff8e1;
108146
border-left: 4px solid #ffb300;
109147
}
110-
.remark-note.bonus .remark-note-title {
148+
.remark-note-bonus .remark-note-title {
111149
color: #ff8f00;
112150
}
113151
```
114152

115153
## Applying Custom Styles
116154

117-
Add your custom styles to your project after importing the default styles. For example:
155+
Add your custom styles to your project. If you're using manual CSS import (with `injectStyles: false`), import your custom styles after the default ones:
118156

119157
```javascript
120-
// Import the default styles first
121-
import 'remark-notes-plugin/dist/styles.css';
158+
// Import the default styles first (only if injectStyles: false)
159+
import 'remark-notes-plugin/styles.css';
122160
// Then import your custom styles
123161
import './your-custom-styles.css';
124162
```
125163

126-
This ensures that your custom styles override the default ones.
164+
If you're using the default auto-injection, simply include your custom stylesheet in your project and the styles will override the defaults due to CSS specificity.
127165

128166
## Dark Mode Support
129167

@@ -151,6 +189,10 @@ Or if you're using a theme toggle, you can use CSS classes:
151189
background-color: #1e1e1e;
152190
color: #e0e0e0;
153191
}
192+
193+
.dark-theme .remark-note-title {
194+
color: #ffffff;
195+
}
154196
```
155197

156-
Adapt these examples to fit your website's specific styling needs and color scheme.
198+
Adapt these examples to fit your website's specific styling needs and color scheme.

0 commit comments

Comments
 (0)