@docusaurus/theme-classic 0.0.0-4859 → 0.0.0-4860
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/lib/theme-classic.d.ts +1 -0
- package/lib-next/theme/CodeBlock/index.js +34 -11
- package/lib-next/theme/CodeBlock/styles.module.css +35 -1
- package/package.json +13 -13
- package/src/theme/CodeBlock/index.tsx +31 -6
- package/src/theme/CodeBlock/styles.module.css +35 -1
- package/src/theme-classic.d.ts +1 -0
package/lib/theme-classic.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
parseCodeBlockTitle,
|
|
13
13
|
parseLanguage,
|
|
14
14
|
parseLines,
|
|
15
|
+
containsLineNumbers,
|
|
15
16
|
ThemeClassNames,
|
|
16
17
|
usePrismTheme,
|
|
17
18
|
} from '@docusaurus/theme-common';
|
|
@@ -22,6 +23,7 @@ export default function CodeBlock({
|
|
|
22
23
|
className: blockClassName = '',
|
|
23
24
|
metastring,
|
|
24
25
|
title,
|
|
26
|
+
showLineNumbers,
|
|
25
27
|
language: languageProp,
|
|
26
28
|
}) {
|
|
27
29
|
const {prism} = useThemeConfig();
|
|
@@ -76,6 +78,8 @@ export default function CodeBlock({
|
|
|
76
78
|
const language =
|
|
77
79
|
languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
|
|
78
80
|
const {highlightLines, code} = parseLines(content, metastring, language);
|
|
81
|
+
const shouldShowLineNumbers =
|
|
82
|
+
showLineNumbers || containsLineNumbers(metastring);
|
|
79
83
|
return (
|
|
80
84
|
<Highlight
|
|
81
85
|
{...defaultProps}
|
|
@@ -104,7 +108,11 @@ export default function CodeBlock({
|
|
|
104
108
|
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
|
|
105
109
|
tabIndex={0}
|
|
106
110
|
className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
|
|
107
|
-
<code
|
|
111
|
+
<code
|
|
112
|
+
className={clsx(
|
|
113
|
+
styles.codeBlockLines,
|
|
114
|
+
shouldShowLineNumbers && styles.codeBlockLinesWithNumbering,
|
|
115
|
+
)}>
|
|
108
116
|
{tokens.map((line, i) => {
|
|
109
117
|
if (line.length === 1 && line[0].content === '\n') {
|
|
110
118
|
line[0].content = '';
|
|
@@ -113,24 +121,39 @@ export default function CodeBlock({
|
|
|
113
121
|
const lineProps = getLineProps({
|
|
114
122
|
line,
|
|
115
123
|
key: i,
|
|
124
|
+
...(shouldShowLineNumbers && {
|
|
125
|
+
className: styles.codeLine,
|
|
126
|
+
}),
|
|
116
127
|
});
|
|
117
128
|
|
|
118
129
|
if (highlightLines.includes(i)) {
|
|
119
130
|
lineProps.className += ' docusaurus-highlight-code-line';
|
|
120
131
|
}
|
|
121
132
|
|
|
133
|
+
const lineTokens = line.map((token, key) => (
|
|
134
|
+
<span
|
|
135
|
+
key={key}
|
|
136
|
+
{...getTokenProps({
|
|
137
|
+
token,
|
|
138
|
+
key,
|
|
139
|
+
})}
|
|
140
|
+
/>
|
|
141
|
+
));
|
|
122
142
|
return (
|
|
123
143
|
<span key={i} {...lineProps}>
|
|
124
|
-
{
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
{
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
144
|
+
{shouldShowLineNumbers ? (
|
|
145
|
+
<>
|
|
146
|
+
<span className={styles.codeLineNumber} />
|
|
147
|
+
<span className={styles.codeLineContent}>
|
|
148
|
+
{lineTokens}
|
|
149
|
+
</span>
|
|
150
|
+
</>
|
|
151
|
+
) : (
|
|
152
|
+
<>
|
|
153
|
+
{lineTokens}
|
|
154
|
+
<br />
|
|
155
|
+
</>
|
|
156
|
+
)}
|
|
134
157
|
</span>
|
|
135
158
|
);
|
|
136
159
|
})}
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.codeBlock {
|
|
31
|
+
--ifm-pre-background: inherit;
|
|
31
32
|
margin: 0;
|
|
32
33
|
padding: 0;
|
|
33
|
-
background-color: inherit;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.codeBlockTitle + .codeBlockContent .codeBlock {
|
|
@@ -44,14 +44,48 @@
|
|
|
44
44
|
|
|
45
45
|
.codeBlockLines {
|
|
46
46
|
font: inherit;
|
|
47
|
+
background: var(--ifm-pre-background);
|
|
47
48
|
/* rtl:ignore */
|
|
48
49
|
float: left;
|
|
49
50
|
min-width: 100%;
|
|
50
51
|
padding: var(--ifm-pre-padding);
|
|
51
52
|
}
|
|
52
53
|
|
|
54
|
+
.codeBlockLinesWithNumbering {
|
|
55
|
+
display: table;
|
|
56
|
+
padding: var(--ifm-pre-padding) 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
53
59
|
@media print {
|
|
54
60
|
.codeBlockLines {
|
|
55
61
|
white-space: pre-wrap;
|
|
56
62
|
}
|
|
57
63
|
}
|
|
64
|
+
|
|
65
|
+
.codeLine {
|
|
66
|
+
display: table-row;
|
|
67
|
+
counter-increment: line-count;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.codeLineNumber {
|
|
71
|
+
display: table-cell;
|
|
72
|
+
text-align: right;
|
|
73
|
+
width: 1%;
|
|
74
|
+
position: sticky;
|
|
75
|
+
left: 0;
|
|
76
|
+
padding: 0 var(--ifm-pre-padding);
|
|
77
|
+
background: var(--ifm-pre-background);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.codeLineNumber::before {
|
|
81
|
+
content: counter(line-count);
|
|
82
|
+
opacity: 0.4;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:global(.docusaurus-highlight-code-line) .codeLineNumber::before {
|
|
86
|
+
opacity: 0.8;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.codeLineContent {
|
|
90
|
+
padding-right: var(--ifm-pre-padding);
|
|
91
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docusaurus/theme-classic",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-4860",
|
|
4
4
|
"description": "Classic theme for Docusaurus",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/theme-classic.d.ts",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
"format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@docusaurus/core": "0.0.0-
|
|
25
|
-
"@docusaurus/plugin-content-blog": "0.0.0-
|
|
26
|
-
"@docusaurus/plugin-content-docs": "0.0.0-
|
|
27
|
-
"@docusaurus/plugin-content-pages": "0.0.0-
|
|
28
|
-
"@docusaurus/theme-common": "0.0.0-
|
|
29
|
-
"@docusaurus/theme-translations": "0.0.0-
|
|
30
|
-
"@docusaurus/utils": "0.0.0-
|
|
31
|
-
"@docusaurus/utils-common": "0.0.0-
|
|
32
|
-
"@docusaurus/utils-validation": "0.0.0-
|
|
24
|
+
"@docusaurus/core": "0.0.0-4860",
|
|
25
|
+
"@docusaurus/plugin-content-blog": "0.0.0-4860",
|
|
26
|
+
"@docusaurus/plugin-content-docs": "0.0.0-4860",
|
|
27
|
+
"@docusaurus/plugin-content-pages": "0.0.0-4860",
|
|
28
|
+
"@docusaurus/theme-common": "0.0.0-4860",
|
|
29
|
+
"@docusaurus/theme-translations": "0.0.0-4860",
|
|
30
|
+
"@docusaurus/utils": "0.0.0-4860",
|
|
31
|
+
"@docusaurus/utils-common": "0.0.0-4860",
|
|
32
|
+
"@docusaurus/utils-validation": "0.0.0-4860",
|
|
33
33
|
"@mdx-js/react": "^1.6.22",
|
|
34
34
|
"clsx": "^1.1.1",
|
|
35
35
|
"copy-text-to-clipboard": "^3.0.1",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"@babel/cli": "^7.17.6",
|
|
46
46
|
"@babel/core": "^7.17.9",
|
|
47
47
|
"@babel/preset-typescript": "^7.16.7",
|
|
48
|
-
"@docusaurus/module-type-aliases": "0.0.0-
|
|
49
|
-
"@docusaurus/types": "0.0.0-
|
|
48
|
+
"@docusaurus/module-type-aliases": "0.0.0-4860",
|
|
49
|
+
"@docusaurus/types": "0.0.0-4860",
|
|
50
50
|
"@types/mdx-js__react": "^1.5.5",
|
|
51
51
|
"@types/prismjs": "^1.26.0",
|
|
52
52
|
"@types/rtlcss": "^3.1.3",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"engines": {
|
|
63
63
|
"node": ">=14"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "dd89ce688ef649f835f2bf6be614c6997ba47165"
|
|
66
66
|
}
|
|
@@ -13,6 +13,7 @@ import {
|
|
|
13
13
|
parseCodeBlockTitle,
|
|
14
14
|
parseLanguage,
|
|
15
15
|
parseLines,
|
|
16
|
+
containsLineNumbers,
|
|
16
17
|
ThemeClassNames,
|
|
17
18
|
usePrismTheme,
|
|
18
19
|
} from '@docusaurus/theme-common';
|
|
@@ -26,6 +27,7 @@ export default function CodeBlock({
|
|
|
26
27
|
className: blockClassName = '',
|
|
27
28
|
metastring,
|
|
28
29
|
title,
|
|
30
|
+
showLineNumbers,
|
|
29
31
|
language: languageProp,
|
|
30
32
|
}: Props): JSX.Element {
|
|
31
33
|
const {prism} = useThemeConfig();
|
|
@@ -87,6 +89,8 @@ export default function CodeBlock({
|
|
|
87
89
|
const language =
|
|
88
90
|
languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
|
|
89
91
|
const {highlightLines, code} = parseLines(content, metastring, language);
|
|
92
|
+
const shouldShowLineNumbers =
|
|
93
|
+
showLineNumbers || containsLineNumbers(metastring);
|
|
90
94
|
|
|
91
95
|
return (
|
|
92
96
|
<Highlight
|
|
@@ -116,24 +120,45 @@ export default function CodeBlock({
|
|
|
116
120
|
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
|
|
117
121
|
tabIndex={0}
|
|
118
122
|
className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
|
|
119
|
-
<code
|
|
123
|
+
<code
|
|
124
|
+
className={clsx(
|
|
125
|
+
styles.codeBlockLines,
|
|
126
|
+
shouldShowLineNumbers && styles.codeBlockLinesWithNumbering,
|
|
127
|
+
)}>
|
|
120
128
|
{tokens.map((line, i) => {
|
|
121
129
|
if (line.length === 1 && line[0]!.content === '\n') {
|
|
122
130
|
line[0]!.content = '';
|
|
123
131
|
}
|
|
124
132
|
|
|
125
|
-
const lineProps = getLineProps({
|
|
133
|
+
const lineProps = getLineProps({
|
|
134
|
+
line,
|
|
135
|
+
key: i,
|
|
136
|
+
...(shouldShowLineNumbers && {className: styles.codeLine}),
|
|
137
|
+
});
|
|
126
138
|
|
|
127
139
|
if (highlightLines.includes(i)) {
|
|
128
140
|
lineProps.className += ' docusaurus-highlight-code-line';
|
|
129
141
|
}
|
|
130
142
|
|
|
143
|
+
const lineTokens = line.map((token, key) => (
|
|
144
|
+
<span key={key} {...getTokenProps({token, key})} />
|
|
145
|
+
));
|
|
146
|
+
|
|
131
147
|
return (
|
|
132
148
|
<span key={i} {...lineProps}>
|
|
133
|
-
{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
149
|
+
{shouldShowLineNumbers ? (
|
|
150
|
+
<>
|
|
151
|
+
<span className={styles.codeLineNumber} />
|
|
152
|
+
<span className={styles.codeLineContent}>
|
|
153
|
+
{lineTokens}
|
|
154
|
+
</span>
|
|
155
|
+
</>
|
|
156
|
+
) : (
|
|
157
|
+
<>
|
|
158
|
+
{lineTokens}
|
|
159
|
+
<br />
|
|
160
|
+
</>
|
|
161
|
+
)}
|
|
137
162
|
</span>
|
|
138
163
|
);
|
|
139
164
|
})}
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.codeBlock {
|
|
31
|
+
--ifm-pre-background: inherit;
|
|
31
32
|
margin: 0;
|
|
32
33
|
padding: 0;
|
|
33
|
-
background-color: inherit;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.codeBlockTitle + .codeBlockContent .codeBlock {
|
|
@@ -44,14 +44,48 @@
|
|
|
44
44
|
|
|
45
45
|
.codeBlockLines {
|
|
46
46
|
font: inherit;
|
|
47
|
+
background: var(--ifm-pre-background);
|
|
47
48
|
/* rtl:ignore */
|
|
48
49
|
float: left;
|
|
49
50
|
min-width: 100%;
|
|
50
51
|
padding: var(--ifm-pre-padding);
|
|
51
52
|
}
|
|
52
53
|
|
|
54
|
+
.codeBlockLinesWithNumbering {
|
|
55
|
+
display: table;
|
|
56
|
+
padding: var(--ifm-pre-padding) 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
53
59
|
@media print {
|
|
54
60
|
.codeBlockLines {
|
|
55
61
|
white-space: pre-wrap;
|
|
56
62
|
}
|
|
57
63
|
}
|
|
64
|
+
|
|
65
|
+
.codeLine {
|
|
66
|
+
display: table-row;
|
|
67
|
+
counter-increment: line-count;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.codeLineNumber {
|
|
71
|
+
display: table-cell;
|
|
72
|
+
text-align: right;
|
|
73
|
+
width: 1%;
|
|
74
|
+
position: sticky;
|
|
75
|
+
left: 0;
|
|
76
|
+
padding: 0 var(--ifm-pre-padding);
|
|
77
|
+
background: var(--ifm-pre-background);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.codeLineNumber::before {
|
|
81
|
+
content: counter(line-count);
|
|
82
|
+
opacity: 0.4;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:global(.docusaurus-highlight-code-line) .codeLineNumber::before {
|
|
86
|
+
opacity: 0.8;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.codeLineContent {
|
|
90
|
+
padding-right: var(--ifm-pre-padding);
|
|
91
|
+
}
|
package/src/theme-classic.d.ts
CHANGED