vue3项目使用highlight.js插件实现了代码块

最新推荐文章于 2024-06-06 11:39:39 发布
最新推荐文章于 2024-06-06 11:39:39 发布
阅读量759 收藏
点赞数 17
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuang_nu/article/details/133990720
版权

使用vue的都知道官网的代码块效果:

下面是我们实现了这个功能:

使用highlight.js就可以实现

官网: highlight.js

下载插件后,在main.ts文件中引入:

在文件中:

引入hljs,在onMounted回调中使用,希望使用什么主题就引入什么主题的css,

创建topic和pre这两个需要的,

因为上面js已经获取了,

pre标签是必须

然后设置一下样式

最终结果:

fury_123
关注
  • 17
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3中使用prismjs或者highlight.js实现代码高亮
富朝阳的博客
01-05 4747
我们对显示行数做了扩展，css如下pre {important;important;top: 10px;left: 0;行数以及背景显示样式可以根据自己的需求自定义prismjs和highlight.js两个插件感觉都很不错，个人比较喜欢prismjs，当然萝卜青菜各有所爱，大家根据自己的爱好选择即可。用户体验度又上升啦！YYDS！欢迎在评论区交流。如果文章对你有所帮助，！博主会持续更新。。。。
vue3：基于highlight实现代码高亮、显示代码行数、添加复制功能
weixin_41897680的博客
05-27 1万+
vue3：基于highlight实现代码高亮、显示代码行数、添加复制功能
Vue3，使用MarkdownIt，heightLight.js，ClipboardJS 实现代码高亮加一键复制功能
最新发布
weixin_48819809的博客
06-06 474
在Vue组件中使用这个模块时，你需要在组件挂载后调用。，以确保复制按钮具备复制功能。
Highlight.js的行号插件可在每个代码块上自动显示行号。-JavaScript开发
05-26
Highlight.js的行号插件可在每个代码块上自动显示行号。 Highlight.js演示用法的行号插件
vue3 使用 highlight
qq_52179917的博客
11-11 680
【代码】vue3 使用 highlight。
vue3引入 highlight.js 进行代码高亮
热门推荐
圆圈圈的博客
11-23 1万+
背景描述： 在项目开发中，经常一些日志预览，还有文件的预览，需要进行代码高亮显示。这样可以让文本内容展示的时候显得更加友好，也便于阅读 效果类似markdown语法的代码高亮，如下： <TestPlan guiclass="TestPlanGui" testclass="TestPlan" testname="自动化测试"> <stringProp name="TestPlan.comments"></stringProp> <b
Vue3之集成Highlight.js代码语法亮显示插件
yuanjinshenglife的专栏
03-07 4399
Vue3之集成Highlight.js代码语法亮显示插件,如Java、sql、json、js等语法高亮显示
【vue3 中使用highlight.js实现代码高亮，开箱即用，非常方便】
YC2chen的博客
10-13 2436
使用highlight.js直接封装，复制即可使用。开箱即用
Highlight.js是一个用JavaScript写的代码高亮插件
08-12
Highlight.js是一个强大的JavaScript库，专门设计用于在网页上实现代码的语法高亮显示。这个插件的出现使得开发者能够轻松地为他们的代码片段添加美观且易于阅读的样式，提升用户对代码的理解和阅读体验。由于它不...
vue使用showdown并实现代码区域高亮的示例代码
10-16
总的来说，这个示例详细解释了如何在Vue项目中结合使用`showdown`和`highlight.js`来实现Markdown到HTML的转换，并且对代码区域进行高亮处理。这将帮助开发者创建更加美观和易读的文档或博客页面。希望这个教程对你...
前端项目-highlight.js.zip
09-02
"highlight.js" 是一个流行的语言高亮显示库，主要用于在网页上美化代码块的展示，支持多种编程语言和标记语言的语法高亮。 **描述解析：** 描述中提到"前端项目-highlight.js,使用语言自动检测突出显示语法"，这...
JS库 Highlightjs 添加代码行号的实现代码
10-19
Highlightjs 是一款广泛使用的JavaScript库，专门用于代码高亮显示，它可以为多种编程语言的代码块添加美观的语法样式。然而，Highlightjs 的默认功能并不包括显示代码行号。为了在使用Highlightjs时添加代码行号，...
Vue3+highlight.js实现代码高亮 + 行号
一步一个坑
02-13 2001
【代码】Vue3+highlight.js实现代码高亮 + 行号。
Vue3 造轮子之 Typescript 配置 highlight
Demi1024w的博客
08-16 1754
项目基础是实现一个简单的 UI 组件库。在编写组件介绍文档时，需要提供一些代码示例，这时候用到了来实现代码的高亮。
vue中显示代码块 vue-prism-editor
c_qianxia5040的博客
04-07 6732
实现效果： 可输入代码，并且代码语法高亮 支持编辑和不可编辑模式 提交到后端到代码内容为字符串格式 搜了很多资料，大都是复制粘贴，写的都一样，还有错的地方，所以整理出一个稍微比较完善的方便你我 ⭐⭐ 实现步骤：⭐⭐ 1、安装依赖 npm install vue-prism-editor vue-prism-editor需要依赖 prismjs，所以需要安装prismjs npm install prismjs 2、在需要使用vue-prism-editor的组件中引入 import { Pri
前端通过Vue-Code-Highlight插件让代码块高亮
weixin_48674314的博客
02-20 1983
前端通过Vue-Code-Highlight插件让代码块高亮
【代码编辑器记录一】vue项目中如何实现代码高亮效果+输入
hannah2233的博客
03-03 2381
1-1 代码高亮显示但不可以实现编辑输入vue-highlightjs 1-1-1 vue3 1-1-2 vue2 1-2 编辑输入高亮代码，进行格式规范code-mirror 1-2-1 展示 1-2-2 基本配置 1-2-3 使用
vue3使用highlightjs代码高亮器，简单明了附带效果图
qiuqiang748的博客
04-28 1986
需要安装两个依赖 npm install --save highlight.js npm install --save @highlightjs/vue-plugin 页面上单独引入插件，不要直接在main.ts全局引入 注意：因为插件不支持响应式数据，所以不要使用ref定义响应式变量 <template> <highlightjs autodetect :code="jsonCode" /> </template..
highlight.js（代码高亮插件）
小王的技术库
05-28 1万+
highlight.js（代码高亮插件） 官网 用法查看 核心 API Highlight.js 将一些函数导出为hljs对象的方法 强调 highlight(code, {language, ignoreIllegals}) 核心高亮功能。接受代码以突出显示（字符串）和选项列表（对象）。该language参数必须存在并指定用于突出显示的语法的语言名称或别名。这ignoreIllegals是一个可选参数，即使在检测到语言的非法语法而不是抛出异常的情况下，真正强制突出显示完成时也是如此。 返回具有以下
在vue项目中使用Rainbow.js实现代码高亮展示
09-09
在 Vue 项目中使用 Rainbow.js 实现代码高亮展示的步骤如下： 1. 安装 Rainbow.js：在命令行中运行 npm install rainbow-js --save 2. 在 main.js 中引入 Rainbow.js：import Rainbow from 'rainbow-js' 3. 在需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值