介绍
在前端开发中,我们经常需要将代码块展示给用户。而为了让代码块更加美观,我们通常会使用一些代码高亮工具来实现。其中,highlight.js 是一款非常受欢迎的代码高亮库。而今天我要介绍的是 highlightjs-themes,它是一个为 highlight.js 提供主题样式的 npm 包。
安装
首先,我们需要在项目中安装 highlightjs-themes npm 包。可以使用 npm 命令来进行安装:
npm install highlightjs-themes
使用
在安装完包后,我们需要将样式引入到我们的页面中。在 HTML 文件中,我们可以通过以下代码来引入 highlightjs-themes 的样式:
<link rel="stylesheet" href="node_modules/highlightjs-themes/styles/blue.css">
其中,styles 文件夹下包含了大量的主题样式,我们可以根据自己的需要选择使用。
接着,我们需要在代码块的标签上添加需要的类名来应用这个样式。比如,如果我们要使用 blue.css 主题样式,可以在代码块的标签上添加类名 hljs-blue
,代码如下:
<pre><code class="hljs hljs-blue">var x = 1; var y = 2; console.log(x + y);</code></pre>
示例
下面,我给大家演示一下如何使用 highlightjs-themes 来高亮代码。以 blue.css 主题为例,我们可以使用以下代码来展示一段 JavaScript 代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ------ ------------ ----- ---------------- ------------------------------------------------------- ------- ------------------------------------------------------------------------------------------- ------- ------ ---------------- ------ --------- ---------- ----------- -------------- - - -- --- - - -- ------------- - ---------------- -------- ------------------------------ --------- ------- -------
在上面的代码中,我们首先在 head
标签中引入了 blue.css 文件,然后使用 hljs hljs-blue
类名来展示 JavaScript 代码,并且在 script
标签中调用了 initHighlightingOnLoad()
方法来初始化代码高亮。
结论
使用 highlightjs-themes 包,我们可以轻松地为代码高亮工具添加多种样式主题,从而使用户界面变得更加美观、易于阅读。在实际项目中,我们可以根据自己的需要选择不同的主题样式,从而达到更加符合实际需求的效果。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/highlightjs-themes