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 Prism from 'prismjs';
import { useEffect, useMemo } from 'react';
import { useIntl } from 'react-intl';
export type PrismPlugin =
| 'autoloader'
| 'color-scheme'
| 'command-line'
| 'copy-to-clipboard'
| 'diff-highlight'
| 'inline-color'
| 'line-highlight'
| 'line-numbers'
| 'match-braces'
| 'normalize-whitespace'
| 'show-language'
| 'toolbar';
/**
* Import and configure all given Prism plugins.
*
* @param {PrismPlugin[]} prismPlugins - The Prism plugins to activate.
*/
const loadPrismPlugins = async (prismPlugins: PrismPlugin[]) => {
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(
'usePrismPlugins: an error occurred while loading Prism plugins.'
);
console.error(error);
}
}
};
/**
* Load both the given Prism plugins and the default plugins.
*
* @param {PrismPlugin[]} plugins - The Prism plugins to activate.
*/
const usePrismPlugins = (plugins: PrismPlugin[]) => {
const intl = useIntl();
const copyText = intl.formatMessage({
defaultMessage: 'Copy',
description: 'usePrismPlugins: copy button text (not clicked)',
id: 'FIE/eC',
});
const copiedText = intl.formatMessage({
defaultMessage: 'Copied!',
description: 'usePrismPlugins: copy button text (clicked)',
id: 'MzLdEl',
});
const errorText = intl.formatMessage({
defaultMessage: 'Use Ctrl+c to copy',
description: 'usePrismPlugins: copy button error text',
id: '0XePFn',
});
const darkTheme = intl.formatMessage({
defaultMessage: 'Dark Theme 🌙',
description: 'usePrismPlugins: toggle dark theme button text',
id: 'jo9vr5',
});
const lightTheme = intl.formatMessage({
defaultMessage: 'Light Theme 🌞',
description: 'usePrismPlugins: toggle light theme button text',
id: '6EUEtH',
});
const attributes = {
'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,
};
const defaultPlugins: PrismPlugin[] = useMemo(
() => [
'toolbar',
'autoloader',
'show-language',
'copy-to-clipboard',
'color-scheme',
'match-braces',
'normalize-whitespace',
],
[]
);
useEffect(() => {
loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
Prism.highlightAll();
});
}, [defaultPlugins, plugins]);
const defaultPluginsClasses = 'match-braces';
const pluginsClasses = plugins.join(' ');
return {
pluginsAttribute: attributes,
pluginsClassName: `${defaultPluginsClasses} ${pluginsClasses}`,
};
};
export default usePrismPlugins;
|
