Installations

npm install @yozora/react-code-editor

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.19.0

NPM Version

lerna/8.2.3/node@v20.19.0+x64 (linux)

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

1

Closed

1

Releases

Unable to fetch releases

Languages

2

TypeScript

JavaScript

TypeScript (99.03%)

JavaScript (0.97%)

Developer

yozorajs

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

7 Stars

742 Commits

1 Watchers

3 Branches

1 Contributors

Updated on Jul 04, 2025

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

3.0.0-alpha.16

Package Id

@yozora/react-code-editor@3.0.0-alpha.16

Unpacked Size

68.23 kB

Size

16.41 kB

File Count

7

NPM Version

lerna/8.2.3/node@v20.19.0+x64 (linux)

Node Version

20.19.0

Published on

Jul 04, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

@guanghechen/equal @yozora/core-react-constant @yozora/react-code-highlighter

Peer Dependencies

3

@emotion/css prop-types react

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.

https://user-images.githubusercontent.com/42513619/129205123-6a1983c4-6a86-4c80-83d6-02bdbf70edbf.mp4

Usage

See @yozora/react-markdown

npm

1npm install --save @yozora/react-markdown

yarn
```
1yarn add @yozora/react-markdown
```

1import loadable from '@loadable/component'
2import { calcDefinitionMap, calcFootnoteDefinitionMap } from '@yozora/ast-util'
3import { Theme, ThemeProvider } from '@yozora/core-react-theme'
4import YozoraParser from '@yozora/parser'
5import { MathJaxProvider, Markdown, MarkdownProvider } from '@yozora/react-markdown'
6
7const ImageViewer = loadable(() => import('react-viewer'))
8
9const parser = new YozoraParser()
10const ast = parser.parse(`source markdown contents`, { shouldReservePosition: true })
11const definitionMap = calcDefinitionMap(ast)
12const footnoteDefinitionMap = calcFootnoteDefinitionMap(ast)
13
14<MathJaxProvider>
15  <ThemeProvider theme={Theme.LIGHT}>
16    <MarkdownProvider
17      definitionMap={definitionMap}
18      footnoteDefinitionMap={footnoteDefinitionMap}
19      ImageViewer={ImageViewer}
20    >
21      <Markdown ast={ast} />
22    </MarkdownProvider>
23  </ThemeProvider>
24</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.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

2

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

SAST

Determines if the project uses static code analysis.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

3.6

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More