@yozora/react-code

@yozora/react-code

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
  }
  

Related

• @yozora/ast
• @yozora/react-code-embed
• @yozora/react-code-highlighter
• @yozora/react-code-literal
• @yozora/react-code-live
• @yozora/react-markdown
• @yozora/tokenizer-indented-code
• @yozora/tokenizer-fenced-code
• Code | Mdast