Skip to content

Commit 1efc702

Browse files
gingerwizardgingerwizard
authored
Merge pull request #3858 from Blargian/codeblock_syntax_highlighting
Improved code highlighting
2 parents 76973d5 + 10aabbe commit 1efc702

File tree

7 files changed

+203
-13
lines changed

7 files changed

+203
-13
lines changed

‎docusaurus.config.en.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ const { customParseFrontMatter } = require('./plugins/frontmatter-validation/cus
1111
const checkFloatingPages = require('./plugins/checkFloatingPages');
1212
const frontmatterValidator = require('./plugins/frontmatter-validation/frontmatterValidatorPlugin');
1313
import pluginLlmsTxt from './plugins/llms-txt-plugin.ts'
14+
import prismLight from "./src/utils/prismLight";
15+
import prismDark from "./src/utils/prismDark";
1416

1517
// Helper function to skip over index.md files.
1618
function skipIndex(items) {
@@ -288,9 +290,9 @@ const config = {
288290
copyright: `© 2016–${new Date().getFullYear()} ClickHouse, Inc.`,
289291
},
290292
prism: {
291-
theme: require('prism-react-renderer').themes.github,
292-
darkTheme: themes.darkTheme,
293-
additionalLanguages: ["java", "cpp", "rust", "python", "javascript", "yaml"],
293+
theme: prismLight,
294+
darkTheme: prismDark,
295+
additionalLanguages: ["java", "cpp", "rust", "python", "javascript", "yaml", "bash", "docker"],
294296
magicComments: [
295297
// Remember to extend the default highlight class name as well!
296298
{

‎docusaurus.config.jp.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import math from "remark-math";
33
import katex from "rehype-katex";
44
import chHeader from "./plugins/header.js";
55
import fixLinks from "./src/hooks/fixLinks.js";
6+
import prismLight from "./src/utils/prismLight";
7+
import prismDark from "./src/utils/prismDark";
68
const remarkCustomBlocks = require('./plugins/remark-custom-blocks');
79

810
// Helper function to skip over index.md files.
@@ -254,9 +256,9 @@ const config = {
254256
copyright: `© 2016–${new Date().getFullYear()} ClickHouse, Inc.`,
255257
},
256258
prism: {
257-
theme: require('prism-react-renderer').themes.github,
258-
darkTheme: themes.darkTheme,
259-
additionalLanguages: ["java", "cpp", "rust", "python", "javascript"],
259+
theme: prismLight,
260+
darkTheme: prismDark,
261+
additionalLanguages: ["java", "cpp", "rust", "python", "javascript", "yaml", "bash", "docker"],
260262
magicComments: [
261263
// Remember to extend the default highlight class name as well!
262264
{

‎docusaurus.config.ru.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import math from "remark-math";
33
import katex from "rehype-katex";
44
import chHeader from "./plugins/header.js";
55
import fixLinks from "./src/hooks/fixLinks.js";
6+
import prismLight from "./src/utils/prismLight";
7+
import prismDark from "./src/utils/prismDark";
68
const remarkCustomBlocks = require('./plugins/remark-custom-blocks');
79

810
// Helper function to skip over index.md files.
@@ -260,9 +262,9 @@ const config = {
260262
copyright: `© 2016–${new Date().getFullYear()} ClickHouse, Inc.`,
261263
},
262264
prism: {
263-
theme: require('prism-react-renderer').themes.github,
264-
darkTheme: themes.darkTheme,
265-
additionalLanguages: ["java", "cpp", "rust", "python", "javascript"],
265+
theme: prismLight,
266+
darkTheme: prismDark,
267+
additionalLanguages: ["java", "cpp", "rust", "python", "javascript", "yaml", "bash", "docker"],
266268
magicComments: [
267269
// Remember to extend the default highlight class name as well!
268270
{

‎docusaurus.config.zh.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import math from "remark-math";
33
import katex from "rehype-katex";
44
import chHeader from "./plugins/header.js";
55
import fixLinks from "./src/hooks/fixLinks.js";
6+
import prismLight from "./src/utils/prismLight";
7+
import prismDark from "./src/utils/prismDark";
68
const remarkCustomBlocks = require('./plugins/remark-custom-blocks');
79

810
// Helper function to skip over index.md files.
@@ -254,9 +256,9 @@ const config = {
254256
copyright: `© 2016–${new Date().getFullYear()} ClickHouse, Inc.`,
255257
},
256258
prism: {
257-
theme: require('prism-react-renderer').themes.github,
258-
darkTheme: themes.darkTheme,
259-
additionalLanguages: ["java", "cpp", "rust", "python", "javascript"],
259+
theme: prismLight,
260+
darkTheme: prismDark,
261+
additionalLanguages: ["java", "cpp", "rust", "python", "javascript", "yaml", "bash", "docker"],
260262
magicComments: [
261263
// Remember to extend the default highlight class name as well!
262264
{

‎src/css/custom.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1410,4 +1410,3 @@ input::-ms-input-placeholder { /* Microsoft Edge */
14101410
.installInstructions {
14111411
margin-top: 2em;
14121412
}
1413-

‎src/utils/prismDark.ts

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import {themes, type PrismTheme} from 'prism-react-renderer';
9+
10+
const baseTheme = themes.vsDark;
11+
12+
export default {
13+
plain: {
14+
color: '#D4D4D4',
15+
backgroundColor: '#212121',
16+
},
17+
styles: [
18+
...baseTheme.styles,
19+
{
20+
types: ['title'],
21+
style: {
22+
color: '#569CD6',
23+
fontWeight: 'bold',
24+
},
25+
},
26+
{
27+
types: ['property', 'parameter'],
28+
style: {
29+
color: '#9CDCFE',
30+
},
31+
},
32+
{
33+
types: ['script'],
34+
style: {
35+
color: '#D4D4D4',
36+
},
37+
},
38+
{
39+
types: ['boolean', 'arrow', 'atrule', 'tag'],
40+
style: {
41+
color: '#569CD6',
42+
},
43+
},
44+
{
45+
types: ['number', 'color', 'unit'],
46+
style: {
47+
color: '#B5CEA8',
48+
},
49+
},
50+
{
51+
types: ['font-matter'],
52+
style: {
53+
color: '#CE9178',
54+
},
55+
},
56+
{
57+
types: ['keyword', 'rule'],
58+
style: {
59+
color: '#C586C0',
60+
},
61+
},
62+
{
63+
types: ['regex'],
64+
style: {
65+
color: '#D16969',
66+
},
67+
},
68+
{
69+
types: ['maybe-class-name'],
70+
style: {
71+
color: '#4EC9B0',
72+
},
73+
},
74+
{
75+
types: ['constant'],
76+
style: {
77+
color: '#4FC1FF',
78+
},
79+
}
80+
],
81+
} satisfies PrismTheme;

‎src/utils/prismLight.ts

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import {themes, type PrismTheme} from 'prism-react-renderer';
9+
10+
const baseTheme = themes.github;
11+
12+
export default {
13+
...baseTheme,
14+
styles: [
15+
...baseTheme.styles,
16+
{
17+
types: ['title'],
18+
style: {
19+
color: '#0550AE',
20+
fontWeight: 'bold',
21+
},
22+
},
23+
{
24+
types: ['parameter'],
25+
style: {
26+
color: '#953800',
27+
},
28+
},
29+
{
30+
types: ['boolean', 'rule', 'color', 'number', 'constant', 'property'],
31+
style: {
32+
color: '#005CC5',
33+
},
34+
},
35+
{
36+
types: ['atrule', 'tag'],
37+
style: {
38+
color: '#22863A',
39+
},
40+
},
41+
{
42+
types: ['script'],
43+
style: {
44+
color: '#24292E',
45+
},
46+
},
47+
{
48+
types: ['operator', 'unit', 'rule'],
49+
style: {
50+
color: '#D73A49',
51+
},
52+
},
53+
{
54+
types: ['font-matter', 'string', 'attr-value'],
55+
style: {
56+
color: '#C6105F',
57+
},
58+
},
59+
{
60+
types: ['class-name'],
61+
style: {
62+
color: '#116329',
63+
},
64+
},
65+
{
66+
types: ['attr-name'],
67+
style: {
68+
color: '#0550AE',
69+
},
70+
},
71+
{
72+
types: ['keyword'],
73+
style: {
74+
color: '#CF222E',
75+
},
76+
},
77+
{
78+
types: ['function'],
79+
style: {
80+
color: '#8250DF',
81+
},
82+
},
83+
{
84+
types: ['selector'],
85+
style: {
86+
color: '#6F42C1',
87+
},
88+
},
89+
{
90+
types: ['variable'],
91+
style: {
92+
color: '#E36209',
93+
},
94+
},
95+
{
96+
types: ['comment'],
97+
style: {
98+
color: '#6B6B6B',
99+
},
100+
},
101+
],
102+
} satisfies PrismTheme;

0 commit comments

Comments
 (0)