@docusaurus/theme-classic 0.0.0-4953 → 0.0.0-4954
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 -1
- package/lib/validateThemeConfig.js +18 -2
- package/lib-next/theme/CodeBlock/Content/String.js +7 -3
- package/lib-next/theme/CodeBlock/Line/index.js +2 -13
- package/lib-next/theme/CodeBlock/Line/styles.module.css +7 -7
- package/package.json +13 -13
- package/src/theme/CodeBlock/Content/String.tsx +7 -3
- package/src/theme/CodeBlock/Line/index.tsx +2 -10
- package/src/theme/CodeBlock/Line/styles.module.css +7 -7
- package/src/theme-classic.d.ts +1 -1
- package/src/validateThemeConfig.ts +19 -0
package/lib/theme-classic.d.ts
CHANGED
|
@@ -219,7 +219,7 @@ declare module '@theme/CodeBlock/Line' {
|
|
|
219
219
|
|
|
220
220
|
export interface Props {
|
|
221
221
|
readonly line: Token[];
|
|
222
|
-
readonly
|
|
222
|
+
readonly classNames: string[] | undefined;
|
|
223
223
|
readonly showLineNumbers: boolean;
|
|
224
224
|
readonly getLineProps: GetLineProps;
|
|
225
225
|
readonly getTokenProps: GetTokenProps;
|
|
@@ -45,7 +45,15 @@ const DEFAULT_CONFIG = {
|
|
|
45
45
|
metadata: [],
|
|
46
46
|
prism: {
|
|
47
47
|
additionalLanguages: [],
|
|
48
|
-
theme: _palenight.default
|
|
48
|
+
theme: _palenight.default,
|
|
49
|
+
magicComments: [{
|
|
50
|
+
className: 'theme-code-block-highlighted-line',
|
|
51
|
+
line: 'highlight-next-line',
|
|
52
|
+
block: {
|
|
53
|
+
start: 'highlight-start',
|
|
54
|
+
end: 'highlight-end'
|
|
55
|
+
}
|
|
56
|
+
}]
|
|
49
57
|
},
|
|
50
58
|
navbar: {
|
|
51
59
|
hideOnScroll: false,
|
|
@@ -320,7 +328,15 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
|
|
|
320
328
|
styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()
|
|
321
329
|
}),
|
|
322
330
|
defaultLanguage: _utilsValidation.Joi.string(),
|
|
323
|
-
additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages)
|
|
331
|
+
additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages),
|
|
332
|
+
magicComments: _utilsValidation.Joi.array().items(_utilsValidation.Joi.object({
|
|
333
|
+
className: _utilsValidation.Joi.string().required(),
|
|
334
|
+
line: _utilsValidation.Joi.string(),
|
|
335
|
+
block: _utilsValidation.Joi.object({
|
|
336
|
+
start: _utilsValidation.Joi.string().required(),
|
|
337
|
+
end: _utilsValidation.Joi.string().required()
|
|
338
|
+
})
|
|
339
|
+
}).or('line', 'block')).default(DEFAULT_CONFIG.prism.magicComments)
|
|
324
340
|
}).default(DEFAULT_CONFIG.prism).unknown(),
|
|
325
341
|
hideableSidebar: _utilsValidation.Joi.forbidden().messages({
|
|
326
342
|
'any.unknown': 'themeConfig.hideableSidebar has been moved to themeConfig.docs.sidebar.hideable.'
|
|
@@ -30,7 +30,7 @@ export default function CodeBlockString({
|
|
|
30
30
|
language: languageProp,
|
|
31
31
|
}) {
|
|
32
32
|
const {
|
|
33
|
-
prism: {defaultLanguage},
|
|
33
|
+
prism: {defaultLanguage, magicComments},
|
|
34
34
|
} = useThemeConfig();
|
|
35
35
|
const language =
|
|
36
36
|
languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
|
|
@@ -40,7 +40,11 @@ export default function CodeBlockString({
|
|
|
40
40
|
// "title=\"xyz\"" => title: "\"xyz\""
|
|
41
41
|
|
|
42
42
|
const title = parseCodeBlockTitle(metastring) || titleProp;
|
|
43
|
-
const {
|
|
43
|
+
const {lineClassNames, code} = parseLines(children, {
|
|
44
|
+
metastring,
|
|
45
|
+
language,
|
|
46
|
+
magicComments,
|
|
47
|
+
});
|
|
44
48
|
const showLineNumbers =
|
|
45
49
|
showLineNumbersProp || containsLineNumbers(metastring);
|
|
46
50
|
return (
|
|
@@ -76,7 +80,7 @@ export default function CodeBlockString({
|
|
|
76
80
|
line={line}
|
|
77
81
|
getLineProps={getLineProps}
|
|
78
82
|
getTokenProps={getTokenProps}
|
|
79
|
-
|
|
83
|
+
classNames={lineClassNames[i]}
|
|
80
84
|
showLineNumbers={showLineNumbers}
|
|
81
85
|
/>
|
|
82
86
|
))}
|
|
@@ -9,7 +9,7 @@ import clsx from 'clsx';
|
|
|
9
9
|
import styles from './styles.module.css';
|
|
10
10
|
export default function CodeBlockLine({
|
|
11
11
|
line,
|
|
12
|
-
|
|
12
|
+
classNames,
|
|
13
13
|
showLineNumbers,
|
|
14
14
|
getLineProps,
|
|
15
15
|
getTokenProps,
|
|
@@ -20,19 +20,8 @@ export default function CodeBlockLine({
|
|
|
20
20
|
|
|
21
21
|
const lineProps = getLineProps({
|
|
22
22
|
line,
|
|
23
|
-
|
|
24
|
-
className: styles.codeLine,
|
|
25
|
-
}),
|
|
23
|
+
className: clsx(classNames, showLineNumbers && styles.codeLine),
|
|
26
24
|
});
|
|
27
|
-
|
|
28
|
-
if (highlight) {
|
|
29
|
-
lineProps.className = clsx(
|
|
30
|
-
lineProps.className,
|
|
31
|
-
styles.highlightedCodeLine,
|
|
32
|
-
'theme-code-block-highlighted-line',
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
25
|
const lineTokens = line.map((token, key) => (
|
|
37
26
|
<span
|
|
38
27
|
key={key}
|
|
@@ -5,6 +5,13 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
:global(.theme-code-block-highlighted-line) {
|
|
9
|
+
background-color: var(--docusaurus-highlighted-code-line-bg);
|
|
10
|
+
display: block;
|
|
11
|
+
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
|
12
|
+
padding: 0 var(--ifm-pre-padding);
|
|
13
|
+
}
|
|
14
|
+
|
|
8
15
|
/* Intentionally has zero specificity, so that to be able to override
|
|
9
16
|
the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
|
|
10
17
|
:where(:root) {
|
|
@@ -15,13 +22,6 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
|
|
|
15
22
|
--docusaurus-highlighted-code-line-bg: rgb(100 100 100);
|
|
16
23
|
}
|
|
17
24
|
|
|
18
|
-
.highlightedCodeLine {
|
|
19
|
-
background-color: var(--docusaurus-highlighted-code-line-bg);
|
|
20
|
-
display: block;
|
|
21
|
-
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
|
22
|
-
padding: 0 var(--ifm-pre-padding);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
25
|
.codeLine {
|
|
26
26
|
display: table-row;
|
|
27
27
|
counter-increment: line-count;
|
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-4954",
|
|
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-4954",
|
|
25
|
+
"@docusaurus/plugin-content-blog": "0.0.0-4954",
|
|
26
|
+
"@docusaurus/plugin-content-docs": "0.0.0-4954",
|
|
27
|
+
"@docusaurus/plugin-content-pages": "0.0.0-4954",
|
|
28
|
+
"@docusaurus/theme-common": "0.0.0-4954",
|
|
29
|
+
"@docusaurus/theme-translations": "0.0.0-4954",
|
|
30
|
+
"@docusaurus/utils": "0.0.0-4954",
|
|
31
|
+
"@docusaurus/utils-common": "0.0.0-4954",
|
|
32
|
+
"@docusaurus/utils-validation": "0.0.0-4954",
|
|
33
33
|
"@mdx-js/react": "^1.6.22",
|
|
34
34
|
"clsx": "^1.1.1",
|
|
35
35
|
"copy-text-to-clipboard": "^3.0.1",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"@babel/cli": "^7.17.10",
|
|
47
47
|
"@babel/core": "^7.17.10",
|
|
48
48
|
"@babel/preset-typescript": "^7.16.7",
|
|
49
|
-
"@docusaurus/module-type-aliases": "0.0.0-
|
|
50
|
-
"@docusaurus/types": "0.0.0-
|
|
49
|
+
"@docusaurus/module-type-aliases": "0.0.0-4954",
|
|
50
|
+
"@docusaurus/types": "0.0.0-4954",
|
|
51
51
|
"@types/mdx-js__react": "^1.5.5",
|
|
52
52
|
"@types/nprogress": "^0.2.0",
|
|
53
53
|
"@types/prismjs": "^1.26.0",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"engines": {
|
|
65
65
|
"node": ">=14"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "858b548c9cda08f8405325e1651c9f4234eabb34"
|
|
68
68
|
}
|
|
@@ -34,7 +34,7 @@ export default function CodeBlockString({
|
|
|
34
34
|
language: languageProp,
|
|
35
35
|
}: Props): JSX.Element {
|
|
36
36
|
const {
|
|
37
|
-
prism: {defaultLanguage},
|
|
37
|
+
prism: {defaultLanguage, magicComments},
|
|
38
38
|
} = useThemeConfig();
|
|
39
39
|
const language =
|
|
40
40
|
languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
|
|
@@ -46,7 +46,11 @@ export default function CodeBlockString({
|
|
|
46
46
|
// "title=\"xyz\"" => title: "\"xyz\""
|
|
47
47
|
const title = parseCodeBlockTitle(metastring) || titleProp;
|
|
48
48
|
|
|
49
|
-
const {
|
|
49
|
+
const {lineClassNames, code} = parseLines(children, {
|
|
50
|
+
metastring,
|
|
51
|
+
language,
|
|
52
|
+
magicComments,
|
|
53
|
+
});
|
|
50
54
|
const showLineNumbers =
|
|
51
55
|
showLineNumbersProp || containsLineNumbers(metastring);
|
|
52
56
|
|
|
@@ -83,7 +87,7 @@ export default function CodeBlockString({
|
|
|
83
87
|
line={line}
|
|
84
88
|
getLineProps={getLineProps}
|
|
85
89
|
getTokenProps={getTokenProps}
|
|
86
|
-
|
|
90
|
+
classNames={lineClassNames[i]}
|
|
87
91
|
showLineNumbers={showLineNumbers}
|
|
88
92
|
/>
|
|
89
93
|
))}
|
|
@@ -12,7 +12,7 @@ import styles from './styles.module.css';
|
|
|
12
12
|
|
|
13
13
|
export default function CodeBlockLine({
|
|
14
14
|
line,
|
|
15
|
-
|
|
15
|
+
classNames,
|
|
16
16
|
showLineNumbers,
|
|
17
17
|
getLineProps,
|
|
18
18
|
getTokenProps,
|
|
@@ -23,17 +23,9 @@ export default function CodeBlockLine({
|
|
|
23
23
|
|
|
24
24
|
const lineProps = getLineProps({
|
|
25
25
|
line,
|
|
26
|
-
|
|
26
|
+
className: clsx(classNames, showLineNumbers && styles.codeLine),
|
|
27
27
|
});
|
|
28
28
|
|
|
29
|
-
if (highlight) {
|
|
30
|
-
lineProps.className = clsx(
|
|
31
|
-
lineProps.className,
|
|
32
|
-
styles.highlightedCodeLine,
|
|
33
|
-
'theme-code-block-highlighted-line',
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
29
|
const lineTokens = line.map((token, key) => (
|
|
38
30
|
<span key={key} {...getTokenProps({token, key})} />
|
|
39
31
|
));
|
|
@@ -5,6 +5,13 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
:global(.theme-code-block-highlighted-line) {
|
|
9
|
+
background-color: var(--docusaurus-highlighted-code-line-bg);
|
|
10
|
+
display: block;
|
|
11
|
+
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
|
12
|
+
padding: 0 var(--ifm-pre-padding);
|
|
13
|
+
}
|
|
14
|
+
|
|
8
15
|
/* Intentionally has zero specificity, so that to be able to override
|
|
9
16
|
the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
|
|
10
17
|
:where(:root) {
|
|
@@ -15,13 +22,6 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
|
|
|
15
22
|
--docusaurus-highlighted-code-line-bg: rgb(100 100 100);
|
|
16
23
|
}
|
|
17
24
|
|
|
18
|
-
.highlightedCodeLine {
|
|
19
|
-
background-color: var(--docusaurus-highlighted-code-line-bg);
|
|
20
|
-
display: block;
|
|
21
|
-
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
|
22
|
-
padding: 0 var(--ifm-pre-padding);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
25
|
.codeLine {
|
|
26
26
|
display: table-row;
|
|
27
27
|
counter-increment: line-count;
|
package/src/theme-classic.d.ts
CHANGED
|
@@ -219,7 +219,7 @@ declare module '@theme/CodeBlock/Line' {
|
|
|
219
219
|
|
|
220
220
|
export interface Props {
|
|
221
221
|
readonly line: Token[];
|
|
222
|
-
readonly
|
|
222
|
+
readonly classNames: string[] | undefined;
|
|
223
223
|
readonly showLineNumbers: boolean;
|
|
224
224
|
readonly getLineProps: GetLineProps;
|
|
225
225
|
readonly getTokenProps: GetTokenProps;
|
|
@@ -44,6 +44,13 @@ export const DEFAULT_CONFIG = {
|
|
|
44
44
|
prism: {
|
|
45
45
|
additionalLanguages: [],
|
|
46
46
|
theme: defaultPrismTheme,
|
|
47
|
+
magicComments: [
|
|
48
|
+
{
|
|
49
|
+
className: 'theme-code-block-highlighted-line',
|
|
50
|
+
line: 'highlight-next-line',
|
|
51
|
+
block: {start: 'highlight-start', end: 'highlight-end'},
|
|
52
|
+
},
|
|
53
|
+
],
|
|
47
54
|
},
|
|
48
55
|
navbar: {
|
|
49
56
|
hideOnScroll: false,
|
|
@@ -386,6 +393,18 @@ export const ThemeConfigSchema = Joi.object({
|
|
|
386
393
|
additionalLanguages: Joi.array()
|
|
387
394
|
.items(Joi.string())
|
|
388
395
|
.default(DEFAULT_CONFIG.prism.additionalLanguages),
|
|
396
|
+
magicComments: Joi.array()
|
|
397
|
+
.items(
|
|
398
|
+
Joi.object({
|
|
399
|
+
className: Joi.string().required(),
|
|
400
|
+
line: Joi.string(),
|
|
401
|
+
block: Joi.object({
|
|
402
|
+
start: Joi.string().required(),
|
|
403
|
+
end: Joi.string().required(),
|
|
404
|
+
}),
|
|
405
|
+
}).or('line', 'block'),
|
|
406
|
+
)
|
|
407
|
+
.default(DEFAULT_CONFIG.prism.magicComments),
|
|
389
408
|
})
|
|
390
409
|
.default(DEFAULT_CONFIG.prism)
|
|
391
410
|
.unknown(),
|