@yozora/react-code-live
v3.0.0-alpha.12
Published
code live in react
Downloads
80
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-live
yarn
yarn add @yozora/react-code-live
Usage
Basic:
import React from 'react' import CodeLive from '@yozora/react-code-live' 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(code) const v = f() return <span data-type="jsx">{ v }</span> } const code = ` const a = 1 + 2; return a * a ` const wrapper = ( <CodeLive lang="jsx" value={ code } CodeRenderer={ JsxRenderer } /> )
Props
| Name | Type | Required | Default | Description |
| :----------------: | :-------------------: | :------: | :-----: | :---------------------------------------------- |
| className
| string
| false
| - | Root css class |
| collapsed
| boolean
| false
| false
| Collapse the code block |
| darken
| boolean
| false
| - | Enable the darken mode |
| highlightLinenos
| number[]
| false
| - | Line number of Lines that should be highlighted |
| lang
| string
| false
| - | Language of the source codes |
| maxLines
| number
| number
| - | Maximum number of rows displayed |
| showLineNo
| boolean
| false
| - | Whether to display the line numbers |
| style
| React.CSSProperties
| false
| - | Root css style |
| title
| string
| false
| - | Code title |
| value
| string
| true
| - | Literal source codes |
className
: The root element of this component will always bind with the CSS class'yozora-code-literal'
.
CSS variables
| Name | Default value |
| :-------------------------------: | :---------------------------------------------------------------------: |
| --yozora-colors-background-code
| #f5f5f5
|
| --yozora-colors-border-code
| #d3d3d3
|
| --yozora-colors-caret-code
| #ed6c60
|
| --yozora-colors-selection-code
| hsla(200deg, 30%, 70%, 0.3)
|
| --yozora-colors-text-codeTitle
| hsla(0deg, 0%, 30%, 0.8)
|
| --yozora-fonts-family-code
| Consolas, 'Source Code Pro', 'Roboto Mono', monospace, sans-serif
|
| --yozora-fonts-family-heading
| 'Comic Sans MS', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif
|
| --yozora-fonts-size-code
| 1rem
|