Skip to content

yozorajs/yozora-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.