Stylize
Mr.Hope ... 2022-6-4 About 1 min
This plugin can stylize inline tokens including changing tags, adding attributes and modifying content.
It's useful for you to create inline snippet with it.
# Config
module.exports = {
plugins: [
[
"md-enhance",
{
stylize: [
// options here
],
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Usage
The stylize receives an array, where each element accepts 2 options:
matcher: should bestringorRegExp.replacer: a function cutomizing the matched token
For example, you can use the following cofig to transform *Recommanded* into a Badge <Badge type="tip">Recommanded</Badge>:
module.exports = {
plugins: [
[
"md-enhance",
{
stylize: [
{
match: /n't$/,
replacer: ({ tag, attrs, content }) => {
if (tag === "em")
return {
tag: "span",
attrs: { style: "color: red" },
content,
};
},
},
],
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Another example is you want a to set all the emphsis n't words to red color, so that Setting this to a invalid stytax *doesn't* have any effect. becomes: "Setting this to a invalid stytax doesn't have any effect."
module.exports = {
plugins: [
[
"md-enhance",
{
stylize: [
{
match: "Recommanded",
replacer: ({ tag, attrs }) => {
if (tag === "em")
return {
tag: "Badge",
attrs: { type: "tip" },
content: "Recommanded",
};
},
},
],
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
If you want to skip some words in some pages, you can set noStylize in page frontmatter with an array containing content you don't want to stylize.
Performance
To avoid preformance impact, you should try to avoid using RegExp for better performance unless you need it.
Also try to create snippets with RegExp having lower costs, e.g: RegExp starting with ^ and ending with $.
For example, if you only want to match "SHOULD", "MUST" and "MAY", you should write /^(?:SHOULD|M(?:UST|AY))$/u instead of /SHOULD|MUST|MAY/u. The fist one will only match 2 time with "A loo...oong content" with 1000 characters, but will match nearly 3000 times with the second RegExp.