highlight.js 代码高亮插件的使用

技术简介

技术博客系统的文章详情中肯定少不了代码的出现，在浏览时也经常会看到代码的展示，以咱们常用的开发工具来说，里面也会经常使用一些插件让代码变得五颜六色，可以让代码看起来更直观，也更美观，在网页中我们也可以实现类似的效果。开发时我选择的是 highlight 插件，因为它能够得到上述的代码效果而且比较实用，整合也比较简单。

使用方法非常简单，下面我来开始使用。

highlight.js的使用

highlight的相关文件下载地址: https://highlightjs.org/

下载它的相关文件后复制highlight.js文件将其放入到资源目录的js目录下，在样式文件夹中选择自己喜欢的一个样式文件放到资源文件的css目录下，这里我选择的是idea.css，之后在 article.html 引入它的样式文件和 js 文件。

<!-- highlight -->
<link rel="stylesheet" href="@{/css/idea.css}" />
<script src="@{/js/highlight.pack.js}"></script>
之后指定对应 DOM 中的元素进行高亮操作，在 markdown 格式的内容转换为 html 标签格式的内容后，代码块通常是在 <pre><code> 中，所以可以进行如下设置：

<script type="text/javascript">
  $(function () {
    // 代码高亮
    $("pre code").each(function (i, block) {
      hljs.highlightBlock(block);
    });
  });
</script>

未使用插件的显示效果如下：

使用插件后的显示效果如下：

欢迎评论留言！