@yozora/react-code-literal

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

• yarn

  yarn add @yozora/react-code-literal

Usage

• Basic:

  import React from 'react'
  import CodeLiteral from '@yozora/react-code-literal'
  
  const wrapper = (
    <CodeLiteral
      code="let x = 1"
      lang="javascript"
      style={{ color: 'orange' }}
    />
  )

Props

Name	Type	Required	Default	Description
className	string	false	-	Root css class
collapsed	boolean	false	false	Collapse the code block
darken	boolean	false	-	Enable the darken mode
highlightLinenos	number[]	false	-	Line number of Lines that should be highlighted
lang	string	false	-	Language of the source codes
maxLines	number	number	-	Maximum number of rows displayed
style	React.CSSProperties	false	-	Root css style
showLineNo	boolean	false	-	Whether to display the line numbers
title	string	false	-	Code title
value	string	true	-	Literal source codes

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

CSS variables

Name	Default value
--yozora-colors-background-code	#f5f5f5
--yozora-colors-border-code	#d3d3d3
--yozora-colors-caret-code	#ed6c60
--yozora-colors-selection-code	hsla(200deg, 30%, 70%, 0.3)
--yozora-colors-text-codeTitle	hsla(0deg, 0%, 30%, 0.8)
--yozora-fonts-family-code	Consolas, 'Source Code Pro', 'Roboto Mono', monospace, sans-serif
--yozora-fonts-family-heading	'Comic Sans MS', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif
--yozora-fonts-size-code	1rem

Related

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