一、前言1.1、时代的眼泪

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

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

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

1.2、当世的英雄

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

二、Prims实现代码高亮2.1、什么是Prism

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

附上其官网：

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主要还是因为一下原因

① 支持丰富

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

③ 引入和使用简单

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