Skip to content

Commit 595f578

Browse files
antfuantfu
committed
docs: styles
1 parent db8824e commit 595f578

File tree

9 files changed

+274
-124
lines changed

9 files changed

+274
-124
lines changed

‎README.md‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,142 @@ Support [GitHub-style alerts](https://github.com/orgs/community/discussions/1692
4040
> [!CAUTION]
4141
> Negative potential consequences of an action.
4242
43+
## Usage
44+
45+
```bash
46+
npm i markdown-it-github-alerts
47+
```
48+
49+
```js
50+
import MarkdownIt from 'markdown-it'
51+
import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
52+
53+
const md = MarkdownIt()
54+
55+
md.use(MarkdownItGitHubAlerts)
56+
57+
const html = md.render(/* ... */)
58+
```
59+
60+
## Functionality
61+
62+
This plugin transforms the following markdown:
63+
64+
```markdown
65+
> [!NOTE]
66+
> Highlights information that users should take into account, even when skimming.
67+
```
68+
69+
to the following HTML:
70+
71+
```html
72+
<div class="markdown-alert markdown-alert-note">
73+
<p class="markdown-alert-title" dir="auto"><!-- svg icon-->Note</p><p>
74+
Highlights information that users should take into account, even when skimming.</p>
75+
</div>
76+
```
77+
78+
Which is compatible with the GitHub's output.
79+
80+
### Styling
81+
82+
You can write your custom styles for your alerts.
83+
84+
The following CSS is extracted from GitHub for your reference.
85+
86+
```css
87+
:root {
88+
--color-note: #0969da;
89+
--color-tip: #1a7f37;
90+
--color-warning: #9a6700;
91+
--color-severe: #bc4c00;
92+
--color-caution: #d1242f;
93+
--color-important: #8250df;
94+
}
95+
96+
@media (prefers-color-scheme: dark) {
97+
:root {
98+
--color-note: #2f81f7;
99+
--color-tip: #3fb950;
100+
--color-warning: #d29922;
101+
--color-severe: #db6d28;
102+
--color-caution: #f85149;
103+
--color-important: #a371f7;
104+
}
105+
}
106+
107+
.markdown-alert {
108+
padding: 0.5rem 1rem;
109+
margin-bottom: 16px;
110+
color: inherit;
111+
border-left: .25em solid #888;
112+
}
113+
114+
.markdown-alert>:first-child {
115+
margin-top: 0
116+
}
117+
118+
.markdown-alert>:last-child {
119+
margin-bottom: 0
120+
}
121+
122+
.markdown-alert .markdown-alert-title {
123+
display: flex;
124+
font-weight: 500;
125+
align-items: center;
126+
line-height: 1
127+
}
128+
129+
.markdown-alert .markdown-alert-title .octicon {
130+
margin-right: 0.5rem;
131+
display: inline-block;
132+
overflow: visible !important;
133+
vertical-align: text-bottom;
134+
fill: currentColor;
135+
}
136+
137+
.markdown-alert.markdown-alert-note {
138+
border-left-color: var(--color-note);
139+
}
140+
141+
.markdown-alert.markdown-alert-note .markdown-alert-title {
142+
color: var(--color-note);
143+
}
144+
145+
.markdown-alert.markdown-alert-important {
146+
border-left-color: var(--color-important);
147+
}
148+
149+
.markdown-alert.markdown-alert-important .markdown-alert-title {
150+
color: var(--color-important);
151+
}
152+
153+
.markdown-alert.markdown-alert-warning {
154+
border-left-color: var(--color-warning);
155+
}
156+
157+
.markdown-alert.markdown-alert-warning .markdown-alert-title {
158+
color: var(--color-warning);
159+
}
160+
161+
.markdown-alert.markdown-alert-tip {
162+
border-left-color: var(--color-tip);
163+
}
164+
165+
.markdown-alert.markdown-alert-tip .markdown-alert-title {
166+
color: var(--color-tip);
167+
}
168+
169+
.markdown-alert.markdown-alert-caution {
170+
border-left-color: var(--color-caution);
171+
}
172+
173+
.markdown-alert.markdown-alert-caution .markdown-alert-title {
174+
color: var(--color-caution);
175+
}
176+
```
177+
178+
43179
## Sponsors
44180

45181
<p align="center">

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@
5050
"typecheck": "tsc --noEmit",
5151
"prepare": "simple-git-hooks"
5252
},
53+
"peerDependencies": {
54+
"markdown-it": "^13.0.0"
55+
},
5356
"devDependencies": {
5457
"@antfu/eslint-config": "^2.1.2",
5558
"@antfu/ni": "^0.21.12",

‎styles/github-base.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.markdown-alert {
2+
padding: 0.5rem 1rem;
3+
margin-bottom: 16px;
4+
color: inherit;
5+
border-left: .25em solid #888;
6+
}
7+
8+
.markdown-alert>:first-child {
9+
margin-top: 0
10+
}
11+
12+
.markdown-alert>:last-child {
13+
margin-bottom: 0
14+
}
15+
16+
.markdown-alert .markdown-alert-title {
17+
display: flex;
18+
font-weight: 500;
19+
align-items: center;
20+
line-height: 1
21+
}
22+
23+
.markdown-alert .markdown-alert-title .octicon {
24+
margin-right: 0.5rem;
25+
display: inline-block;
26+
overflow: visible !important;
27+
vertical-align: text-bottom;
28+
fill: currentColor;
29+
}
30+
31+
.markdown-alert.markdown-alert-note {
32+
border-left-color: var(--color-note);
33+
}
34+
35+
.markdown-alert.markdown-alert-note .markdown-alert-title {
36+
color: var(--color-note);
37+
}
38+
39+
.markdown-alert.markdown-alert-important {
40+
border-left-color: var(--color-important);
41+
}
42+
43+
.markdown-alert.markdown-alert-important .markdown-alert-title {
44+
color: var(--color-important);
45+
}
46+
47+
.markdown-alert.markdown-alert-warning {
48+
border-left-color: var(--color-warning);
49+
}
50+
51+
.markdown-alert.markdown-alert-warning .markdown-alert-title {
52+
color: var(--color-warning);
53+
}
54+
55+
.markdown-alert.markdown-alert-tip {
56+
border-left-color: var(--color-tip);
57+
}
58+
59+
.markdown-alert.markdown-alert-tip .markdown-alert-title {
60+
color: var(--color-tip);
61+
}
62+
63+
.markdown-alert.markdown-alert-caution {
64+
border-left-color: var(--color-caution);
65+
}
66+
67+
.markdown-alert.markdown-alert-caution .markdown-alert-title {
68+
color: var(--color-caution);
69+
}

‎styles/github-colors-dark-class.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.dark {
2+
--color-note: #2f81f7;
3+
--color-tip: #3fb950;
4+
--color-warning: #d29922;
5+
--color-severe: #db6d28;
6+
--color-caution: #f85149;
7+
--color-important: #a371f7;
8+
}

‎styles/github-colors-dark-media.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@media (prefers-color-scheme: dark) {
2+
:root {
3+
--color-note: #2f81f7;
4+
--color-tip: #3fb950;
5+
--color-warning: #d29922;
6+
--color-severe: #db6d28;
7+
--color-caution: #f85149;
8+
--color-important: #a371f7;
9+
}
10+
}

‎styles/github-colors-light.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
--color-note: #0969da;
3+
--color-tip: #1a7f37;
4+
--color-warning: #9a6700;
5+
--color-severe: #bc4c00;
6+
--color-caution: #d1242f;
7+
--color-important: #8250df;
8+
}

‎test/fixtures.test.ts‎

Lines changed: 6 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
import process from 'node:process'
44
import { describe, expect, it } from 'vitest'
55
import MarkdownIt from 'markdown-it'
6-
import { format } from 'prettier'
6+
import cssBase from '../styles/github-base.css?raw'
7+
import cssColorsLight from '../styles/github-colors-light.css?raw'
8+
import cssColorsDark from '../styles/github-colors-dark-media.css?raw'
79
import MarkdownItGitHubAlerts from '../src'
810

911
const CSS = `
@@ -15,99 +17,9 @@ html {
1517
box-sizing: border-box;
1618
}
1719
18-
:root {
19-
--color-border-default: #888888;
20-
--color-accent-fg: #0969da;
21-
--color-success-fg: #1a7f37;
22-
--color-attention-fg: #9a6700;
23-
--color-severe-fg: #bc4c00;
24-
--color-danger-fg: #d1242f;
25-
--color-done-fg: #8250df;
26-
}
27-
28-
@media (prefers-color-scheme: dark) {
29-
:root {
30-
--color-accent-fg: #2f81f7;
31-
--color-success-fg: #3fb950;
32-
--color-attention-fg: #d29922;
33-
--color-severe-fg: #db6d28;
34-
--color-danger-fg: #f85149;
35-
--color-done-fg: #a371f7;
36-
}
37-
}
38-
39-
.markdown-alert {
40-
padding: 0.5rem 1rem;
41-
margin-bottom: 16px;
42-
color: inherit;
43-
border-left: .25em solid var(--color-border-default);
44-
}
45-
46-
.markdown-alert>:first-child {
47-
margin-top: 0
48-
}
49-
50-
.markdown-alert>:last-child {
51-
margin-bottom: 0
52-
}
53-
54-
.markdown-alert .markdown-alert-title {
55-
display: flex;
56-
font-weight: 500;
57-
align-items: center;
58-
line-height: 1
59-
}
60-
61-
.markdown-alert .markdown-alert-title .octicon {
62-
margin-right: 0.5rem;
63-
}
64-
65-
.markdown-alert.markdown-alert-note {
66-
border-left-color: var(--color-accent-fg);
67-
}
68-
69-
.markdown-alert.markdown-alert-note .markdown-alert-title {
70-
color: var(--color-accent-fg);
71-
}
72-
73-
.markdown-alert.markdown-alert-important {
74-
border-left-color: var(--color-done-fg);
75-
}
76-
77-
.markdown-alert.markdown-alert-important .markdown-alert-title {
78-
color: var(--color-done-fg);
79-
}
80-
81-
.markdown-alert.markdown-alert-warning {
82-
border-left-color: var(--color-attention-fg);
83-
}
84-
85-
.markdown-alert.markdown-alert-warning .markdown-alert-title {
86-
color: var(--color-attention-fg);
87-
}
88-
89-
.markdown-alert.markdown-alert-tip {
90-
border-left-color: var(--color-success-fg);
91-
}
92-
93-
.markdown-alert.markdown-alert-tip .markdown-alert-title {
94-
color: var(--color-success-fg);
95-
}
96-
97-
.markdown-alert.markdown-alert-caution {
98-
border-left-color: var(--color-danger-fg);
99-
}
100-
101-
.markdown-alert.markdown-alert-caution .markdown-alert-title {
102-
color: var(--color-danger-fg);
103-
}
104-
105-
.octicon {
106-
display: inline-block;
107-
overflow: visible !important;
108-
vertical-align: text-bottom;
109-
fill: currentColor;
110-
}
20+
${cssColorsLight}
21+
${cssColorsDark}
22+
${cssBase}
11123
`
11224

11325
describe('fixtures', () => {

0 commit comments

Comments
 (0)