The Highlighter component is used to display syntax-highlighted code blocks. It takes in the code content as a string and the language of the code as a string. The component allows users to copy the code content and can also display the language tag. The code block can have a background and the theme can be set to either 'dark' or 'light'.
import { Highlighter } from '@yuntijs/ui';| Name | Description | Type | Default |
|---|---|---|---|
| allowChangeLanguage | -- | boolean | -- |
| children | The code content to be highlighted | string | (required) |
| copyButtonSize | -- | number|small|middle|large|ActionIconSizeConfig | -- |
| copyable | Whether to show the copy button | boolean | true |
| fileName | -- | string | -- |
| fullFeatured | -- | boolean | -- |
| icon | -- | ReactNode | -- |
| language | The language of the code content | string | (required) |
| showLanguage | Whether to show language tag | boolean | true |
| spotlight | Whether add spotlight background | boolean | false |
| variant | The variant of the code block | "outlined"|"borderless"|"filled" | "filled" |
| contentStyle | The style of the code content | {} | -- |
| wrap | Control text wrap | boolean | false |
| enableTransformer | -- | boolean | -- |
| theme | -- | any | -- |
| animated | -- | boolean | -- |
export default ({ children, className }: MarkdownProps) => {
const { styles } = useStyles();
return (
<ReactMarkdown
className={cx(styles.container, className)}
components={{ pre: CodeBlock, code: Code }}
>
{children}
</ReactMarkdown>
);
}# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5
The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw `HTML`, it’s 234 characters. In the raw `HTML`, there’s more markup than there is text.
---
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.
---
an example | *an example* | **an example**
---
<video
poster="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"
src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2"/>
---
1. Bird
1. McHale
1. Parish
1. Bird
1. McHale
1. Parish
---
- Red
- Green
- Blue
- Red
- Green
- Blue
---
This is [an example](http://example.com/ "Title") inline link.
<http://example.com/>
| title | title | title |
| --- | --- | --- |
| content | content | content |
```bash
$ pnpm install
```
```javascript
import { renderHook } from '@testing-library/react-hooks';
import { act } from 'react-dom/test-utils';
import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
```
---
以下是一段Markdown格式的LaTeX数学公式：
我是一个行内公式：$E=mc^2$
我是一个独立公式：
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \ldots + x_n
$$
我是一个带有分式的公式：
$$
\frac{{n!}}{{k!(n-k)!}} = \binom{n}{k}
$$
我是一个带有上下标的公式：
$$
x^{2} + y^{2} = r^{2}
$$
我是一个带有积分符号的公式：
$$
\int_{a}^{b} f(x) \, dx
$$
---
我是一个嵌套测试：
```
$1
```export default ({ children, className }: MarkdownProps) => {
const { styles } = useStyles();
return (
<ReactMarkdown
className={cx(styles.container, className)}
components={{ pre: CodeBlock, code: Code }}
>
{children}
</ReactMarkdown>
);
}