@yozora/react-code-embed NPM | npm.io

3.0.0-alpha.16 • Published 4 months ago

Install

Weekly downloads

6

License

MIT

Repository

Last release

4 months ago

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

mdast node render code embed

@guanghechen/equal @yozora/core-react-constant

@infinitebrahmanuniverse/nolb-_yoz @everything-registry/sub-chunk-1044 @yozora/react-code @yozora/react-code-live @zalastax/nolb-_yoz

4 months ago

4 months ago

8 months ago

9 months ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago