、前言

1.1、时代的眼泪

在建站初期一直使用富文本默认的样式，其中在代码部分的展示对阅读造成了很大的困扰，

故此，在近期有对文章明细中代码样式部分进行改造，在之前是单调的灰色块，如下：

改造后无论是从格式还是样式都有了质的飞跃，和使用IDE的情况很接近了。

1.2、当世的英雄

下面我就把整个的改造过程分享给大家，希望能有些帮助。

二、Prims实现代码高亮

2.1、什么是Prism

简单来说，Prism.js是一个轻量级的代码着色器，可以使Html中的代码像IDE中一样对背景色，语法，关键字做出高亮处理。

附上其官网：https://prismjs.com/

2.2、如何下载Prism

以我目前适用的Nuxt为例：

在官网的download下我们可以看到有语言、核心库、主题、插件三大项让用户去自定义选择，如下：

2.2、引入JS和CSS

以我的Nuxt项目为例，在页面用配置Head属性如下：

         head() {
            return {
              title: this.articleTitle + "-光慕华",
              link: [
                { rel: 'stylesheet', href: '/css/prism.css' }
              ],
              script: [
                { src: '/js/prism.js'},
                { src: '/js/jquery.min.js'}
              ]
            }
          },

Java

2.3、在Created钩子函数中进行代码高亮处理

        created(){    
              if (typeof window !== 'undefined') {
                  setTimeout(()=>{
                    // 这里加定时器让它后执行，不然没效果
                    Prism.highlightAll() 
                  },200)
                }
          },

Java

三、写在最后

选择Prosm主要还是因为一下原因

① 支持丰富

② 可以根据需要自定义配置

③ 引入和使用简单

希望本篇文章能对需要的人起到一定的帮助作用，加油！

行代码就能让我的网站支持代码高亮的工具库，也支持在 Vue 中使用，强烈推荐给大家。

关于 highlight.js

highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

highlight.js 的技术特性

• 支持 197 种开发语言和 246 种代码高亮风格主题
• 自动开发语言检测
• 支持多种语言混合代码同时高亮
• 支持任何 HTML 标签，不仅仅是<code></code>
• 支持 npm 安装，可以在 Vue.js 中使用，也可以在 node.js 中使用
• 无依赖，与任何 js 框架兼容

为什么要用 highlight.js

常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：

• 长代码图片会缩放，阅读体验不佳
• 搜索引擎不识别，对 SEO 不友好

最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。

使用教程：为我的网站添加代码高亮功能

下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。

虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。

下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：

<link href="/js/monokai-sublime.min.css" rel="stylesheet" type="text/css">
<script src="/js/highlight.min.js"></script>
<script>
   hljs.highlightAll();
</script>

就是这么简单，highlight.js 会自动将文章中的 <pre><code></code></pre> 代码进行识别语言并且高亮，一切就是这么简单。为了让代码显示更协调，我用几行 css 控制了包裹层的圆角以及背景颜色、字体大小等，大功告成。

.post-content .wp-block-code {
   background-color: #F6F8FF;
   border-radius: 16px;
   font-size: 16px;
   padding: 22px 22px 22px 38px;
   margin-top: 22px;
   margin-bottom: 22px;
}
.post-content .wp-block-code {
   line-height: 1.2;
   font-size: 15px;
   padding: 10px;
   overflow-x: auto;
}
.post-content .wp-block-code code {
   position: relative;
   background-color: unset !important;
}

当然 highlight.js 也能在 vue 项目中使用，安装：

npm install highlight.js

在 Vue 文件中使用 (通过 highlight.js for Vue ) ：

<div id="app">
  <!-- bind to a data property named `code` -->
  <highlightjs autodetect :code="code" />
  <!-- or literal code works as well -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

需要注意的是，自动识别模式不能100%识别出代码所属的开发语言，识别错误会导致高亮样式是别的语言的，这种情况下可以手动设置一个 class 来精准控制：

<pre><code class="language-javascript">...</code></pre>

官网提供了详尽的使用文档，有更多代码高亮的控制，但不足的就是 highlight.js 没有显示行号的支持，需要通过再引入一个库 (highlightjs-line-numbers.js) 或者自行实现。

免费开源说明

highlight.js 是一款基于 BSD 许可证开源的 javascript 工具库，任何个人和公司都可以免费下载用于自己的项目，包括商用项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址以及代码高亮效果

highlight.js - 让网页上的代码高亮美化的免费开源工具库｜那些免费的砖

浏览器中，一个比较常见的高亮文本场景是，用户按下快捷键ctr+f，对文本内容进行搜索。在页面里，相应的文本就会高亮。这种高亮，是浏览器实现的。

如果我们要实现这种高亮效果，现有的CSS实现起来是相对比较麻烦的。

方案一，使用伪元素::selection

当我们在页面中，选中一段文本的时候，可以通过document.getSelection()获取到文本选中的节点信息。相应的，我们可以通过Range Api去主动设置选中文本范围。再通过设置::selection样式，实现选中文本高亮效果。这种方案，实现起来比较麻烦，我们需要精确计算每一个高亮预期的选中起止位置。

方案二，对于在页面中需要高亮的文本，进行单独处理

对于静态呈现的内容，在开发中，一般通过设置固定的标签和样式实现文本高亮。

对于需要动态变化的内容处理，例如codemirror，会有一套独立的dom结构树，通过dom结构树，根据处理后的dom结构，在页面中呈现出高亮。这种方案，就相当复杂了。

方案三, 使用伪元素::highlight

这个方案的实现方式，与::selection类似。通过Range Api 设置选中区域。再将这些区域配置进需要高亮的Hight中，最后通过设置::highlight样式实现高亮。

这种方案，比::selection方案具有更强的可操作性。这是新的api，各个浏览器没有完全实现。

【参考资料】

[1] CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web. https://css-tricks.com/css-custom-highlight-api-early-loo/