在前端开发中，我们经常需要展示 GraphQL 查询语句或者响应结果。为了方便展示，我们可以使用 highlightjs-graphql 这个 npm 包来进行语法高亮。本篇文章将会详细介绍这个包的使用方法，希望能够对读者有帮助。
安装
首先，在你的项目中安装 highlightjs-graphql 包。可以使用 npm 或者 yarn 进行安装：
--- ------- -------------------
---- --- -------------------
使用
在安装完成后，在你的项目中引入 highlightjs-graphql 包。这一步可以在你的 JavaScript 文件中进行，也可以在 HTML 文件中引入：
------ ---- ---- ------------------------ ------ ------- ---- ---------------------- -------------------------------- --------- --------------------
--------- -----
------
------
----- ----------------
-----------------------------------------------------------------------------------------
----- ----------------
-------
------
---------- ----------------
----- -
-------- -- -
---------
--------
-
-
-------------
------- -------------------------------------------------------------------------------------
------- -----------------------------------------------
--------
--------------------
---------
-------
-------示例代码
以上代码中展示了如何将一个 GraphQL 查询语句进行语法高亮，接下来我们看一下如何将一个响应结果进行语法高亮：
------ ---- ---- ------------------------
------ ------- ---- ----------------------
-------------------------------- ---------
----- -------- - -
----- -
----- -
---------- --------
--------- --------
--
--
--
----------------------------------------------------- ----- -------------------
--------------------学习与指导意义
通过本文，我们了解了如何使用 highlightjs-graphql 这个 npm 包来进行语法高亮。同时也提供了一些示例代码以便读者更好地理解这个包的使用方法。
高亮包作为前端开发中常见的工具，使用广泛且方便。但是读者们需要记住的是，除了高亮这种工具外，工作中还有很多需要关注的内容，例如代码的可维护性、可重用性，性能优化等等。所以我们应该将这些工具作为取得成功的基础，而不是整个工作的精华所在。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc928b5cbfe1ea0612351