react 页面嵌入代码端—codemirror

介绍：CodeMirror是一个代码编译器。
特点：CodeMirror可以直接嵌入Web页面，提供在线代码编辑器的特性
页面实现：

代码段

package.json中添加相关依赖

"codemirror": "^5.60.0",
"react-codemirror2": "^7.2.1",

引入CodeMirror组件以及js,css文件

import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror.js';

引入组件并设置属性

const jsonParam= [
    {
      name:'test1',
      id:1,
      age:18
    },
  ];
<CodeMirroraram
          value={JSON.stringify(jsonParam, null, 2)}//内容
          options={{
            mode: { name: 'javascript', json: true },//语言
            // theme: 'blackboard',//主题
            lineNumbers: true, // 是否显示行号
            readOnly: true, // 是否只读
            // lineWrapping: true,//是否支持代码折叠
          }}
  />