npm 包 cm-mode-kevscript 使用教程

前言

cm-mode-kevscript 是一款基于 CodeMirror 的 JavaScript 代码编辑器插件,它能够为 KevScript 语言提供高亮显示和代码提示功能。本文将会介绍该插件的安装、使用以及常用功能的使用方法,希望能够帮助你更好地应用该插件。

安装

你可以通过 npm 包管理器来安装 cm-mode-kevscript

--- ------- ----------------- ------

也可以通过 CDN 的方式引入,如下所示:

------- ------------------------------------------------------------------------------------------

使用

在你的 HTML 文件中引入 codemirror.jsmode/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 插件的高亮显示和代码提示功能,具体操作如下:

  1. 访问 CodePen 的代码编辑器
  2. 将上文中的 HTML、CSS 和 JavaScript 代码分别复制粘贴到相应的编辑区域中;
  3. 点击运行按钮,即可在运行窗口中看到高亮显示和代码提示的效果。

示例代码如下:

--------- -----
------
  ------
    ----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------- ----------------------- --
  -------
  ------
    --------- ---------------------------

    ------- ---------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
    ------- -------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
    ------- ------------------------------------------------------------------------------------------

    --------
      --- ------ - -------------------------------------------------------------- -
        ----- ------------
        ------------ ----
      ---
    ---------
  -------
-------

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005626181e8991b448dfa69


猜你喜欢

  • npm 包 renderium 使用教程

    renderium 是一个在 Node.js 和浏览器环境中使用的 HTML / PDF / PNG 渲染引擎。 它可以帮助前端开发者轻松解决网页截图和 PDF 生成等问题。

    3 年前
  • npm 包 sails-formatter 使用教程

    在前端开发中,我们常常使用 Node.js 和 npm 包管理器来管理项目的依赖,其中 sails-formatter 作为一个专门用于格式化 Sails.js 应用程序代码的 npm 包,可以大大提...

    3 年前
  • npm 包 aftertime 使用教程

    在前端开发中,我们可能需要对某些操作进行延迟处理,以达到更好的用户体验和程序稳定性。而 npm 包 aftertime 就是一款很好用的解决方案,它可以轻松实现在一定时间后执行某些操作的功能。

    3 年前
  • npm 包 @decktape/fonteditor-core 使用教程

    什么是 @decktape/fonteditor-core @decktape/fonteditor-core 是一个基于 JavaScript 的字体编辑器核心库,具备良好的兼容性,可在绝大多数浏览...

    3 年前
  • npm 包 coinpusher 使用教程

    前言 Coinpusher 是一个用于生成虚拟货币的 CLI 工具,可用于在区块链中进行测试。它基于 Node.js 开发,可以通过 npm 安装。在本文中,我们将深入了解 coinpusher,了解...

    3 年前
  • npm 包 node-yt-search 使用教程

    什么是 node-yt-search node-yt-search 是一个用于搜索 YouTube 视频的 Node.js 模块。它提供了一个简单的 API,可以让开发人员通过关键字、频道、播放列表等...

    3 年前
  • npm 包 moment-helper 使用教程

    在前端开发中,经常需要对日期时间进行处理和格式化。Moment.js 是一个被广泛使用的 JavaScript 库,提供了许多日期和时间处理功能。moment-helper 是一个基于 Moment....

    3 年前
  • npm 包 open-electron-titlebar-windows 使用教程

    前言 在前端开发中,经常需要打开一些外部应用程序,例如文本编辑器、浏览器等。而 Electron Titlebar Windows 就是一个可以方便地在 Electron 应用中打开外部窗口的 npm...

    3 年前
  • npm包 ronsku-reactive-state 使用教程

    什么是 ronsku-reactive-state ronsku-reactive-state是一个基于react hook的状态管理工具,可用于处理在react组件之间共享的状态。

    3 年前
  • npm 包 wikic-suite-docslist 使用教程

    简介 wikic-suite-docslist 是一个专门用于在前端应用程序中展示文档列表的 npm 包。它可用于构建文档资源库,在该库中用户可以轻松地查找和访问所有相关文档,并根据自定义输入搜索关键...

    3 年前
  • npm 包 @dbmdz/mirador-piwiktracking 使用教程

    引言 在 Web 开发中,我们需要跟踪用户的行为来优化产品和服务。其中, Piwik 是一种非常有用的 Web 分析工具。在前端开发中,有一个叫做 @dbmdz/mirador-piwiktracki...

    3 年前
  • npm 包 replugger-demo-plugin-foo 使用教程

    介绍 replugger-demo-plugin-foo 是一个 npm 包,用于在浏览器环境下向网页中插入 demo 代码。插入的 demo 代码可以进行修改和存储,具有较高的灵活性和可编程性,适用...

    3 年前
  • npm 包 replugger-demo-plugin-bar 使用教程

    在前端开发中,我们需要使用大量的第三方库和插件,而 npm 是前端开发人员最常用的一个包管理工具。replugger-demo-plugin-bar 是一个常用的 npm 包,本文将提供相关的使用教程...

    3 年前
  • npm 包 echo.io-server 使用教程

    什么是 echo.io-server echo.io-server 是一款基于 Socket.IO 构建的简单 websocket 通信库,它提供了实时的双向数据通信,可以运用在非常多的 Web 应用...

    3 年前
  • npm 包 @krzysztofkarol/material-ui 使用教程

    简介 @krzysztofkarol/material-ui 是基于 React 的 UI 库,它提供了一系列组件、样式和工具来快速搭建 Web 应用程序的前端界面。

    3 年前
  • npm 包 jquery-rate 使用教程

    前言 在 Web 开发中,经常会需要实现一个星级评分的组件。这时候,可以使用一个很强大的 npm 包:jquery-rate。这个组件支持自定义星星数量、鼠标滑过、点击评分、自动回调等功能。

    3 年前
  • npm包:conventional-changelog-stalinkay 使用教程

    前言 consventional-changelog-stalinkay是一个开源的npm包,它可以帮助我们生成符合Conventional Commits规范的CHANGELOG.md文件,从而方便...

    3 年前
  • npm 包 eslint-plugin-smtxt 使用教程

    简介 eslint-plugin-smtxt 是一个针对前端开发的语法检查工具,可以帮助开发者在代码编写的过程中发现潜在的错误和不规范的代码风格。 安装 首先需要安装 eslint 和 eslint-...

    3 年前
  • npm 包 stent-dev-tools 使用教程

    stent-dev-tools 是一个用于帮助前端开发者利用 stent 管理应用状态的 npm 包。它提供了一个开发工具,可以让开发者更加高效地开发应用程序,并且能够自动启用 DevTools。

    3 年前
  • npm 包 path-from-image 使用教程

    介绍 path-from-image 是一个 npm 包,可以从图像中提取并生成路径数据。这对前端开发人员来说是非常有用的,因为在一些项目中需要使用形状和路径数据来进行动画和交互操作。

    3 年前

相关推荐

    暂无文章