@yozora/react-code-live
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 |