@yozora/react-code-embed
v3.0.0-alpha.12
Published
code embed in react
Downloads
100
Maintainers
Readme
This component is for rendering the Code data produced by
@yozora/tokenizer-indented-code and @yozora/tokenizer-fenced-code.
This component has been built into @yozora/react-markdown, you can use it directly.
Install
npm
npm install --save @yozora/react-code-embed
yarn
yarn add @yozora/react-code-embed
Usage
Basic:
import React from 'react' import CodeEmbed from '@yozora/react-code-embed' import type { ICodeRunnerProps } from '@yozora/react-code-runners' const JsxRenderer = ({ value }: ICodeRunnerProps): React.ReactElement => { // eslint-disable-next-line no-new-func const f = new Function(value) const v = f() return <span data-type="jsx">{ v }</span> } const code = ` const a = 1 + 2; return a * a ` const wrapper = ( <CodeEmbed lang="jsx" value={ code } CodeRenderer={ JsxRenderer } /> )
Props
| Name | Type | Required | Default | Description |
| :---------: | :----------------------: | :------: | :-----: | :--------------------------- |
| className
| string
| false
| - | Root css class |
| meta
| Record<string, unknown
| true
| - | Interpreter for the codes |
| lang
| string
| true
| - | Language of the source codes |
| runner
| CodeRunner
| true
| - | Interpreter for the codes |
| style
| React.CSSProperties
| false
| - | Root css style |
| value
| string
| true
| - | source codes |
className
: The root element of this component will always bind with the CSS class'yozora-code-embed'
.
CSS variables
| Name | Default value |
| :----------------------------: | :-----------: |
| --yozora-colors-border-error
| red
|