blob: 2959ae5040b499967c8545510e6f9d17f5f35fb9 (
plain)
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
|
import usePrismPlugins, {
type PrismPlugin,
} from '@utils/hooks/use-prism-plugins';
import { FC } from 'react';
import styles from './code.module.scss';
export type PrismLanguage =
| 'apacheconf'
| 'bash'
| 'css'
| 'diff'
| 'docker'
| 'editorconfig'
| 'ejs'
| 'git'
| 'graphql'
| 'html'
| 'ignore'
| 'ini'
| 'javascript'
| 'jsdoc'
| 'json'
| 'jsx'
| 'makefile'
| 'markup'
| 'php'
| 'phpdoc'
| 'regex'
| 'scss'
| 'shell-session'
| 'smarty'
| 'tcl'
| 'toml'
| 'tsx'
| 'twig'
| 'yaml';
export type OptionalPrismPlugin = Extract<
PrismPlugin,
| 'command-line'
| 'diff-highlight'
| 'inline-color'
| 'line-highlight'
| 'line-numbers'
>;
export type CodeProps = {
/**
* The code to highlight.
*/
children: string;
/**
* Filter command line output. Default: false.
*/
filterOutput?: boolean;
/**
* The code language.
*/
language: PrismLanguage;
/**
* The optional Prism plugins.
*/
plugins?: OptionalPrismPlugin[];
/**
* Filter command line output using the given string. Default: #output#
*/
outputPattern?: string;
};
/**
* Code component
*
* Render a code block with syntax highlighting.
*/
const Code: FC<CodeProps> = ({
children,
filterOutput = false,
language,
plugins = [],
outputPattern = '#output#',
}) => {
const { pluginsAttribute, pluginsClassName } = usePrismPlugins(plugins);
const outputAttribute = filterOutput
? { 'data-filter-output': outputPattern }
: {};
return (
<div className={styles.wrapper}>
<pre
className={`language-${language} ${pluginsClassName}`}
{...pluginsAttribute}
{...outputAttribute}
>
<code className={`language-${language}`}>{children}</code>
</pre>
</div>
);
};
export default Code;
|
