npm 包 code-highlight 使用教程

在前端开发中，我们经常需要在我们的代码中展示一些高亮的代码块。这时候，一个好用的 npm 包就非常重要。今天，我们就来介绍一个非常好用的 npm 包 code-highlight，让你可以轻松地在你的项目中添加高亮的代码块。

安装

要使用这个 npm 包，我们首先需要安装它。在终端中运行以下命令即可：

npm install code-highlight

使用

安装完成后，我们就可以在我们的项目中使用它了。首先，我们需要引入包：

import CodeHighlight from 'code-highlight';

接下来，我们需要渲染一个包含着我们需要高亮的代码的元素。例如：

<div id="code">
  function count() {
    var a = 1;
    var b = 2;
    return a + b;
  }
</div>

接下来，我们就可以使用 CodeHighlight 来高亮这个包含代码的元素了。我们只需要在代码运行后执行一遍以下代码即可：

CodeHighlight.highlightBlock(document.getElementById('code'));

这时候，我们在页面中看到的就是这样的代码块：

function count() {
  var a = 1;
  var b = 2;
  return a + b;
}

配置

CodeHighlight 还支持一些自定义的配置。我们可以传入一个配置对象，来改变代码块的显示效果。例如：

CodeHighlight.configure({
  classPrefix: 'my-custom-prefix-'
});

这里，我们将代码块的前缀自定义为了 my-custom-prefix-，这样页面中的生成的代码块的 class 就会带有这个前缀。

总结

code-highlight 是一个非常好用的 npm 包，它可以轻松地让我们的项目中添加高亮的代码块。通过上面的介绍，我们不难看出它使用起来非常方便，并且还支持自定义配置。希望大家在项目中使用这个包时，能够轻松愉快！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589e81e8991b448d5e6e