@yozora/react-code NPM

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
}