前言
cm-mode-kevscript 是一款基于 CodeMirror 的 JavaScript 代码编辑器插件，它能够为 KevScript 语言提供高亮显示和代码提示功能。本文将会介绍该插件的安装、使用以及常用功能的使用方法，希望能够帮助你更好地应用该插件。
安装
你可以通过 npm 包管理器来安装 cm-mode-kevscript：
npm install cm-mode-kevscript --save
也可以通过 CDN 的方式引入，如下所示：
<script src="https://unpkg.com/cm-mode-kevscript@0.1.0/lib/codemirror-mode-kevscript.js"></script>
使用
在你的 HTML 文件中引入 codemirror.js 和 mode/javascript/javascript.js（或 mode/jsx/jsx.js）文件，并创建一个 textarea 元素或其他 CodeMirror 支持的编辑器元素。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------- ----------------------- --
-------
------
--------- ---------------------------
------- ---------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
------- -------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
--------
--- ------ - -------------------------------------------------------------- -
----- -------------
------------ ----
---
---------
-------
-------在创建 CodeMirror 实例的代码中，将 mode 属性设置为 javascript（如果你使用的是 JSX 语法，请设置为 jsx），即可使用 JavaScript 语法的高亮显示和代码提示功能。接下来，我们将会介绍如何启用 KevScript 语言的高亮显示和代码提示功能。
高亮显示
要启用 KevScript 语言的高亮显示功能，我们需要引入 codemirror-mode-kevscript.js 文件，并将 mode 属性设置为 'kevscript'。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------- ----------------------- --
-------
------
--------- ---------------------------
------- ---------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
------- -------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
------- ------------------------------------------------------------------------------------------
--------
--- ------ - -------------------------------------------------------------- -
----- ------------
------------ ----
---
---------
-------
-------现在，KevScript 语言的关键字、函数、变量等将会被高亮显示。
代码提示
除了高亮显示外，cm-mode-kevscript 还提供了代码提示的功能。要启用代码提示功能，我们需要为 CodeMirror 实例添加 autocomplete 属性，并将其值设置为一个对象，该对象中应包含 hint 属性和 words 属性。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------- ----------------------- --
-------
------
--------- ---------------------------
------- ---------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
------- -------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
------- ------------------------------------------------------------------------------------------
--------
--- ------ - -------------------------------------------------------------- -
----- ------------
------------ -----
------------- -
----- ---------------- -
--- ----- - ------ ------- --------- -------- ----------- --------- ---------
--- --- - -------------------
--- ----- - -----------------------
--- ---- - -------------
--- ----- - ------------
-- ------------ - -- -
----- - --------------------------- -
------ --------------------
---
-
------ -
----- ------------------------ -------
--- ------------------------ -----------
----- -----
--
--
------ ------ ------- --------- -------- ----------- --------- --------
-
---
---------
-------
-------在上面的代码中，我们在 autocomplete 属性中添加了一个 hint 属性和一个 words 属性，其中 hint 对象的值是一个函数，用于在编辑器中提供代码提示列表。该函数接收一个 CodeMirror 的 editor 对象作为参数，它会根据用户输入的单词过滤 words 属性中的关键字，从而为用户提供可用的代码提示列表。
示例代码
你可以在 CodePen 上体验 cm-mode-kevscript 插件的高亮显示和代码提示功能，具体操作如下：
- 访问 CodePen 的代码编辑器；
- 将上文中的 HTML、CSS 和 JavaScript 代码分别复制粘贴到相应的编辑区域中；
- 点击运行按钮，即可在运行窗口中看到高亮显示和代码提示的效果。
示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------- ----------------------- --
-------
------
--------- ---------------------------
------- ---------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
------- -------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
------- ------------------------------------------------------------------------------------------
--------
--- ------ - -------------------------------------------------------------- -
----- ------------
------------ ----
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626181e8991b448dfa69