@yozora/react-code-literal
v3.0.0-alpha.10
Published
render markdown `code` node in react
Downloads
97
Maintainers
lemonclownReadme
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-literalyarn
yarn add @yozora/react-code-literal
Usage
Basic:
import React from 'react' import CodeLiteral from '@yozora/react-code-literal' const wrapper = ( <CodeLiteral code="let x = 1" lang="javascript" style={{ color: 'orange' }} /> )
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 |
| style | React.CSSProperties | false | - | Root css style |
| showLineNo | boolean | false | - | Whether to display the line numbers |
| 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 |