# Code

代码高亮展示组件，基于 react-syntax-highlighter 的 Prism 实现，支持多种语言和主题。

## 适用场景

- 展示代码片段并进行语法高亮
- 文档中的代码示例展示
- 需要行号显示的代码块

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| language | `string` | `"tsx"` | 否 | 语言，支持的语言列表参见 react-syntax-highlighter 文档 |
| theme | `Record<string, CSSProperties>` | `tomorrow` | 否 | 主题，对应 react-syntax-highlighter 的 `style`，默认为 `tomorrow` |
| customStyle | `CSSProperties` | `-` | 否 | 自定义样式，应用到 pre element |
| showLineNumbers | `boolean` | `false` | 否 | 是否显示行号 |

## 典型用法

### 基础用法

```tsx
import {Code, CodeProps, coy} from '@befe/brick'

const tsCode = `function sum(a: number, b: number) {
    return a + b
}
`

const scssCode = `.clearfix {
    *zoom: 1;
    &::before,
    &::after {
        display: table;
        content: " ";
    }
    &::after {
        clear: both;
    }
}
`

// 默认语言 tsx，默认主题 tomorrow
<Code>{tsCode}</Code>

// 指定语言和主题，开启行号
<Code
    language={'scss'}
    theme={coy as CodeProps['theme']}
    showLineNumbers
>
    {scssCode}
</Code>
```

## 注意事项

- **引入组件会增加较大的资源尺寸**，请按需引入，避免在不需要代码高亮的页面中打包
- 支持的语言列表参见 [AVAILABLE_LANGUAGES_PRISM.MD](https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD)
- 支持的主题列表参见 [AVAILABLE_STYLES_PRISM.MD](https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD)
- 不再支持 `props.style`，如需自定义容器样式请使用 `customStyle`