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,//是否支持代码折叠
}}
/>