Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

react-code-view

English | 中文版

Why use this component?

Let the code in Markdown run in real time, why is there such a need?

In our front-end team, technical-related documents are written in Markdown. There are often a lot of sample code in the documentation. We hope that when you read the documentation, you can run the sample code to see the rendering interface.

What are the requirements?

  • Let the code in Markdown run and preview.
  • The code can be edited online.
  • Does not affect the layout of the entire document stream.
  • Support React, support code highlighting.
  • Babel can be configured.

After understanding the requirements, I wrote a React component to satisfy these functions, react-code-view , first look at the preview:

preview

Preview: https://simonguo.github.io/react-code-view/

Principle of implementation

  • Parse the Markdown document with markdown-loader and html-loader.
  • Take the code out of the regular expression and give it to codemirror
  • Compile the code in codemirror through babel and render it to the specified container via ReactDOM.render .

Install

npm install react-code-view

Configure webpack .

Support for markdown-loader needs to be added in webpack. Need to install:

npm install html-loader --save-dev
npm install markdown-loader@5.0.0 --save-dev
npm install react-markdown-reader@1.2.0 --save-dev

webpack.config.js

const markdownRenderer = require('react-markdown-reader').renderer;

...
{
  test: /\.md$/,
  use: [{
    loader: 'html-loader'
  }, {
    loader: 'markdown-loader',
    options: {
      renderer: markdownRenderer(/**languages:Array<string>**/)
    }
  }]
}

languages 默认值:["javascript", "bash", "xml", "css", "markdown", "less"];

Add Babel

The sample code usually uses ES2015+, React, etc., and needs to compile the code in real time, so introduce Babel in HTML:

<script
  type="text/javascript"
  src="//cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"
></script>

If cdn.staticfile.org is not well accessed in your area, you can change other CDN.

Example

import CodeView from 'react-code-view';
import 'react-code-view/lib/less/index.less';

import { Button } from 'rsuite';

<CodeView dependencies={{ Button }}>{require('./example.md')}</CodeView>;

The source code is uniformly written in markdown, reference: example.md

The important thing to note here is that the code that needs to be run must be placed in <!--start-code--> and <!--end-code--> between.

API

Name Type Default value Description
babelTransformOptions Object { presets: ['stage-0', 'react', 'es2015'] } Babel configuration parameters options
dependencies Object Dependent components.
renderToolbar Function Custom toolbar.
showCode boolean true Display code.
theme string 'light' Theme, options light and dark.

Who is using?

You can’t perform that action at this time.