博客


React

使用

CodeMirror

(代码编译器标签) 笔记：

1. 下载

CodeMirror

：

• 下载
  
CodeMirror

  ：

  由于新版的
  
CodeMirror

  下载的包少很多东西，这里我们下载老版的

  npm install codemirror@5.62.3
  

• 下载
  
react-codemirror

  ：

  npm install react-codemirror
  npm i --save-dev @types/react-codemirror
  

2. 使用

CodeMirror

：

• 导入
  
CodeMirror

  组件：

  import CodeMirror from "react-codemirror"
  

  这里可能会问为什么不使用
  
react-codemirror2

  ？

  这是因为
  
react-codemirror2

  的
  
CodeMirror

  标签在加载过程中会被重复加载两次，也就是在前端显示两个
  
CodeMirror

  标签，所以我们这里不用
  
react-codemirror2

  。

• 引入核心文件：

  import "codemirror/lib/codemirror.js"
  import "codemirror/lib/codemirror.css"
  

• 引入其它的文件 (用于配置
  
CodeMirror

  标签的一些属性)：

  // 引入代码模式
  import 'codemirror/mode/javascript/javascript'
  // 引入背景主题
  import "codemirror/theme/yonce.css"
  ...
  

• 在前端调用
  
CodeMirror

  标签

  <CodeMirror
      value='console.log(10)' // 设置CodeMirror标签的初始值
      // 设置CodeMirror标签的相关参数
  	options={{
          mode: 'javascript', // 设置该代码编译器所编辑的语言
          theme: "yonce", // 代码编译器主题
          lineNumbers: true // 显示行号
      }}
      // 编译器内容变化后，输出变化后的内容  
      onChange={(code) => {
          console.log(code)
      }}
  />
  

• 当前效果如下：