128 lines
2.8 KiB
Plaintext
128 lines
2.8 KiB
Plaintext
---
|
|
title: Code Editor
|
|
description: A code editor component featuring syntax highlighting and animation.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="code-editor-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="code-editor" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<CodeEditor lang="tsx">
|
|
{`const a = 1;
|
|
const b = 2;
|
|
const c = a + b;`}
|
|
</CodeEditor>
|
|
```
|
|
|
|
## Props
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The code to display in the editor.',
|
|
type: 'string',
|
|
required: true,
|
|
},
|
|
lang: {
|
|
description: 'The language of the code.',
|
|
type: 'string',
|
|
required: true,
|
|
},
|
|
themes: {
|
|
description:
|
|
'The theme of the code editor (see https://shiki.style/themes).',
|
|
type: '{ light: string; dark: string }',
|
|
required: false,
|
|
default: '{ light: "github-light"; dark: "github-dark" }',
|
|
},
|
|
duration: {
|
|
description: 'The duration of the animation.',
|
|
type: 'number',
|
|
required: false,
|
|
default: '5',
|
|
},
|
|
delay: {
|
|
description: 'The delay of the animation.',
|
|
type: 'number',
|
|
required: false,
|
|
default: '0',
|
|
},
|
|
header: {
|
|
description: 'Whether to show the header.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
dots: {
|
|
description: 'Whether to show the top left dots.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
icon: {
|
|
description: 'The icon to display in the header.',
|
|
type: 'React.ReactNode',
|
|
required: false,
|
|
},
|
|
cursor: {
|
|
description: 'Whether to show the cursor.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
inView: {
|
|
description: 'Enable animation when in view.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
inViewMargin: {
|
|
description: 'The margin of the in view.',
|
|
type: 'string',
|
|
required: false,
|
|
default: '0px',
|
|
},
|
|
inViewOnce: {
|
|
description: 'Enable animation only once when in view.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
copyButton: {
|
|
description: 'Whether to show the copy button.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
writing: {
|
|
description: 'Enable writing animation.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
title: {
|
|
description: 'The file name.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
onDone: {
|
|
description: 'Callback when the animation is done.',
|
|
type: '() => void',
|
|
required: false,
|
|
},
|
|
onCopy: {
|
|
description: 'The function to call when copy is successful.',
|
|
type: '(content: string) => void',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|