1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import {
PrismDefaultPlugins,
PrismLanguages,
PrismPlugins,
} from '@ts/types/prism';
import { usePrismTheme } from '@utils/providers/prism-theme';
import { useRouter } from 'next/router';
import Prism from 'prismjs';
import { useCallback, useEffect, useMemo } from 'react';
import { useIntl } from 'react-intl';
const CodeBlock = ({
code,
language,
plugins,
}: {
code: string;
language: PrismLanguages;
plugins: PrismPlugins[];
}) => {
const intl = useIntl();
const router = useRouter();
const { setCodeBlocks } = usePrismTheme();
useEffect(() => {
const allPre: NodeListOf<HTMLPreElement> = document.querySelectorAll(
'pre[data-prismjs-color-scheme-current]'
);
setCodeBlocks(allPre);
}, [setCodeBlocks, router.asPath]);
const defaultPlugins: PrismDefaultPlugins[] = useMemo(
() => [
'autoloader',
'toolbar',
'show-language',
'copy-to-clipboard',
'color-scheme',
'match-braces',
'normalize-whitespace',
],
[]
);
const loadPrismPlugins = useCallback(
async (prismPlugins: (PrismDefaultPlugins | PrismPlugins)[]) => {
for (const plugin of prismPlugins) {
try {
if (plugin === 'color-scheme') {
await import(`@utils/plugins/prism-${plugin}`);
} else {
await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
if (plugin === 'autoloader')
Prism.plugins.autoloader.languages_path = '/prism/';
}
} catch (error) {
console.error('CodeBlock: an error occurred with Prism.');
console.error(error);
}
}
},
[]
);
useEffect(() => {
loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
Prism.highlightAll();
});
}, [loadPrismPlugins, defaultPlugins, plugins]);
const copyText = intl.formatMessage({
defaultMessage: 'Copy',
description: 'Prism: copy button text (no clicked)',
id: '/ly3AC',
});
const copiedText = intl.formatMessage({
defaultMessage: 'Copied!',
description: 'Prism: copy button text (clicked)',
id: 'OV9r1K',
});
const errorText = intl.formatMessage({
defaultMessage: 'Use Ctrl+c to copy',
description: 'Prism: error text',
id: 'z9qkcQ',
});
const darkTheme = intl.formatMessage({
defaultMessage: 'Dark Theme 🌙',
description: 'Prism: toggle dark theme button text',
id: 'nFMdWI',
});
const lightTheme = intl.formatMessage({
defaultMessage: 'Light Theme 🌞',
description: 'Prism: toggle light theme button text',
id: 'Ua2g2p',
});
const defaultPluginsClasses = 'match-braces';
const pluginsClasses = plugins.join(' ');
return (
<pre
className={`language-${language} ${defaultPluginsClasses} ${pluginsClasses}`}
data-prismjs-copy={copyText}
data-prismjs-copy-success={copiedText}
data-prismjs-copy-error={errorText}
data-prismjs-color-scheme-dark={darkTheme}
data-prismjs-color-scheme-light={lightTheme}
>
<code className={`language-${language}`}>{code}</code>
</pre>
);
};
export default CodeBlock;
|
