@yozora/react-code
v3.0.0-alpha.13
Published
render markdown code in react
Downloads
330
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
yarn
yarn add @yozora/react-code
Usage
Basic:
import React from 'react' import Code from '@yozora/react-code' const wrapper = ( <Code lang="typescript" value="let a: number = 1 + 2;" /> )
Props
| Name | Type | Required | Default | Description |
| :--------------: | :-------------------: | :------: | :-------: | :--------------------------- |
| className
| string
| false
| - | Root css class |
| darken
| boolean
| false
| - | Enable the darken mode |
| lang
| string
| false
| - | Language of the source codes |
| meta
| string
| false
| - | Meta data of the code block |
| showCodeLineno
| boolean
| false
| true
| Display linenos in default |
| runners
| CodeRunnerItem[]
| false
| See below | Code runners. |
| style
| React.CSSProperties
| false
| - | Root css style |
| value
| string
| true
| - | Literal source codes |
runners
:import JsxRenderer from '@yozora/react-code-renderer-jsx' const defaultRunners: CodeRunnerItem[] = [ { title: 'jsx', pattern: /^jsx$/, runner: function JsxRunner(props: CodeRunnerProps): React.ReactElement { const { value, scope, onError } = props return ( <JsxRenderer code={value} inline={true} scope={scope} onError={onError} /> ) }, }, ]
meta
:import type { ICodeMetaData as IBaseCodeMetaData } from '@yozora/core-react-renderer' import type { ICodeRunnerItem, ICodeRunnerMetaData } from '@yozora/react-code-runners' /** * Meta data of the fenced-code. */ export interface ICodeMetaData extends IBaseCodeMetaData, ICodeRunnerMetaData { /** * Rendering mode. */ _yozoracodemode: 'live' | 'embed' | 'literal' | string }