blob: a1aadd854c9a5d734ca69fd58f1fa16d9e5eae8d (
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
|
import { FC, useRef } from 'react';
import {
type OptionalPrismPlugin,
type PrismLanguage,
usePrism,
} from '../../../utils/hooks';
import styles from './code.module.scss';
export type CodeProps = {
/**
* An accessible name.
*/
'aria-label'?: string;
/**
* 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.
*/
export const Code: FC<CodeProps> = ({
children,
filterOutput = false,
language,
plugins = [],
outputPattern = '#output#',
...props
}) => {
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
{...props}
{...attributes}
{...outputAttribute}
className={className}
tabIndex={0}
>
<code className={`language-${language}`}>{children}</code>
</pre>
</div>
);
};
|
