Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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:



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 .


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


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:


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


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

import { Button } from 'rsuite';

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

The source code is uniformly written in markdown, reference:

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.


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.