@yozora/react-code-highlighter NPM

This package is designed to highlight mdast code type data

Install

npm

npm install --save @yozora/react-code-highlighter

yarn
```
yarn add @yozora/react-code-highlighter
```

Usage

Basic:

import React from 'react'
import CodeHighlighter from '@yozora/react-code-highlighter'

function Wrapper() {
  const [code, setCode] = React.useState<string>('let a: number = 1 + 2;')
  const [lineCount, setLineCount] = React.useState<number>(0)
  const lineNoWidth = `${ Math.max(2, ('' + lineCount).length) + 0.5 }em`

  React.useEffect(() => {
    const nextCode = (
      'let a = 1, b = 2\n' +
      Array.from(new Array(100)).map((x, i) => '// ' + i).join('\n') +
      '\nlet c = 3\nconsole.log(\'c:\', c)'
    )
    setCode(nextCode)
  }, [])

  return (
    <pre data-line-count={ lineCount }>
      <CodeHighlighter
        lang="typescript"
        value={ code }
        linenoWidth={ lineNoWidth }
        onLineCountChange={ setLineCount }
      />
    </pre>
  )
}

const wrapper = (<Wrapper />)

Props

Name	Type	Required	Default	Description
`value`	`string`	`true`	-	Code content
`lang`	`string`	`false`	-	Code language
`darken`	`boolean`	`false`	-	Specify the default theme (vcsDarkTheme / vscLightTheme)
`theme`	`IPrismTheme`	`false`	Depends on `darken`	Code highlight theme
`linenoWidth`	`React.CSSProperties['width']`	`false`	`0`	Code line number width
`linenoColor`	`React.CSSProperties['color']`	`false`	`#858585`	Code line number color
`onLineCountChange`	`(lineCount: number) => void`	`false`	-	Callback of Code line count changing

CSS variables

Name	Default value
`--yozora-colors-background-codeHighlight`	`hsla(30deg, 90%, 50%, 0.3)`
`--yozora-colors-border-codeLineno`	`hsla(0deg, 0%, 80%, 0.8)`

FAQ

How do I add more language highlighting support?
See https://github.com/FormidableLabs/prism-react-renderer#faq:
```
import Prism from "prismjs";

(typeof global !== "undefined" ? global : window).Prism = Prism;

require("prismjs/components/prism-kotlin");
require("prismjs/components/prism-csharp");
```
The above method will cause errors in vite + React project at this time (2021-07-27). The reason is that the import statement will be lifted to the top when using vite to bundling, resulting in that the assignment statement of window.Prism=Prism has not been executed before loading additional prismjs language components.