Yozora React

A monorepo contains react components render Yozora AST Nodes. See https://yozora.guanghechen.com for details.

Use @yozora/react-markdown to render the @yozora/ast.

yozora.demo.mp4

Usage

See @yozora/react-markdown

• npm

  npm install --save @yozora/react-markdown

• yarn

  yarn add @yozora/react-markdown

import loadable from '@loadable/component'
import { calcDefinitionMap, calcFootnoteDefinitionMap } from '@yozora/ast-util'
import { Theme, ThemeProvider } from '@yozora/core-react-theme'
import YozoraParser from '@yozora/parser'
import { MathJaxProvider, Markdown, MarkdownProvider } from '@yozora/react-markdown'

const ImageViewer = loadable(() => import('react-viewer'))

const parser = new YozoraParser()
const ast = parser.parse(`source markdown contents`, { shouldReservePosition: true })
const definitionMap = calcDefinitionMap(ast)
const footnoteDefinitionMap = calcFootnoteDefinitionMap(ast)

<MathJaxProvider>
  <ThemeProvider theme={Theme.LIGHT}>
    <MarkdownProvider
      definitionMap={definitionMap}
      footnoteDefinitionMap={footnoteDefinitionMap}
      ImageViewer={ImageViewer}
    >
      <Markdown ast={ast} />
    </MarkdownProvider>
  </ThemeProvider>
</MathJaxProvider>

Overview

Core

Package Name	Description
@yozora/core-react-renderer	Provider NodesRenderer and simple markdown renderers.
@yozora/core-react-theme	Provider markdown theme context.

Markdown components

Package Name	Token Name
@yozora/react-admonition	admonition
@yozora/react-code	code

Other components

Package Name	Description
@yozora/react-code-editor	A simple code editor.
@yozora/react-code-embed	A simple code editor online.
@yozora/react-code-highlighter	Highlight codes.
@yozora/react-code-literal	Render literal code block.
@yozora/react-code-live	A live code editor, be similar to react-live.
@yozora/react-code-renderer-jsx	React component for rendering jsx directly in browser.
@yozora/react-code-renderer-graphviz	React component for rendering graphviz (dot) directly in browser.
@yozora/react-markdown	React component for rendering markdown content with above Markdown Components.
@yozora/react-mathjax	Render formula with mathjax in react.