vue实现代码块高亮显示

由于项目需求要显示高亮代码块，本来最初选择的是vue-codemirror插件，结果安装的时候由于是vue2，报错安装失败，好像vue3之后才能使用该插件，故决定使用highlight.js。

安装

npm install highlight.js --save

新建highlight.js文件，该文件一般是放在utils文件夹下，如图，这是我创建的位置

复制如下代码到highlight.js文件。

// highlight.js  代码高亮指令
import Vue from 'vue';
import Hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';let Highlight = {};
Highlight.install = function (Vue, options) {// 先有数据再绑定，调用highlightAVue.directive('highlightA', {inserted: function(el) {let blocks = el.querySelectorAll('pre code');for (let i = 0; i < blocks.length; i++) {const item = blocks[i];Hljs.highlightBlock(item);};}});// 先绑定，后面会有数据更新，调用highlightBVue.directive('highlightB', {componentUpdated: function(el) {let blocks = el.querySelectorAll('pre code');for (let i = 0; i < blocks.length; i++) {const item = blocks[i];Hljs.highlightBlock(item);};}});};export default Highlight;

其中第三行代码是引入代码高亮的样式，我引入的是atom-one-dark，可以去官网查看样式示例https://highlightjs.org/static/demo/，然后将样式名字复制替换我引入的atom-one-dark就行。

在main.js中引入指令，注意这个路径就是你上一步创建highlight.js文件的路径

// highlight.js代码高亮指令
import Highlight from '@/utils/highlight';Vue.use(Highlight)

在页面中使用指令

  <pre v-highlightA><code class="json">{{watch_data}}</code></pre>

pre标签中的v-highlightA和v-highlightB根据需求自己选择，对于code标签中的class，定义成自己数据需要格式，我的需求是显示json格式，所以就有class=“json”，然后进行数据的绑定。如图是我绑定的数据

最后界面展示出的高亮代码如图：

大功告成！

vue实现代码块高亮显示相关推荐

【经验】向word中插入格式化的代码块
参考博客:如何在word中插入代码块 1.打开http://www.planetb.ca/syntax-highlight-word网站语法高亮显示Word文档中的代码 2.将你的代码复制进去,选择 ...
Vs code 进行硬件设计实用插件-语法高亮、语法检查、自动例化、Testbench生成、对齐、代码块等
目录 1. ISE.Vivado编辑器设置 1.1 ISE 设置 1.2 Vivado 设置 2. 语法高亮.语法检查和自动例化 2.1 配置ctags 2.2 配置语法检查 2.3 自动例化 3. ...
博客网页代码块渲染-显示行号，一键复制，全屏显示，mac风格（基于mavon-editor或wangEditor）
效果预览亮点:mac风格代码块,一键复制,全屏浏览,点击按住文字空白区域可左右滑动(感觉有待优化),双击关闭全屏浏览...... 样式可自行优化前提条件(待渲染的代码块格式) <pre> ...
vue项目代码格式不统一怎么办？一招教你解决
vue项目代码风格统一问题背景方案分析 1.在package.json中增加prettier的依赖以及运行脚本 2.修改.eslintrc.js,去除所有vue-cli自动生成的规范,自定义插件及 ...
Code VBA完整代码块,创建Visual Basic源代码
Code VBA完整代码块,创建Visual Basic源代码 Code VBA是一个外接程序,其中包含一组Microsoft Office工具,旨在使开发人员更容易创建Visual Basic源代码 ...
LaTex实战笔记 4-插入 Python 程序代码块
LaTex插入 Python 程序代码块 1. 需求描述和解决方案 2. minted 包的安装与配置 2.1 安装 Python 第三方库 Pygments 2.2 下载和安装 minted 宏包 ...
VScode软件入门：用户自定义代码块+常用快捷键+常用扩展插件
目录 VScode软件入门 VScode用户自定义代码块用户自定义代码块 VScode快捷键 html文件快速创建html结构谷歌快捷键 vscode扩展插件 Auto Close Tag: Au ...
在网页中显示高亮的代码块
在VueCli项目中生成高亮且格式正确的代码块以"highlight.js": "^10.7.1"插件为例安装依赖:npm install highligh ...
Vue 前端代码风格指南、代码规范
目录一.命名规范 1.1 项目文件命名 1.2 Vue 组件命名 1.3 代码参数命名二.代码规范 2.1 Vue 主要针对vue2.x 2.2 HTML 2.3 CSS 2.4 JavaSc ...

vue实现代码块高亮显示

vue实现代码块高亮显示相关推荐

最新文章

热门文章