simonguo / react-code-view Goto Github PK

View Code? Open in Web Editor NEW

186.0 5.0 31.0 22.7 MB

A flexible playground for rendering Markdown and live editing React components.

Home Page: https://simonguo.github.io/react-code-view/

License: MIT License

JavaScript 37.76% Less 8.03% TypeScript 54.02% Shell 0.18%

react codeeditor markdown markdown-viewer markdown-loader webpack playground

react-code-view's Introduction

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  and 

Props

`<CodeView>`

Name	Type	Default value	Description
afterCompile	(code: string) => string		Executed after compiling the code
beforeCompile	(code: string) => string		Executed before compiling the code
children	any		The code to be rendered is executed. Usually imported via markdown-loader
compileOptions	object	defaultTransformOptions	https://github.com/alangpierce/sucrase#transforms
dependencies	object		Dependent objects required by the executed code
editable	boolean	false	Renders a code editor that can modify the source code
editor	object		Editor properties
onChange	(code?: string) => void		Callback triggered after code change
onCloseEditor	() => void		Callback triggered when the editor is closed
onOpenEditor	() => void		Callback triggered when the editor is opened
renderExtraFooter	() => ReactNode		Customize the rendering footer
renderToolbar	(buttons: ReactNode) => ReactNode		Customize the rendering toolbar
sourceCode	string		The code to be rendered is executed
theme	'light' , 'dark'	'light'	Code editor theme, applied to CodeMirror

react-code-view's People

Contributors

Stargazers

Watchers

react-code-view's Issues

mark topic so more developer can find this repository

可否支持自定义代码样式呢？

next.js 编译的时候会报错

版本信息：

  "next": "13.3.0",
  "react": "18.2.0",
  "react-code-view": "^2.2.1",
  "react-dom": "18.2.0",

在next.js 项目执行 build 命令时会报如下错误

报错代码：

组件渲染不出来一直展示 Rendering...

platform: macos
node: 14.19.1
react: 18.2.0
react-dom: 18.2.0

next.config.js 配置

/* eslint-disable @typescript-eslint/no-require-imports */
/** @type {import('next').NextConfig} */

const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const resolvePath = dir => resolve(__dirname, dir)

const {
  // 'production' on main branch
  // 'preview' on pr branches
  // emtpy on local machine
  // @see https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables
  VERCEL_ENV = 'local'
} = process.env

const __DEV__ = VERCEL_ENV === 'preview' || VERCEL_ENV === 'local'

const nextConfig = {
  env: {
    DEV: __DEV__ ? 1 : 0
  },
  experimental: {
    externalDir: true
  },
  reactStrictMode: true,

  webpack(config) {
    config.module.rules.push({
      test: /\.(le|c)ss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader'
        },
        {
          loader: 'postcss-loader'
        },
        {
          loader: 'less-loader'
        }
      ]
    })

    config.module.rules.push({
      test: /\.md$/,
      use: [
        {
          loader: 'react-code-view/webpack-md-loader',
          options: {
            parseLanguages: ['typescript', 'rust', 'javascript']
          }
        }
      ]
    })

    config.plugins.push(
      new MiniCssExtractPlugin({
        experimentalUseImportModule: true, // isWebpack5
        filename: 'static/css/[name].css',
        chunkFilename: 'static/css/[contenthash].css'
      })
    )

    if (__DEV__) {
      Object.assign(config.resolve.alias, {
        'fortune-design': resolvePath('../src'),
        react: resolvePath('./node_modules/react'),
        'react-dom': resolvePath('./node_modules/react-dom')
      })
    }

    return config
  },
  // trailingSlash: true,
  // onDemandEntries: {
  //   // Period (in ms) where the server will keep pages in the buffer
  //   maxInactiveAge: 120 * 1e3, // default 25s
  //   // Number of pages that should be kept simultaneously without being disposed
  //   pagesBufferLength: 3 // default 2
  // },

  pageExtensions: ['tsx'],
  typescript: {
    tsconfigPath: __DEV__ ? './tsconfig.local.json' : './tsconfig.json'
  }
}

module.exports = nextConfig

Button.tsx

/* eslint-disable simple-import-sort/imports */
/* eslint-disable @typescript-eslint/no-require-imports */
import CodeView from 'react-code-view'
import 'react-code-view/styles/react-code-view.css'

const ButtonPage = () => {
  return (
    <div>
      <CodeView>{require('./button.md')}</CodeView>
    </div>
  )
}

export default ButtonPage

Button.md

展示效果：

直接下载你的代码，报TypeError

如何向md组件传参

需要向markdown文件中传递参数，以便更新组件，要怎么处理

是否有计划升级 babel 到 17 版本

请问楼主是否有计划升级 Babel 版本到 7 https://unpkg.com/@babel/[email protected]/babel.min.js ，以使用到与 React 相关的新特性。

https://github.com/simonguo/react-code-view/blob/master/docs/index.html#L10

ReferenceError: js is not defined

直接按readme操作（//cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js 有正常加载到html的head），报错ReferenceError: js is not defined，怀疑是js的eval不识别：

一个md文件，怎么渲染多个code段

我看rsuite的文档是可以多个渲染的，请问是怎么实现的，难道是要创建多个md文件 https://rsuitejs.com/en/components/dropdown 任意一个组件基本都是多个代码段的

CodeView 建议远程加载代码优化

现有代码使用

 export default class RedenvelopeTableList extends React.Component {

    public _CodeView: any

    public state = {
        code: 'const instance = <Button>Test</Button>;ReactDOM.render(instance);'
    }

    componentDidMount(): void {
         this._CodeView.executeCode(this.state.code)
    }

    public render() {
        return (
            <>
                <CodeView dependencies={{Button, Alert}} showCode={true}>{require('./example.md')}</CodeView>
                <CodeView ref={ref => this._CodeView = ref} dependencies={{Button, Alert}} showCode={true}/>
            </>

        )
    }
}