Skip to content

Commit d59916b

Browse files
fzanklfzankl
authored
Added support for docsify v5. (#45)
1 parent fba2889 commit d59916b

File tree

5 files changed

+277
-9
lines changed

5 files changed

+277
-9
lines changed

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ module.exports = defineConfig([{
1111
...globals.commonjs,
1212
...globals.node,
1313
},
14-
ecmaVersion: 6,
14+
ecmaVersion: 2020,
1515
sourceType: 'module',
1616
parserOptions: {},
1717
},

‎samples/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
</head>
55
<body>
66
<h4>docsify-plugin-flexible-alerts</h4>
7-
<a href="./v4/index.html">Demo for docsify@v4</a>
8-
</body>
7+
<p><a href="./v4/index.html">Demo for docsify@v4</a></p>
8+
<p><a href="./v5/index.html">Demo for docsify@v5</a></p>
9+
</body>
910
</html>

‎samples/v5/README.md‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
# docsify-plugin-flexible-alerts
2+
3+
## Note
4+
5+
> [!NOTE]
6+
> An alert of type 'note' using global style 'callout'.
7+
8+
<!-- -->
9+
> [!NOTE|labelVisibility:hidden|iconVisibility:hidden]
10+
> An alert of type 'note' using global style 'callout'.<br/>
11+
> In addition, title and icon are hidden which are both alert specific options.
12+
13+
<!-- -->
14+
> [!NOTE|label:Specific heading]
15+
> An alert of type 'note' using global style 'callout'.<br/>
16+
> In addition, we use an alert specific title which overrides default ones.
17+
18+
<!-- -->
19+
> [!NOTE|style:flat]
20+
> An alert of type 'note' using specific style 'flat' and overrides global style 'callout'.
21+
22+
<!-- -->
23+
> [!NOTE|style:flat|labelVisibility:hidden|iconVisibility:hidden]
24+
> An alert of type 'note' using specific style 'flat' and overrides global style 'callout'.
25+
>
26+
> In addition, title is hidden which is also an alert specific option.
27+
28+
## Info
29+
30+
> [!INFO]
31+
> An alert of type 'info' using global style 'callout'.
32+
33+
<!-- -->
34+
> [!INFO|labelVisibility:hidden|iconVisibility:hidden]
35+
> An alert of type 'info' using global style 'callout'.<br/>
36+
> In addition, title and icon are hidden which are both alert specific options.
37+
38+
<!-- -->
39+
> [!INFO|label:Specific heading]
40+
> An alert of type 'info' using global style 'callout'.<br/>
41+
> In addition, we use an alert specific title which overrides default ones.
42+
43+
<!-- -->
44+
> [!INFO|style:flat]
45+
> An alert of type 'info' using specific style 'flat' and overrides global style 'callout'.
46+
47+
<!-- -->
48+
> [!INFO|style:flat|labelVisibility:hidden|iconVisibility:hidden]
49+
> An alert of type 'info' using specific style 'flat' and overrides global style 'callout'.
50+
>
51+
> In addition, title is hidden which is also an alert specific option.
52+
53+
## Tip
54+
55+
> [!TIP]
56+
> An alert of type 'tip' using global style 'callout'.
57+
58+
<!-- -->
59+
> [!TIP|labelVisibility:hidden|iconVisibility:hidden]
60+
> An alert of type 'tip' using global style 'callout'.<br/>
61+
> In addition, title and icon are hidden which are both alert specific options.
62+
63+
<!-- -->
64+
> [!TIP|label:Specific heading]
65+
> An alert of type 'tip' using global style 'callout'.<br/>
66+
> In addition, we use an alert specific title which overrides default ones.
67+
68+
<!-- -->
69+
> [!TIP|style:flat]
70+
> An alert of type 'tip' using specific style 'flat' and overrides global style 'callout'.
71+
72+
<!-- -->
73+
> [!TIP|style:flat|labelVisibility:hidden|iconVisibility:hidden]
74+
> An alert of type 'tip' using specific style 'flat' and overrides global style 'callout'.
75+
>
76+
> In addition, title is hidden which is also an alert specific option.
77+
78+
## Warning
79+
80+
> [!WARNING]
81+
> An alert of type 'warning' using global style 'callout'.
82+
83+
<!-- -->
84+
> [!WARNING|labelVisibility:hidden|iconVisibility:hidden]
85+
> An alert of type 'warning' using global style 'callout'.<br/>
86+
> In addition, title and icon are hidden which are both alert specific options.
87+
88+
<!-- -->
89+
> [!WARNING|label:Specific heading]
90+
> An alert of type 'warning' using global style 'callout'.<br/>
91+
> In addition, we use an alert specific title which overrides default ones.
92+
93+
<!-- -->
94+
> [!WARNING|style:flat]
95+
> An alert of type 'warning' using specific style 'flat' and overrides global style 'callout'.
96+
97+
<!-- -->
98+
> [!WARNING|style:flat|labelVisibility:hidden|iconVisibility:hidden]
99+
> An alert of type 'warning' using specific style 'flat' and overrides global style 'callout'.
100+
>
101+
> In addition, title is hidden which is also an alert specific option.
102+
103+
## Important
104+
105+
> [!IMPORTANT]
106+
> An alert of type 'important' using global style 'callout'.
107+
108+
<!-- -->
109+
> [!IMPORTANT|labelVisibility:hidden|iconVisibility:hidden]
110+
> An alert of type 'important' using global style 'callout'.<br/>
111+
> In addition, title and icon are hidden which are both alert specific options.
112+
113+
<!-- -->
114+
> [!IMPORTANT|label:Specific heading]
115+
> An alert of type 'important' using global style 'callout'.<br/>
116+
> In addition, we use an alert specific title which overrides default ones.
117+
118+
<!-- -->
119+
> [!IMPORTANT|style:flat]
120+
> An alert of type 'important' using specific style 'flat' and overrides global style 'callout'.
121+
122+
<!-- -->
123+
> [!IMPORTANT|style:flat|labelVisibility:hidden|iconVisibility:hidden]
124+
> An alert of type 'important' using specific style 'flat' and overrides global style 'callout'.
125+
>
126+
> In addition, title is hidden which is also an alert specific option.
127+
128+
## Danger
129+
130+
> [!DANGER]
131+
> An alert of type 'danger' using global style 'callout'.
132+
133+
<!-- -->
134+
> [!DANGER|labelVisibility:hidden|iconVisibility:hidden]
135+
> An alert of type 'danger' using global style 'callout'.<br/>
136+
> In addition, title and icon are hidden which are both alert specific options.
137+
138+
<!-- -->
139+
> [!DANGER|label:Specific heading]
140+
> An alert of type 'danger' using global style 'callout'.<br/>
141+
> In addition, we use an alert specific title which overrides default ones.
142+
143+
<!-- -->
144+
> [!DANGER|style:flat]
145+
> An alert of type 'danger' using specific style 'flat' and overrides global style 'callout'.
146+
147+
<!-- -->
148+
> [!DANGER|style:flat|labelVisibility:hidden|iconVisibility:hidden]
149+
> An alert of type 'danger' using specific style 'flat' and overrides global style 'callout'.
150+
>
151+
> In addition, title is hidden which is also an alert specific option.
152+
153+
## Attention
154+
155+
> [!ATTENTION]
156+
> An alert of type 'attention' using global style 'callout'.
157+
158+
<!-- -->
159+
> [!ATTENTION|labelVisibility:hidden|iconVisibility:hidden]
160+
> An alert of type 'attention' using global style 'callout'.<br/>
161+
> In addition, title and icon are hidden which are both alert specific options.
162+
163+
<!-- -->
164+
> [!ATTENTION|label:Specific heading]
165+
> An alert of type 'attention' using global style 'callout'.<br/>
166+
> In addition, we use an alert specific title which overrides default ones.
167+
168+
<!-- -->
169+
> [!ATTENTION|style:flat]
170+
> An alert of type 'attention' using specific style 'flat' and overrides global style 'callout'.
171+
172+
<!-- -->
173+
> [!ATTENTION|style:flat|labelVisibility:hidden|iconVisibility:hidden]
174+
> An alert of type 'attention' using specific style 'flat' and overrides global style 'callout'.
175+
>
176+
> In addition, title is hidden which is also an alert specific option.
177+
178+
## Examples concerning various issues
179+
180+
> [!TIP]
181+
> This is the description.
182+
183+
<!-- -->
184+
> [!TIP] This is the description.
185+
186+
<!-- -->
187+
> [!ATTENTION]
188+
> This is the description.
189+
190+
<!-- -->
191+
> [!ATTENTION]
192+
> This is the description.
193+
194+
<!-- -->
195+
> [!TIP|label:An example of pom.xml]
196+
> This is the description.
197+
198+
<!-- -->
199+
> [!TIP|label:自定义标题]
200+
> 可以显示中文标题。
201+
202+
<!-- -->
203+
> [!warning]
204+
> 可以显示中文标题。<br>
205+
> 可以显示中文标题。
206+
207+
<!-- -->
208+
> [!TIP|label:внимание|iconVisibility:visible]
209+
> Это тест для сообщений
210+
211+
<!-- -->
212+
> Regular blockquotes can be used further.

‎samples/v5/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>docsify-plugin-flexible-alerts</title>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7+
<meta name="description" content="Description">
8+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9+
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
10+
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
11+
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css" title="docsify-darklight-theme" type="text/css" />
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
16+
<script>
17+
window.$docsify = {
18+
name: 'Plugin demo',
19+
repo: '',
20+
search: 'auto',
21+
'flexible-alerts': {
22+
comment: {
23+
label: "Comment",
24+
icon: "fas fa-comment",
25+
className: "note"
26+
}
27+
}
28+
}
29+
</script>
30+
<script src="//unpkg.com/[email protected]/dist/docsify.min.js"></script>
31+
<script src="//unpkg.com/[email protected]/dist/plugins/search.min.js"></script>
32+
<script src="../docsify-plugin-flexible-alerts.js"></script>
33+
<script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js" type="text/javascript">
34+
</script>
35+
</body>
36+
</html>

‎src/index.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ import styles from './style.scss';
6464
return callback ? callback(match[1]) : match[1];
6565
};
6666

67-
hook.afterEach(function (html, next) {
68-
const modifiedHtml = html.replace(/<\s*blockquote[^>]*>\s+?(?:<p>)?\[!(\w*)((?:\|[\w*:[\u002E\s\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF-]*)*?)]([\s\S]*?)(?:<\/p>)?<\s*\/\s*blockquote>/g, function (match, key, settings, value) {
67+
hook.afterEach((html) => {
68+
return html.replace(/<\s*blockquote[^>]*>\s?(?:<p>)?\[!(\w*)((?:\|[\w*:[\u002E\s\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF-]*)*?)]([\s\S]*?)(?:<\/p>)?<\s*\/\s*blockquote>/g, function (match, key, settings, value) {
6969

7070
if (!options[key.toLowerCase()] && options.typeMappings[key.toLowerCase()]) {
7171
key = options.typeMappings[key.toLowerCase()];
@@ -110,11 +110,30 @@ import styles from './style.scss';
110110
</div>`
111111
);
112112
});
113-
114-
next(modifiedHtml);
115113
});
116114
};
117115

118-
window.$docsify = window.$docsify || {};
119-
window.$docsify.plugins = [].concat(install, window.$docsify.plugins);
116+
const docsify = window.$docsify || {};
117+
const docsifyMajorVersion = window.Docsify.version.split('.')[0];
118+
119+
if (docsifyMajorVersion <= 4) {
120+
window.$docsify = {
121+
...docsify,
122+
plugins: [].concat(install, docsify.plugins)
123+
};
124+
} else {
125+
// docsify v5 overrides the blockquote renderer to inject its own callout alert style.
126+
// To support v5 with this plugin we need to ensure that the blockquote is rendered using the v4 style.
127+
window.$docsify = {
128+
...docsify,
129+
plugins: [].concat(install, docsify.plugins),
130+
markdown: {
131+
renderer: {
132+
blockquote: function ({tokens}) {
133+
return `<blockquote>${this.parser.parse(tokens)}</blockquote>`;
134+
}
135+
}
136+
}
137+
};
138+
}
120139
}());

0 commit comments

Comments
 (0)