@yozora/react-code-embed

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-embed

• yarn

  yarn add @yozora/react-code-embed

Usage

• Basic:

  import React from 'react'
  import CodeEmbed from '@yozora/react-code-embed'
  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(value)
    const v = f()
    return <span data-type="jsx">{ v }</span>
  }
  
  const code = `
    const a = 1 + 2;
    return a * a
  `
  
  const wrapper = (
    <CodeEmbed
      lang="jsx"
      value={ code }
      CodeRenderer={ JsxRenderer }
    />
  )

Props

Name	Type	Required	Default	Description
className	string	false	-	Root css class
meta	Record<string, unknown	true	-	Interpreter for the codes
lang	string	true	-	Language of the source codes
runner	CodeRunner	true	-	Interpreter for the codes
style	React.CSSProperties	false	-	Root css style
value	string	true	-	source codes

• className: The root element of this component will always bind with the CSS class 'yozora-code-embed'.

CSS variables

Name	Default value
--yozora-colors-border-error	red

Related

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