React Code View

React Code View can render source code in markdown documents. And brings you the ability to render React components with editable source code and live preview.

Install

npm install react-code-view

Configure Webpack

// webpack.config.js
export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'react-code-view/webpack-md-loader'
      }
    ]
  }
};

Options

{
  "parseLanguages": [
    // Supported languages for highlight.js
    // default: "javascript", "bash", "xml", "css", "markdown", "less", "typescript"
    // See https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
  ],
  "htmlOptions": {
    // HTML Loader options
    // See https://github.com/webpack-contrib/html-loader#options
  },
  "markedOptions": {
    // Pass options to marked
    // See https://marked.js.org/using_advanced#options
  }
}

webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        use:[
          loader: 'react-code-view/webpack-md-loader',
          options:{
            parseLanguages: ['typescript','rust']
          }
        ]
      }
    ]
  }
};

Usage

import CodeView from 'react-code-view';
import { Button } from 'rsuite';

import 'react-code-view/styles/react-code-view.css';

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

The source code is written in markdown, refer to example.md

Note: The code to be rendered must be placed between <!--start-code--> and <!--end-code-->

Props

<CodeView>

2.4.1 (2025-02-18)

2.4.0 (2024-04-17)

Features

• add support for renderExtraFooter and onOpenEditor and onCloseEditor (#55) (886d862)

2.3.1 (2024-01-26)

Bug Fixes

• fix HTML parsing error (#54) (5c1aa7f)

2.3.0 (2024-01-26)

Features

• add support for one-click copy code (#53) (f379146)

2.2.1 (2022-09-07)

Bug Fixes

• CodeEditor: fix Codemirror being initialized twice (#40) (bb4aa2c)

2.2.0 (2022-08-01)

Bug Fixes

• Renderer: fix timely re-renders (#39) (cf77850)

Performance Improvements

• transform: use sucrase instead of @swc/wasm-web to improve transcoding performance #38

2.1.0 (2022-07-12)

Features

• support for rendering multiple examples in markdown (#35) (d021789)

2.0.0

Features

Use @swc/wasm-web instead of babel to compile code in the browser.

Importing babel.min.js on the page will no longer be required. How it is used in v1

Refactored webpack loader for markdown.

// v1

export default {
  module: {
     rules: [
      {
        test: /\.md$/,
        use: [{
          loader: 'html-loader'
        }, {
          loader: 'markdown-loader',
          options: {
            renderer: markdownRenderer()
          }
        }]
      }
    ]

  }
};

// v2
export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        use:[
          loader: 'react-code-view/webpack-md-loader',
          options:{
            parseLanguages: ['typescript','rust']
          }
        ]
      }
    ]
  }
};

Props redefined

v1

v2