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.

Related

• mdast code
• prism-react-renderer