@umijs/plugin-docs 4.0.0-canary.20220421.1 → 4.0.0-canary.20220422.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/theme-doc/NavBar.tsx +58 -15
- package/client/theme-doc/Toc.tsx +2 -2
- package/client/theme-doc/context.ts +1 -0
- package/client/theme-doc/tailwind.css +75 -11
- package/client/theme-doc/tailwind.out.css +175 -59
- package/dist/compiler.js +10 -2
- package/package.json +2 -2
|
@@ -1,27 +1,70 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { useThemeContext } from './context';
|
|
3
3
|
import useLanguage from './useLanguage';
|
|
4
4
|
|
|
5
5
|
export default () => {
|
|
6
|
-
const {
|
|
7
|
-
const lang = useLanguage();
|
|
6
|
+
const { themeConfig } = useThemeContext()!;
|
|
8
7
|
return (
|
|
9
8
|
<ul className="flex">
|
|
10
|
-
{themeConfig.navs.map((nav: any) =>
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
{themeConfig.navs.map((nav: any) => (
|
|
10
|
+
<NavItem nav={nav} key={nav.path} />
|
|
11
|
+
))}
|
|
12
|
+
</ul>
|
|
13
|
+
);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
interface NavItemProps {
|
|
17
|
+
nav: {
|
|
18
|
+
path: string;
|
|
19
|
+
title: string;
|
|
20
|
+
dropdown?: {
|
|
21
|
+
title: string;
|
|
22
|
+
path: string;
|
|
23
|
+
}[];
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function NavItem(props: NavItemProps) {
|
|
28
|
+
const { components } = useThemeContext()!;
|
|
29
|
+
const { nav } = props;
|
|
30
|
+
const lang = useLanguage();
|
|
31
|
+
const [isExpanded, setExpanded] = useState(false);
|
|
32
|
+
return (
|
|
33
|
+
<li
|
|
34
|
+
className="ml-8 dark:text-white relative"
|
|
35
|
+
onMouseEnter={() => nav.dropdown && setExpanded(true)}
|
|
36
|
+
onMouseLeave={() => nav.dropdown && setExpanded(false)}
|
|
37
|
+
>
|
|
38
|
+
<components.Link
|
|
39
|
+
to={
|
|
40
|
+
lang.isFromPath ? lang.currentLanguage?.locale + nav.path : nav.path
|
|
41
|
+
}
|
|
42
|
+
>
|
|
43
|
+
{lang.render(nav.title)}
|
|
44
|
+
</components.Link>
|
|
45
|
+
{nav.dropdown && (
|
|
46
|
+
<div
|
|
47
|
+
style={{ maxHeight: isExpanded ? nav.dropdown.length * 48 : 0 }}
|
|
48
|
+
className="absolute transition-all duration-300 w-32 rounded-lg
|
|
49
|
+
cursor-pointer shadow overflow-hidden top-8"
|
|
50
|
+
>
|
|
51
|
+
{nav.dropdown.map((n) => (
|
|
13
52
|
<components.Link
|
|
53
|
+
key={n.path}
|
|
14
54
|
to={
|
|
15
|
-
lang.isFromPath
|
|
16
|
-
? lang.currentLanguage?.locale + nav.path
|
|
17
|
-
: nav.path
|
|
55
|
+
lang.isFromPath ? lang.currentLanguage?.locale + n.path : n.path
|
|
18
56
|
}
|
|
19
57
|
>
|
|
20
|
-
|
|
58
|
+
<p
|
|
59
|
+
className="p-2 bg-white dark:bg-gray-700 dark:text-white
|
|
60
|
+
hover:bg-gray-50 transition duration-300"
|
|
61
|
+
>
|
|
62
|
+
{n.title}
|
|
63
|
+
</p>
|
|
21
64
|
</components.Link>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</
|
|
65
|
+
))}
|
|
66
|
+
</div>
|
|
67
|
+
)}
|
|
68
|
+
</li>
|
|
26
69
|
);
|
|
27
|
-
}
|
|
70
|
+
}
|
package/client/theme-doc/Toc.tsx
CHANGED
|
@@ -7,7 +7,7 @@ function getLinkFromTitle(title: string) {
|
|
|
7
7
|
return title
|
|
8
8
|
.toLowerCase()
|
|
9
9
|
.replace(/\s/g, '-')
|
|
10
|
-
.replace(/[（）]/g, '');
|
|
10
|
+
.replace(/[（）()\\{},]/g, '');
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export default () => {
|
|
@@ -53,7 +53,7 @@ export default () => {
|
|
|
53
53
|
className={item.level > 2 ? 'text-sm' : ''}
|
|
54
54
|
href={'#' + getLinkFromTitle(item.title)}
|
|
55
55
|
>
|
|
56
|
-
{item.title}
|
|
56
|
+
{item.title.replace(/\\{/g, '{').replace(/\\}/g, '}')}
|
|
57
57
|
</a>
|
|
58
58
|
</li>
|
|
59
59
|
);
|
|
@@ -51,33 +51,80 @@ article h2 a {
|
|
|
51
51
|
@apply no-underline dark:text-white;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
/* 行内代码 */
|
|
54
55
|
article code {
|
|
55
|
-
@apply text-sky-
|
|
56
|
+
@apply text-sky-600 dark:text-sky-300 bg-slate-800 bg-opacity-5 dark:bg-opacity-100 border border-black border-opacity-5 rounded-md;
|
|
56
57
|
font-size: 0.9em;
|
|
57
58
|
padding: 2px 0.25em;
|
|
58
59
|
box-decoration-break: clone;
|
|
59
60
|
font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
|
|
60
61
|
}
|
|
61
62
|
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
/* 行内高亮代码 */
|
|
64
|
+
article span[data-rehype-pretty-code-fragment] code {
|
|
65
|
+
@apply bg-zinc-900 dark:bg-zinc-900;
|
|
64
66
|
}
|
|
65
67
|
|
|
68
|
+
/* 代码块 */
|
|
66
69
|
article pre {
|
|
67
|
-
/* content-visibility: auto; */
|
|
68
70
|
contain: paint;
|
|
69
|
-
@apply
|
|
71
|
+
@apply my-4 bg-zinc-900 dark:bg-zinc-900 text-neutral-300 dark:text-neutral-300 rounded-md font-medium subpixel-antialiased transition;
|
|
72
|
+
}
|
|
73
|
+
article pre > code {
|
|
74
|
+
@apply grid leading-relaxed p-4 text-sm text-neutral-300 dark:text-neutral-300 bg-transparent dark:bg-transparent rounded-none border-none min-w-full overflow-x-auto;
|
|
75
|
+
}
|
|
76
|
+
article div[data-rehype-pretty-code-fragment] {
|
|
77
|
+
@apply my-4;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* 代码块的标题部分 */
|
|
81
|
+
article div[data-rehype-pretty-code-fragment] > div[data-rehype-pretty-code-title] {
|
|
82
|
+
@apply pb-1 text-sm text-zinc-400 dark:text-neutral-400 text-center;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* 代码块的代码部分 */
|
|
86
|
+
article div[data-rehype-pretty-code-fragment] > pre {
|
|
87
|
+
@apply pt-6 my-0;
|
|
88
|
+
}
|
|
89
|
+
article div[data-rehype-pretty-code-fragment] > pre > code {
|
|
90
|
+
@apply my-0 pt-0 px-0;
|
|
70
91
|
}
|
|
71
92
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
@apply
|
|
93
|
+
/* 代码块的使用语言 */
|
|
94
|
+
article div[data-rehype-pretty-code-fragment] > pre::before {
|
|
95
|
+
@apply fixed top-0 right-0 px-2 text-sm uppercase bg-neutral-300 text-zinc-900 bg-opacity-80 dark:bg-opacity-60 rounded-sm;
|
|
96
|
+
content: attr(data-language);
|
|
75
97
|
}
|
|
76
98
|
|
|
77
|
-
|
|
78
|
-
|
|
99
|
+
/* 代码块的代码行 */
|
|
100
|
+
article div[data-rehype-pretty-code-fragment] > pre > code .line {
|
|
101
|
+
@apply pl-3 pr-4;
|
|
79
102
|
}
|
|
80
103
|
|
|
104
|
+
/* 代码块的行内高亮文字 */
|
|
105
|
+
article div[data-rehype-pretty-code-fragment] > pre > code .line .word {
|
|
106
|
+
@apply px-1.5 inline-block bg-neutral-300 bg-opacity-20 rounded-sm;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* 代码块的行号 */
|
|
110
|
+
article div[data-rehype-pretty-code-fragment] > pre > code {
|
|
111
|
+
counter-reset: line;
|
|
112
|
+
}
|
|
113
|
+
article div[data-rehype-pretty-code-fragment] > pre > code > .line::before {
|
|
114
|
+
@apply text-neutral-600 w-4 mr-4 inline-block text-right;
|
|
115
|
+
counter-increment: line;
|
|
116
|
+
content: counter(line);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* 代码块的高亮行 */
|
|
120
|
+
article div[data-rehype-pretty-code-fragment] pre > code > .line {
|
|
121
|
+
@apply border-l-2 border-transparent;
|
|
122
|
+
}
|
|
123
|
+
article div[data-rehype-pretty-code-fragment] pre > code > .line.highlighted {
|
|
124
|
+
@apply bg-neutral-100 dark:bg-neutral-300 bg-opacity-10 dark:bg-opacity-10 border-l-blue-400 dark:border-l-sky-600;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* 链接 */
|
|
81
128
|
article a {
|
|
82
129
|
@apply mx-1 text-cyan-600 dark:text-fuchsia-200 hover:text-cyan-900 dark:hover:text-fuchsia-400 transition;
|
|
83
130
|
background-image: linear-gradient(
|
|
@@ -85,9 +132,26 @@ article a {
|
|
|
85
132
|
rgba(130, 199, 255, 0.28) 55%
|
|
86
133
|
);
|
|
87
134
|
}
|
|
135
|
+
.dark article a {
|
|
136
|
+
background-image: linear-gradient(
|
|
137
|
+
transparent 60%,
|
|
138
|
+
rgba(238, 157, 234, 0.28) 55%
|
|
139
|
+
);
|
|
140
|
+
}
|
|
88
141
|
|
|
89
|
-
|
|
142
|
+
/* 行内代码块链接 */
|
|
143
|
+
article a > code {
|
|
90
144
|
@apply text-cyan-600 dark:text-fuchsia-200 hover:text-cyan-900 dark:hover:text-fuchsia-400 transition;
|
|
145
|
+
background-image: linear-gradient(
|
|
146
|
+
transparent 60%,
|
|
147
|
+
rgba(130, 199, 255, 0.28) 55%
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
.dark article a > code {
|
|
151
|
+
background-image: linear-gradient(
|
|
152
|
+
transparent 60%,
|
|
153
|
+
rgba(238, 157, 234, 0.28) 55%
|
|
154
|
+
);
|
|
91
155
|
}
|
|
92
156
|
|
|
93
157
|
article table {
|
|
@@ -673,6 +673,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
673
673
|
top: 3rem;
|
|
674
674
|
}
|
|
675
675
|
|
|
676
|
+
.top-8 {
|
|
677
|
+
top: 2rem;
|
|
678
|
+
}
|
|
679
|
+
|
|
676
680
|
.right-2 {
|
|
677
681
|
right: 0.5rem;
|
|
678
682
|
}
|
|
@@ -731,6 +735,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
731
735
|
margin-left: 1rem;
|
|
732
736
|
}
|
|
733
737
|
|
|
738
|
+
.ml-8 {
|
|
739
|
+
margin-left: 2rem;
|
|
740
|
+
}
|
|
741
|
+
|
|
734
742
|
.mb-12 {
|
|
735
743
|
margin-bottom: 3rem;
|
|
736
744
|
}
|
|
@@ -875,6 +883,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
875
883
|
width: 2rem;
|
|
876
884
|
}
|
|
877
885
|
|
|
886
|
+
.w-32 {
|
|
887
|
+
width: 8rem;
|
|
888
|
+
}
|
|
889
|
+
|
|
878
890
|
.w-40 {
|
|
879
891
|
width: 10rem;
|
|
880
892
|
}
|
|
@@ -1571,6 +1583,8 @@ article h2 a {
|
|
|
1571
1583
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
1572
1584
|
}
|
|
1573
1585
|
|
|
1586
|
+
/* 行内代码 */
|
|
1587
|
+
|
|
1574
1588
|
article code {
|
|
1575
1589
|
border-radius: 0.375rem;
|
|
1576
1590
|
border-width: 1px;
|
|
@@ -1579,7 +1593,7 @@ article code {
|
|
|
1579
1593
|
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
|
1580
1594
|
--tw-bg-opacity: 0.05;
|
|
1581
1595
|
--tw-text-opacity: 1;
|
|
1582
|
-
color: rgb(
|
|
1596
|
+
color: rgb(2 132 199 / var(--tw-text-opacity));
|
|
1583
1597
|
}
|
|
1584
1598
|
|
|
1585
1599
|
.dark article code {
|
|
@@ -1596,39 +1610,30 @@ article code {
|
|
|
1596
1610
|
font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
|
|
1597
1611
|
}
|
|
1598
1612
|
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
--tw-
|
|
1604
|
-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
1605
|
-
--tw-bg-opacity: 0.05;
|
|
1606
|
-
padding-left: 0.375rem;
|
|
1607
|
-
padding-right: 0.375rem;
|
|
1608
|
-
padding-top: 0.125rem;
|
|
1609
|
-
padding-bottom: 0.125rem;
|
|
1610
|
-
font-size: 0.75rem;
|
|
1611
|
-
line-height: 1rem;
|
|
1613
|
+
/* 行内高亮代码 */
|
|
1614
|
+
|
|
1615
|
+
article span[data-rehype-pretty-code-fragment] code {
|
|
1616
|
+
--tw-bg-opacity: 1;
|
|
1617
|
+
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
|
|
1612
1618
|
}
|
|
1613
1619
|
|
|
1614
|
-
.dark article
|
|
1620
|
+
.dark article span[data-rehype-pretty-code-fragment] code {
|
|
1615
1621
|
--tw-bg-opacity: 1;
|
|
1616
|
-
background-color: rgb(
|
|
1617
|
-
--tw-text-opacity: 1;
|
|
1618
|
-
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
1622
|
+
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
|
|
1619
1623
|
}
|
|
1620
1624
|
|
|
1625
|
+
/* 代码块 */
|
|
1626
|
+
|
|
1621
1627
|
article pre {
|
|
1622
|
-
/* content-visibility: auto; */
|
|
1623
1628
|
contain: paint;
|
|
1624
1629
|
margin-top: 1rem;
|
|
1625
1630
|
margin-bottom: 1rem;
|
|
1626
|
-
|
|
1627
|
-
border-radius: 0.75rem;
|
|
1631
|
+
border-radius: 0.375rem;
|
|
1628
1632
|
--tw-bg-opacity: 1;
|
|
1629
1633
|
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
|
|
1630
|
-
padding: 1rem;
|
|
1631
1634
|
font-weight: 500;
|
|
1635
|
+
--tw-text-opacity: 1;
|
|
1636
|
+
color: rgb(212 212 212 / var(--tw-text-opacity));
|
|
1632
1637
|
-webkit-font-smoothing: auto;
|
|
1633
1638
|
-moz-osx-font-smoothing: auto;
|
|
1634
1639
|
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
|
|
@@ -1642,63 +1647,151 @@ article pre {
|
|
|
1642
1647
|
--tw-bg-opacity: 1;
|
|
1643
1648
|
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
|
|
1644
1649
|
--tw-text-opacity: 1;
|
|
1645
|
-
color: rgb(
|
|
1650
|
+
color: rgb(212 212 212 / var(--tw-text-opacity));
|
|
1646
1651
|
}
|
|
1647
1652
|
|
|
1648
|
-
article pre code {
|
|
1649
|
-
|
|
1650
|
-
display: inline-block;
|
|
1653
|
+
article pre > code {
|
|
1654
|
+
display: grid;
|
|
1651
1655
|
min-width: 100%;
|
|
1656
|
+
overflow-x: auto;
|
|
1652
1657
|
border-radius: 0px;
|
|
1653
1658
|
border-style: none;
|
|
1654
1659
|
background-color: transparent;
|
|
1655
|
-
padding:
|
|
1660
|
+
padding: 1rem;
|
|
1656
1661
|
font-size: 0.875rem;
|
|
1657
1662
|
line-height: 1.25rem;
|
|
1663
|
+
line-height: 1.625;
|
|
1658
1664
|
--tw-text-opacity: 1;
|
|
1659
1665
|
color: rgb(212 212 212 / var(--tw-text-opacity));
|
|
1660
|
-
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
|
|
1661
|
-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
1662
|
-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
|
|
1663
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1664
|
-
transition-duration: 150ms;
|
|
1665
1666
|
}
|
|
1666
1667
|
|
|
1667
|
-
.dark article pre code {
|
|
1668
|
+
.dark article pre > code {
|
|
1668
1669
|
background-color: transparent;
|
|
1669
1670
|
--tw-text-opacity: 1;
|
|
1670
1671
|
color: rgb(212 212 212 / var(--tw-text-opacity));
|
|
1671
1672
|
}
|
|
1672
1673
|
|
|
1673
|
-
article
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
|
|
1677
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1678
|
-
transition-duration: 150ms;
|
|
1674
|
+
article div[data-rehype-pretty-code-fragment] {
|
|
1675
|
+
margin-top: 1rem;
|
|
1676
|
+
margin-bottom: 1rem;
|
|
1679
1677
|
}
|
|
1680
1678
|
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
height: 1.25rem;
|
|
1688
|
-
-
|
|
1689
|
-
|
|
1690
|
-
-ms-user-select: none;
|
|
1691
|
-
user-select: none;
|
|
1692
|
-
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
|
1693
|
-
content: var(--tw-content);
|
|
1694
|
-
--tw-bg-opacity: 0.1;
|
|
1679
|
+
/* 代码块的标题部分 */
|
|
1680
|
+
|
|
1681
|
+
article div[data-rehype-pretty-code-fragment] > div[data-rehype-pretty-code-title] {
|
|
1682
|
+
padding-bottom: 0.25rem;
|
|
1683
|
+
text-align: center;
|
|
1684
|
+
font-size: 0.875rem;
|
|
1685
|
+
line-height: 1.25rem;
|
|
1686
|
+
--tw-text-opacity: 1;
|
|
1687
|
+
color: rgb(161 161 170 / var(--tw-text-opacity));
|
|
1695
1688
|
}
|
|
1696
1689
|
|
|
1697
|
-
.dark article
|
|
1690
|
+
.dark article div[data-rehype-pretty-code-fragment] > div[data-rehype-pretty-code-title] {
|
|
1698
1691
|
--tw-text-opacity: 1;
|
|
1699
|
-
color: rgb(
|
|
1692
|
+
color: rgb(163 163 163 / var(--tw-text-opacity));
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
/* 代码块的代码部分 */
|
|
1696
|
+
|
|
1697
|
+
article div[data-rehype-pretty-code-fragment] > pre {
|
|
1698
|
+
margin-top: 0px;
|
|
1699
|
+
margin-bottom: 0px;
|
|
1700
|
+
padding-top: 1.5rem;
|
|
1701
|
+
}
|
|
1702
|
+
|
|
1703
|
+
article div[data-rehype-pretty-code-fragment] > pre > code {
|
|
1704
|
+
margin-top: 0px;
|
|
1705
|
+
margin-bottom: 0px;
|
|
1706
|
+
padding-left: 0px;
|
|
1707
|
+
padding-right: 0px;
|
|
1708
|
+
padding-top: 0px;
|
|
1700
1709
|
}
|
|
1701
1710
|
|
|
1711
|
+
/* 代码块的使用语言 */
|
|
1712
|
+
|
|
1713
|
+
article div[data-rehype-pretty-code-fragment] > pre::before {
|
|
1714
|
+
position: fixed;
|
|
1715
|
+
top: 0px;
|
|
1716
|
+
right: 0px;
|
|
1717
|
+
border-radius: 0.125rem;
|
|
1718
|
+
background-color: rgb(212 212 212 / var(--tw-bg-opacity));
|
|
1719
|
+
--tw-bg-opacity: 0.8;
|
|
1720
|
+
padding-left: 0.5rem;
|
|
1721
|
+
padding-right: 0.5rem;
|
|
1722
|
+
font-size: 0.875rem;
|
|
1723
|
+
line-height: 1.25rem;
|
|
1724
|
+
text-transform: uppercase;
|
|
1725
|
+
--tw-text-opacity: 1;
|
|
1726
|
+
color: rgb(24 24 27 / var(--tw-text-opacity));
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
.dark article div[data-rehype-pretty-code-fragment] > pre::before {
|
|
1730
|
+
--tw-bg-opacity: 0.6;
|
|
1731
|
+
}
|
|
1732
|
+
|
|
1733
|
+
article div[data-rehype-pretty-code-fragment] > pre::before {
|
|
1734
|
+
content: attr(data-language);
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1737
|
+
/* 代码块的代码行 */
|
|
1738
|
+
|
|
1739
|
+
article div[data-rehype-pretty-code-fragment] > pre > code .line {
|
|
1740
|
+
padding-left: 0.75rem;
|
|
1741
|
+
padding-right: 1rem;
|
|
1742
|
+
}
|
|
1743
|
+
|
|
1744
|
+
/* 代码块的行内高亮文字 */
|
|
1745
|
+
|
|
1746
|
+
article div[data-rehype-pretty-code-fragment] > pre > code .line .word {
|
|
1747
|
+
display: inline-block;
|
|
1748
|
+
border-radius: 0.125rem;
|
|
1749
|
+
background-color: rgb(212 212 212 / var(--tw-bg-opacity));
|
|
1750
|
+
--tw-bg-opacity: 0.2;
|
|
1751
|
+
padding-left: 0.375rem;
|
|
1752
|
+
padding-right: 0.375rem;
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1755
|
+
/* 代码块的行号 */
|
|
1756
|
+
|
|
1757
|
+
article div[data-rehype-pretty-code-fragment] > pre > code {
|
|
1758
|
+
counter-reset: line;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
article div[data-rehype-pretty-code-fragment] > pre > code > .line::before {
|
|
1762
|
+
margin-right: 1rem;
|
|
1763
|
+
display: inline-block;
|
|
1764
|
+
width: 1rem;
|
|
1765
|
+
text-align: right;
|
|
1766
|
+
--tw-text-opacity: 1;
|
|
1767
|
+
color: rgb(82 82 82 / var(--tw-text-opacity));
|
|
1768
|
+
counter-increment: line;
|
|
1769
|
+
content: counter(line);
|
|
1770
|
+
}
|
|
1771
|
+
|
|
1772
|
+
/* 代码块的高亮行 */
|
|
1773
|
+
|
|
1774
|
+
article div[data-rehype-pretty-code-fragment] pre > code > .line {
|
|
1775
|
+
border-left-width: 2px;
|
|
1776
|
+
border-color: transparent;
|
|
1777
|
+
}
|
|
1778
|
+
|
|
1779
|
+
article div[data-rehype-pretty-code-fragment] pre > code > .line.highlighted {
|
|
1780
|
+
--tw-border-opacity: 1;
|
|
1781
|
+
border-left-color: rgb(96 165 250 / var(--tw-border-opacity));
|
|
1782
|
+
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
|
|
1783
|
+
--tw-bg-opacity: 0.1;
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1786
|
+
.dark article div[data-rehype-pretty-code-fragment] pre > code > .line.highlighted {
|
|
1787
|
+
--tw-border-opacity: 1;
|
|
1788
|
+
border-left-color: rgb(2 132 199 / var(--tw-border-opacity));
|
|
1789
|
+
background-color: rgb(212 212 212 / var(--tw-bg-opacity));
|
|
1790
|
+
--tw-bg-opacity: 0.1;
|
|
1791
|
+
}
|
|
1792
|
+
|
|
1793
|
+
/* 链接 */
|
|
1794
|
+
|
|
1702
1795
|
article a {
|
|
1703
1796
|
margin-left: 0.25rem;
|
|
1704
1797
|
margin-right: 0.25rem;
|
|
@@ -1733,7 +1826,16 @@ article a {
|
|
|
1733
1826
|
);
|
|
1734
1827
|
}
|
|
1735
1828
|
|
|
1736
|
-
article a
|
|
1829
|
+
.dark article a {
|
|
1830
|
+
background-image: linear-gradient(
|
|
1831
|
+
transparent 60%,
|
|
1832
|
+
rgba(238, 157, 234, 0.28) 55%
|
|
1833
|
+
);
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
/* 行内代码块链接 */
|
|
1837
|
+
|
|
1838
|
+
article a > code {
|
|
1737
1839
|
--tw-text-opacity: 1;
|
|
1738
1840
|
color: rgb(8 145 178 / var(--tw-text-opacity));
|
|
1739
1841
|
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
|
|
@@ -1743,21 +1845,35 @@ article a code {
|
|
|
1743
1845
|
transition-duration: 150ms;
|
|
1744
1846
|
}
|
|
1745
1847
|
|
|
1746
|
-
article a code:hover {
|
|
1848
|
+
article a > code:hover {
|
|
1747
1849
|
--tw-text-opacity: 1;
|
|
1748
1850
|
color: rgb(22 78 99 / var(--tw-text-opacity));
|
|
1749
1851
|
}
|
|
1750
1852
|
|
|
1751
|
-
.dark article a code {
|
|
1853
|
+
.dark article a > code {
|
|
1752
1854
|
--tw-text-opacity: 1;
|
|
1753
1855
|
color: rgb(245 208 254 / var(--tw-text-opacity));
|
|
1754
1856
|
}
|
|
1755
1857
|
|
|
1756
|
-
.dark article a code:hover {
|
|
1858
|
+
.dark article a > code:hover {
|
|
1757
1859
|
--tw-text-opacity: 1;
|
|
1758
1860
|
color: rgb(232 121 249 / var(--tw-text-opacity));
|
|
1759
1861
|
}
|
|
1760
1862
|
|
|
1863
|
+
article a > code {
|
|
1864
|
+
background-image: linear-gradient(
|
|
1865
|
+
transparent 60%,
|
|
1866
|
+
rgba(130, 199, 255, 0.28) 55%
|
|
1867
|
+
);
|
|
1868
|
+
}
|
|
1869
|
+
|
|
1870
|
+
.dark article a > code {
|
|
1871
|
+
background-image: linear-gradient(
|
|
1872
|
+
transparent 60%,
|
|
1873
|
+
rgba(238, 157, 234, 0.28) 55%
|
|
1874
|
+
);
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1761
1877
|
article table {
|
|
1762
1878
|
margin-top: 2rem;
|
|
1763
1879
|
margin-bottom: 2rem;
|
package/dist/compiler.js
CHANGED
|
@@ -30,9 +30,16 @@ const rehypePrettyCodeOptions = {
|
|
|
30
30
|
node.children = [{ type: 'text', value: ' ' }];
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
|
+
// 允许高亮代码行
|
|
34
|
+
// 对于高亮的代码行，设置为 highlighted 样式表类
|
|
33
35
|
onVisitHighlightedLine(node) {
|
|
34
36
|
node.properties.className.push('highlighted');
|
|
35
37
|
},
|
|
38
|
+
// 允许高亮代码文字
|
|
39
|
+
// 对于高亮的代码文字，设置为 word 样式表类
|
|
40
|
+
onVisitHighlightedWord(node) {
|
|
41
|
+
node.properties.className = ['word'];
|
|
42
|
+
},
|
|
36
43
|
};
|
|
37
44
|
function compile(opts) {
|
|
38
45
|
return __awaiter(this, void 0, void 0, function* () {
|
|
@@ -50,8 +57,9 @@ function MDXContent(props = {}) {
|
|
|
50
57
|
useEffect(() => {
|
|
51
58
|
if (window.location.hash.length !== 0) {
|
|
52
59
|
const hash = window.location.hash;
|
|
53
|
-
|
|
54
|
-
|
|
60
|
+
document.getElementById(hash.slice(1))?.scrollIntoView();
|
|
61
|
+
} else {
|
|
62
|
+
window.scrollTo(0, 0);
|
|
55
63
|
}
|
|
56
64
|
}, []);
|
|
57
65
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umijs/plugin-docs",
|
|
3
|
-
"version": "4.0.0-canary.
|
|
3
|
+
"version": "4.0.0-canary.20220422.3",
|
|
4
4
|
"description": "@umijs/plugin-docs",
|
|
5
5
|
"homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugin-docs#readme",
|
|
6
6
|
"bugs": "https://github.com/umijs/umi-next/issues",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"rehype-slug": "5.0.1",
|
|
40
40
|
"remark-gfm": "^3.0.1",
|
|
41
41
|
"tailwindcss": "^3.0.23",
|
|
42
|
-
"umi": "4.0.0-canary.
|
|
42
|
+
"umi": "4.0.0-canary.20220422.3"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|