@yozora/react-code-highlighter

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