前言
preact-highlight 是一个基于 Preact 实现的代码高亮插件包，它支持超过 180 种编程语言的代码高亮，并且具有无限制自定义样式的能力。在前端实现代码高亮是很重要的一个工作。本篇文章将会提供如何使用 preact-highlight 来进行前端代码高亮的详细指导。
安装
preact-highlight 包可以通过 npm 安装。请在终端中输入以下指令进行安装：
npm install preact-highlight
此时，preact-highlight 包将会被下载至你的当前目录之中。
使用
preact-highlight 就像任何其他的 Preact 组件一样使用。你可以在项目中导入并将其作为子组件打造出一个自定义的代码高亮样式。接下来的例子中将会指导你如何使用 preact-highlight 来高亮一个 JavaScript 代码块。
-- -------------------- ---- -------
------ --- ---------- ------- ---- ---------
------ -------------------------------------
------ ----------------- ---- -------------------
----- ----------- ------- --------- -
-------- -
----- ---- - ---- --------- - ---------
------ -
------------------ --------------------- ----------------
------
--------------------
--
-
-
---------------------- ---------------这里我们导入了 preact-highlight 的两个组件。Styles 负责通过默认的 github 样式对高亮内容进行渲染，而 SyntaxHighlighter 组件则负责对指定语言和样式的代码块进行高亮。
在上面的例子中，我们将一个名称为 code 的字符串、语言和样式作为参数传入 SyntaxHighlighter 组件。它会返回一个带有高亮的代码块。
<span class="prs hljs-keyword">var</span> firstName <span class="prs hljs-operator">=</span> <span class="prs hljs-string">"John"</span><span class="prs hljs-semicolon">;</span>
通过改变代码块的语言和样式参数，你可以生成属于你项目的自定义代码块高亮。
组件选项
preact-highlight 自带了一些可选组件，以支持对更多语言的代码高亮。
1. 语言支持
preact-highlight 支持 186 种编程语言。你可以在 language 属性中指定所选语言，以获得代码高亮。
<SyntaxHighlighter language='javascript' style='default'>
{code}
</SyntaxHighlighter>2. 样式支持
preact-highlight 包含许多不同的样式，使得你可以选择最适合你项目风格的选项。你可以通过 style 属性来绑定所选样式。
<SyntaxHighlighter language='javascript' style='default'>
{code}
</SyntaxHighlighter>3. 行号支持
preact-highlight 支持在高亮代码块边缘加入行号。通过属性 showLineNumbers 进行设置。
<SyntaxHighlighter showLineNumbers={true} language='javascript' style='default'>
{code}
</SyntaxHighlighter>4. 代码块样式支持
你可以对代码块样式进行定制，并通过 customStyle 属性进行指定。
-- -------------------- ---- ------- ----- ----------- - - ---------------- ---------- ------ ------- -------- -------- ------------- ------- -- ------------------ --------------------- --------------- -------------------------- ------ --------------------
总结
preact-highlight 是一个出色的代码高亮插件。它支持超过 186 种编程语言的代码高亮，并且具有可自定义样式的能力。在本篇文章中，我们详细了解了如何使用 preact-highlight ，以及一些预定义的选项。希望本篇文章可以帮助您在项目中实现您自己的代码高亮需求。
参考资料
preact-highlight GitHub 主页：https://github.com/FormidableLabs/prism-react-renderer#prism-react-renderer
preact-highlight 官网：https://formidable.com/open-source/prism-react-renderer/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1281e8991b448d9b43