实现 vue、react内部 页面源码展示 的高亮显示 之使用highlight.js

话不多说先上一个我各方收集资源参考 elment-ui实现的最终效果 
（此处以vue项目为例）

下面来说一下我实现的具体流程和实现中遇到的问题

1.vue项目

有现成的项目更好 没有的就自己搭一个吧 在这里 我就不过多赘述了 实在不会的 我也教！！！

1.创建脚手架工具 demo中
cnpm install vue-cli -g
vue list

1.建立vue项目（e:）
vue init webpack objname;(输入name)
2.启动vue项目
cd objname //跳转到项目内部
cnpm install //下载配置内容
npm run dev
3.部署
npm run build
4.安装路由
npm install vue-router --save
5.状态控制
npm install vuex --save
5.数据交互
npm install vue-resource
6.模仿后端数据json server
npm install json-server --save

使用yarn的自行解决

下面进入正题

首先是安装组件

highlight.js 在这里我解释一下  在实现这个效果的时候我找了很多类似的文档 实现方法 也有不少 当然我都没有找到理想的效果  可能是一些开发者对highlightjs 进行了一些封装处理  大家如果喜欢也可以去尝试 但出于安全考虑 大家最好使用原生或者 把开发者的代码 搞懂再用 接下来在vue中安装下列组件

npm install --save vue-highlightjs
npm install --save highlight.js

如果安装失败请尝试  cnpm 或者yarn（毕竟我不是一次成功的）

开始引入 并实现自己想要的效果

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

这个引用组件就不用了说了  中间的样式其实就是 代码展示的时候的一个风格问题 其中会根据不同的语言 不用风格进行展示

西面这是官网的风格 展示（反正我是不喜欢这款  看大家个人爱好吧）https://highlightjs.org/

其实官网提供了很多风格在组件 内部style文件夹里 大家可以任意选择 博主在这里推荐一个自己最喜欢

 

作为一个前端 开发的视觉 习惯 我还是比较喜欢这款vs 。。。

其实这款就已经不错  我原本就是想用这款 但是为了追求完美 。。。我自己特意去 elemen-ui 借鉴了一下人家的

这是我的实现代码 在这里 < 和> 都需要自己转义也不知道有没有其他的组件可以实现不需要转义的方法 有的话 麻烦大佬告知

小弟在此先谢过了

至此其实简单的展示效果基本已经出来了 但是往往有些人 在哪里都会遇到意外 请问是不是有些同学的效果是这样的

其实这个问题 我也遇到了哈哈  其实这是你 页面的文本样式影响的 text-align: initial; 其中有几个样式都可以实现预期效果 

如果想要我的CSS 自己去样式下载链接下载 毕竟是借鉴在这里公开不太好 。。。。 （最重要的是博主下东西也是需要积分的 啊）