vue 中使用 highlight.js , 及代码高亮组件

已于 2022-05-18 17:56:31 修改
阅读量908 收藏
点赞数
分类专栏： vue 文章标签： vscode github vue.js
于 2022-05-18 14:37:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FYAN2001/article/details/124841883
版权
一个组件一个prop实现代码高亮

在编写组件文档或者博客时，经常有需要贴代码的地方，同时为了美观，通常想要其像vscode那样高亮显示代码。

如果是用 vuepress 等 vue-powered 生成的静态SSR 博客或者文档项目，将没有这部分的顾虑，markdown语法的编译会帮您做好一切的事情

但如果只是想给组件写一个说明文档，或者一个简单的github-page

可能会用到代码高亮

请添加图片描述

请添加图片描述

组件提供了

  • 明暗 两种风格

  • 复制选项

  • 滚动条样式优化

  • 等等

开箱即用，大小仅有27kb

快速开始的例子 stackblitz
Github 仓库地址

F-one-1/vue-highlight-code (github.com)

在Vue中使用highlight.js代码高亮
CodeWhizZ的博客
09-18 1233
代码高亮是在网页开发中常见的需求之一，它可以使代码在页面上以不同的颜色或样式进行突出显示，提高可读性。通过使用highlight.js库，我们可以在Vue项目中轻松地实现代码高亮的效果。然后，在需要高亮代码的组件中使用。在Vue项目中，我们可以通过在main.js文件中引入highlight.js来全局注册该库。现在，我们可以在Vue组件中使用highlight.js来实现代码高亮的效果。然后在浏览器中打开相应的地址，你将看到代码块中的JavaScript代码已经以高亮的方式显示出来。
代码高亮的可行性方案，highlight.js
FYAN2001的博客
05-23 1043
在博客或者文档中，通常会需要会需要高亮显示代码，这通常需要满足屏幕大，高刷(...bushi), 应该是配色好看，插件生态丰富。目前实现代码分割的主要是两个库PrismJS,highlight.js
vue高亮显示插件
04-06
使用sublime编写vue时，可以让vue.js代码高亮显示的插件，
um-note 可编辑的语法高亮vue3组件 highlight
UncleMao的博客
11-27 589
基于prismjs和vue3开发的可编辑的轻量级代码高亮(highlight)组件, 支持270+种语言, 8种代码高亮风格!
Vue Highlight.js：为你的Vue项目增添代码高亮魅力
最新发布
gitblog_00389的博客
09-11 629
Vue Highlight.js：为你的Vue项目增添代码高亮魅力 项目地址:https://gitcode.com/gh_mirrors/vu/vue-highlight.js 在现代Web开发中，代码高亮是一个不可或缺的功能，尤其是在技术博客、文档站点和代码演示中。Vue Highlight.js 是一个专为Vue.js设计的开源项目，它能够轻松地将代码高亮功能集成到你的Vue应用中，让你的代...
Vue3之集成Highlight.js代码语法亮显示插件
yuanjinshenglife的专栏
03-07 7091
Vue3之集成Highlight.js代码语法亮显示插件,如Java、sql、json、js等语法高亮显示
vue利用指令使用highlight.js
qq_190265950的博客
01-29 546
import Vue from ‘vue’ 使用highlight.js Vue.directive(‘highlight’, function(el) { let blocks = el.querySelectorAll(‘pre code’) blocks.forEach(block => { hljs.highlightBlock(block) }) }) 局部指令 directives: { highlight: { function(el) { let blocks = el.querySe
vue 使用 highlight.js 高亮代码块
一个懒惰前端的博客
08-08 2115
vue 使用 highlight.js 高亮代码块
vue使用showdown并实现代码区域高亮的示例代码
10-16
总的来说，这个示例详细解释了如何在Vue项目中结合使用`showdown`和`highlight.js`来实现Markdown到HTML的转换，并且对代码区域进行高亮处理。这将帮助开发者创建更加美观和易读的文档或博客页面。希望这个教程对你...
vue中使用highlight.js设置行号
08-06
### 回答1： 在 Vue 中使用 highlight.js 设置行号的方法如下： 1. 安装 highlight.js 和 v-highlight.js Vue 插件： ...通过这些步骤，你可以在Vue项目中方便地使用highlight.js插件并设置行号来高亮显示代码。
vue wangEditor使用highlight.js
09-16
首先，我们需要在Vue组件的`mounted`生命周期钩子中初始化highlight.js，可以使用`hljs.initHighlightingOnLoad()`进行初始化，这样会自动将页面中需要高亮的代码块进行渲染。 接下来，我们需要监听WangEditor的...
vue项目使用highlight.js 代码高亮插件,并给它添加行数
贵林之恋的博客
10-19 1776
/ main中引入语法高亮配置。，在main中引入即可使用，是我的目录 改成自己的;
vue使用highLight.js实现代码高亮
_小郑有点困了的博客
08-04 3472
vue使用highLight.js实现代码高亮 背景： 但是仅仅限于对代码进行高亮操作，意识到如果给到一片文章，里面有文本有代码有图片就需要进行正则匹配之类的处理这篇文章。。。 效果图： 安装引入： 为什么要安装两个依赖：vue-highlight.js只是实现了代码高亮的功能，他的包里没有css的样式文件，因此还需要安装一个highlight.js来实现真正的样式。 npm install --save vue-highlightjs npm install --save highlight.js
Vue之代码高亮组件
qq_42540089的博客
11-19 1151
Vue实现代码高亮
通过highlight.js在vue中实现代码高亮
dounine的博客
01-29 580
title: 通过highlight.js在vue中实现代码高亮 date: 2019-05-04 19:18:16 文章目录0. 前言1. 安装2. 封装成vue插件3. 全局引入自定义插件4. 使用 0. 前言 在 vue-cli3 项目中，通过highlight.js，实现页面中代码高亮。 请先了解highlight.js官网中的使用说明。 1. 安装 npm install highlight.js --save 2. 封装成vue插件 官方文档—自定义插件 官方文档—自定义指令 新建hig.
vue高亮显示组件--转载
kjl536566的博客
09-17 269
使用vs code 开发vue项目的时候，往往会通过一些插件来帮助我们高效的开发，针对vue代码的格式化和高亮显示有两个比较好的插件，一个是vetur（vue2）,另一个是volar（vue3）。最近由于换了新的主机，然后重新安装了一下vs code，因为开发的是vue3项目，自然而然的安装了一下volar插件，发现安装之后代码并没有高亮显示，重启编辑器依然不生效。查找资料发现在vs code的设置中有个配置可以影响代码的颜色高亮显示。注释之后保存，返回vue项目代码就可以看到代码高亮显示了。
在vue项目中使用Rainbow.js实现代码高亮展示
09-09
在Vue组件中，我们可以通过以下步骤来使用Rainbow.js进行代码高亮展示： 1. 在Vue组件的`mounted`生命周期钩子函数中，获取需要高亮展示的代码块的DOM节点。 2. 使用Rainbow.js提供的`highlight`函数，传入代码节点...
vue-prism-component:使用prism.js和vue组件突出显示代码
05-08
虚拟棱镜组件 安装 yarn add vue-prism-component CDN： | 用法 首先，您需要在应用程序中的某个位置加载Prism ： // yarn add prismjs import 'prismjs' import 'prismjs/themes/prism.css' 或者： < link ...
高亮组件 vue_Vue.js 2.0 单文件组件
weixin_31479991的博客
01-15 112
Vue.js2.0单文件组件介绍在很多Vue项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '})在每个页面内指定一个容器元素。这种方案在只是使用 JavaScript 增强某个视图的中小型项目中表现得很好。然而在更复杂的项目中，或者当你的前端完全采用 JavaScript 驱动的时候，以下弊端就显现出来：...
vuepress 代码高亮支持的语言
MeiBlog
07-28 1220
VuePress 使用了 Prism 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言,你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名 Markup - markup, html, xml, svg, mathml, ssml, atom, rss CSS - css C-like - clike JavaScript - javascript, js ABAP - abap ABNF - abnf ActionScript - actionscript Ada -
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值