blob: f5b60b9899963d8256e1df606cebb69c9c70749f (
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
|
import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism';
import { FC, useRef } 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 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 wrapperRef = useRef<HTMLDivElement>(null);
const { attributes, className } = usePrism({ language, plugins });
const outputAttribute = filterOutput
? { 'data-filter-output': outputPattern }
: {};
return (
<div className={styles.wrapper} ref={wrapperRef}>
<pre
className={className}
tabIndex={0}
{...attributes}
{...outputAttribute}
>
<code className={`language-${language}`}>{children}</code>
</pre>
</div>
);
};
export default Code;
|
