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
|
import { IntlShape } from 'react-intl';
/**
* Check if the current block has a defined language.
* @param classList - A list of class.
* @returns {boolean} - True if a class starts with "language-".
*/
const isLanguageBlock = (classList: DOMTokenList) => {
const classes = Array.from(classList);
return classes.some((className) => /language-.*/.test(className));
};
/**
* Add automatically some classes and attributes for PrismJs.
*
* These classes and attributes are needed by Prism or to customize comments.
*/
export const addPrismClasses = () => {
const preTags = document.getElementsByTagName('pre');
Array.from(preTags).forEach((preTag) => {
if (
isLanguageBlock(preTag.classList) &&
!preTag.classList.contains('command-line') &&
!preTag.classList.contains('language-diff')
) {
preTag.classList.add('line-numbers', 'match-braces');
}
if (
preTag.classList.contains('command-line') &&
preTag.classList.contains('filter-output')
) {
preTag.setAttribute('data-filter-output', '#output#');
}
});
};
/**
* Translate the PrismJS Copy to clipboard button.
*/
export const translateCopyButton = (locale: string, intl: IntlShape) => {
const articles = document.getElementsByTagName('article');
const copyText = intl.formatMessage({
defaultMessage: 'Copy',
description: 'Prism: copy button text (no clicked)',
});
const copiedText = intl.formatMessage({
defaultMessage: 'Copied!',
description: 'Prism: copy button text (clicked)',
});
const errorText = intl.formatMessage({
defaultMessage: 'Use Ctrl+c to copy',
description: 'Prism: error text',
});
Array.from(articles).forEach((article) => {
article.setAttribute('lang', locale);
article.setAttribute('data-prismjs-copy', copyText);
article.setAttribute('data-prismjs-copy-success', copiedText);
article.setAttribute('data-prismjs-copy-error', errorText);
});
};
/**
* Translate the PrismJS color-scheme button.
*/
export const translateToggleButton = (locale: string, intl: IntlShape) => {
const articles = document.getElementsByTagName('article');
const darkTheme = intl.formatMessage({
defaultMessage: 'Toggle Dark Theme',
description: 'Prism: toggle dark theme button text',
});
const lightTheme = intl.formatMessage({
defaultMessage: 'Toggle Light Theme',
description: 'Prism: toggle light theme button text',
});
Array.from(articles).forEach((article) => {
article.setAttribute('lang', locale);
article.setAttribute('data-prismjs-color-scheme-dark', darkTheme);
article.setAttribute('data-prismjs-color-scheme-light', lightTheme);
});
};
|
