其他分享
首页 > 其他分享> > react 页面嵌入代码端—codemirror

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

 

标签:lib,codemirror,react,import,CodeMirror,页面
来源: https://www.cnblogs.com/hl-tyc/p/14662974.html