Vue使用highlightjs高亮显示代码

最新推荐文章于 2024-10-17 14:48:43 发布
最新推荐文章于 2024-10-17 14:48:43 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41835813/article/details/109320957
版权

官网：https://highlightjs.org/

首页可以点击查看主题

然后点击下载

 

目录结构

styles

在dist/static下放入css和js文件  css为选择主题  （agate）

 

在index.html里引入

 

在需要高亮显示的地方添加标签

 

效果：

 

Turing·
关注
专栏目录
Vue中如何实现代码高亮功能？
猿小白的博客
01-21 8753
目录 1、下载依赖 2、在main.js文件中导入包 3、同样是在main.js文件中自定义一个指令 4、在vue文件中使用指令 5、效果展示 1、下载依赖 npm install highlight.js --save 2、在main.js文件中导入包 //导入代码高亮文件 import hljs from 'highlight.js' //导入代码高亮样式 import 'highlight.js/styles/monokai-sublime.css' 3、同样是在mai..
Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
10-24 5239
Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)，具体步骤如下： (1) 安装依赖 // marked用于将markdown转换成html cnpm install marked -S // 用于代码高亮显示 cnpm install highlight.js -S // 代码行号显示插件 cnpm install highlightjs-line-numbers.js (2) 在main.js文件中引入highlight.js import highlight
vuehighlightjs一个基于highlightjs的2x代码语法高亮组件
08-09
vue-highlightjs 一个基于highlightjs的2.x代码语法高亮组件
通过highlight.js在vue中实现代码高亮
dounine的博客
01-29 573
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-Highlight.js 使用教程
gitblog_00870的博客
09-10 486
Vue-Highlight.js 使用教程 vue-highlight.js???? Highlight.js syntax highlighter component for Vue.项目地址:https://gitcode.com/gh_mirrors/vu/vue-highlight.js 1. 项目介绍 Vue-Highlight.js 是一个用于在 Vue.js 应用程序中集成代码高亮功能的...
Vue中通过highlight.js实现代码高亮
会飞的猫的博客
07-16 231
项目中，我们经常会有代码高亮的需求！那么，在Vue项目中，如实实现代码高亮功能呢？highlight.js是非常不错的选择。 原文链接
vue3 使用 highlight
qq_52179917的博客
11-11 758
【代码】vue3 使用 highlight。
Vue3之集成Highlight.js代码语法亮显示插件
yuanjinshenglife的专栏
03-07 6892
Vue3之集成Highlight.js代码语法亮显示插件,如Java、sql、json、js等语法高亮显示
在vue中使用highlight.js代码高亮
qq_42972625的博客
05-14 6659
在vue中使用highlight让代码实现高亮 highlight官网（查看配色）：https://highlightjs.org highlight查看api地址：https://highlightjs.readthedocs.io 刚开始我是在入口文件main.js里面引入依赖，然后定义了指令 这里我选的是tomorrow-night-eighties样式，文件里面还有其他样式可供选择,因为我的样式是基于scss，所以引入的是对应的scss样式，如果是css样式可以引入 import 'highl
js实现代码示例（高亮、行号和格式）
12-27
在JavaScript编程中，为了提高代码可读性和用户体验，我们经常需要对代码进行高亮显示、添加行号以及格式化处理。这些功能在开发在线编辑器、文档教程或代码分享平台时尤为重要。以下将详细介绍如何使用JavaScript...
在Vue中使用highlight.js代码高亮
CodeWhizZ的博客
09-18 1221
代码高亮是在网页开发中常见的需求之一，它可以使代码在页面上以不同的颜色或样式进行突出显示，提高可读性。通过使用highlight.js库，我们可以在Vue项目中轻松地实现代码高亮的效果。然后，在需要高亮代码的组件中使用。在Vue项目中，我们可以通过在main.js文件中引入highlight.js来全局注册该库。现在，我们可以在Vue组件中使用highlight.js来实现代码高亮的效果。然后在浏览器中打开相应的地址，你将看到代码块中的JavaScript代码已经以高亮的方式显示出来。
语法高亮插件vue-syntax-highlight
09-05
语法高亮插件vue-syntax-highlight，语法高亮插件vue-syntax-highlight，语法高亮插件vue-syntax-highlight
highlightjs-line-numbers.js:Highlight.js的行号插件
05-02
Highlightjs-line-numbers.js Highlight.js行号插件。 | 安装 凉亭 bower install highlightjs-line-numbers.js Npm npm install highlightjs-line-numbers.js 从CDN获取库 < script src =" //cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js " > </ script > < script src =" //cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js " > </
Vue Highlight.js：为你的Vue项目增添代码高亮魅力
gitblog_00389的博客
09-11 617
Vue Highlight.js：为你的Vue项目增添代码高亮魅力 vue-highlight.js ???? Highlight.js syntax highlighter component for Vue. 项目地址: https...
Vue用highlight.js使代码高亮显示
weixin_44409569的博客
05-28 3250
1、引入highlight.js npm install highlight.js 2、 在main.js中引入 // 引入 highlight.js 代码高亮工具 import hljs from "highlight.js"; // 使用样式，有多种样式可选 import "highlight.js/styles/github-gist.css"; // 增加自定义命令v-highlight Vue.directive("highlight", function(el) { let blo
vue 使用 highlight.js 高亮代码块
一个懒惰前端的博客
08-08 2088
vue 使用 highlight.js 高亮代码块
vue2 使用 highlight.js 实现代码高亮（一些使用上遇到的坑）
dreamimport的博客
06-27 528
2.封装成全局自定义指令 utils/highlight.js。4.在页面内使用index.vue。3.在main.js中引入。
vue中使用Highlight.js实现格式化代码显示
最新发布
stay hungry, stay foolish
10-17 691
vue中使用Highlight.js实现格式化代码显示
vue3中使用prismjs或者highlight.js实现代码高亮
富朝阳的博客
01-05 5691
我们对显示行数做了扩展，css如下pre {important;important;top: 10px;left: 0;行数以及背景显示样式可以根据自己的需求自定义prismjs和highlight.js两个插件感觉都很不错，个人比较喜欢prismjs，当然萝卜青菜各有所爱，大家根据自己的爱好选择即可。用户体验度又上升啦！YYDS！欢迎在评论区交流。如果文章对你有所帮助，！博主会持续更新。。。。
vue3 highlightjs怎么使用
10-09
Vue3 中使用 Highlight.js 可以给你的代码块添加语法高亮显示，让代码看起来更专业。首先，你需要安装 Highlight.js 和 Vue 的相关插件。以下是基本步骤： 1. **安装依赖**: - 使用 npm 或 yarn 安装 Highlight.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值