介绍
react16-codemirror 是一个基于 CodeMirror 实现的 React 组件，封装了代码编辑器的基本功能和样式，可以用于在 React 中显示代码。本文将介绍 react16-codemirror 的使用方法，包括如何安装、如何使用、以及如何自定义主题和插件。
安装
使用 npm 安装 react16-codemirror：
npm install react16-codemirror --save
使用
在使用前需要先引入 react16-codemirror：
import ReactCodeMirror from 'react16-codemirror';
然后在 render 方法中使用：
<ReactCodeMirror value={code} options={options} onChange={handleChange} />其中：
value表示代码内容，可以为字符串或字符串数组。options表示 CodeMirror 的配置选项，具体可参考 CodeMirror 的 API 文档。onChange表示代码内容发生改变时的回调函数。
自定义主题
CodeMirror 提供了很多主题，可以通过配置 options 中的 theme 来调用。react16-codemirror 还支持自定义主题。以 Monokai 主题为例：
首先创建 monokai.css 文件，将主题样式写入其中：
-- -------------------- ---- ------- ----------- - ----------------- -------- ------ -------- - ------------------- - ------------- ---- ----------------- -------- ------ -------- - ------------------ - ------------ --- ----- -------- - -------------------- - ----------------- -------- -
然后在 options 中配置 theme 为 monokai.css 的路径：
import 'monokai.css';
// options
{
theme: 'monokai.css',
// ...
}自定义插件
CodeMirror 支持插件机制，react16-codemirror 在此基础上提供了更方便的自定义插件功能。
以 match-brackets 插件为例：
首先创建 match-brackets.js 文件，将插件代码写入其中：
-- -------------------- ---- -------
-------- --------------------- -
-------- ----------------- -
--- ----- - ------------------------------------- ------------------------ ------ - -----
-- -------- ------ -----
--- --- - ----- -- --- -- ----- -- --- -- ----- -- ----
------ ----------------------- -----
-
-------- ---------------- -
--- ------ - ---
---------------------------------- -
--- ---- --- - ------------------ --- ---- --- - --------------------- -
--- ----- - ------- ---------- ----- ------- --- ------------------------
-------------------
-
---
--------------------------- -
------------------------------------ -----------------
--- ---- - - -- - - -------------- ----
---------------------------------------- ------------- -----------------
---
-
--------------------------- ----------------
-
------ ------- --------------然后在使用 ReactCodeMirror 时传入 plugins 属性：
import matchBrackets from './match-brackets.js';
// options
{
plugins: [matchBrackets],
// ...
}这样在编辑过程中，匹配的括号会被高亮显示。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ --------------- ---- ---------------------
------ --------------------------------
------ -------------------------------
------ ------------- ---- ----------------------
-------- ----- -
----- ------ -------- - -------------
----- ------- - -
------ ----------
------------ -----
----- -------------
--------- ------
-------- --
------------------ -----
---------- -
------------- ---------------
--
-------------------------- -----
-------------- -----
------------- -----
----------- --
------------ -----
---------- -----
---------------- -----
----- -----
-------- -
-------------------------
--------------------------
--------------------------
--------------------------
--
-------- ----------------
--
----- ------------ - ------- -- -
---------------
--
------ -
---- ----------------
---------------- ------------ ----------------- ----------------------- --
------
--
-
------ ------- ----总结
react16-codemirror 提供了一种在 React 中显示代码的解决方案，支持自定义主题和插件，能够满足大部分的代码显示需求。当然，同样也有其它类似的库，例如 react-codemirror2、react-codemirror等，开发者可以根据自己的需求和偏好选择适合自己的库进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd881e8991b448e5801