简介
前端类的技术文章不可避免地需要讲到代码渲染，特别是在实现代码高亮的时候。而在这个领域里，@gerhobbelt/prismjs 是一个非常好用的 npm 包，它可以在浏览器端或者 Node.js 上呈现高亮的代码，无论是代码片段还是整个文件。
在本文中，我们将介绍如何使用 @gerhobbelt/prismjs 包，能够帮助你解决代码高亮的问题，并集成到你的项目工程中。
安装
你可以使用 npm 命令来安装 @gerhobbelt/prismjs 包。具体命令如下所示：
npm install @gerhobbelt/prismjs --save
使用方法
在你的项目中，你可以按照如下步骤使用 @gerhobbelt/prismjs 包：
引入样式表文件：
<link rel="stylesheet" href="node_modules/@gerhobbelt/prismjs/themes/prism.css">
注意这里样式表是可以定制的，你可以在上面路径后面添加样式文件名，以此来改变代码块的显示风格。
引入脚本文件：
<script src="node_modules/@gerhobbelt/prismjs/prism.js"></script>
同样地，这里的脚本文件也是可以扩展的。在默认情况下，它能够处理大多数的代码语言和框架，但是如果你需要处理一些特定的语言或框架，你可以添加额外的插件文件来支持你的需求。
在你需要用到代码高亮渲染的地方使用
pre和code标签：<pre><code class="language-javascript"> // your code here </code></pre>
注意这里的
class属性中，我们需要指定它需要渲染的语言类型。
示例代码
下面的代码展示了一个比较完整的项目结构，用于演示如何使用 @gerhobbelt/prismjs 包：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ---------------
----- ---------------- ---------------------------------------------------------
------- ---------------------------------------------------------
-------
------
------------ ------------
---------- ----------------------------
-- ---- -- - ---------- -------
----- - - ------- --------
---------------
-------------
---------- ---------------------
-- ---- -- - --- ------- --
---- -
------------ -----------
------------ ------
------ -----
----------------- --------
-------- ----
---------- -----
------- --- -----
----------- - ----- --- ----------------
-------------- ------
-
-------------
-------
-------结论
在这篇文章中，我们介绍了 @gerhobbelt/prismjs 包的用处和基本用法。通过这个包，你可以更加方便地实现代码高亮功能，并集成到你的项目工程中。
除此之外，我们还提供了示例代码和详细的介绍，以便读者更好地学习和理解。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c871403f2923b035bd98