Vue3+vite使用 Highlight.js代码高亮实现网页显示代码

这里只展示了Vue中如何使用，如需要其他使用或者自定义高亮，请访问 Highlight.js官网

安装npm install highlight.js @highlightjs/vue-plugin

npm i @highlightjs/vue-plugin
npm install highlight.js

全局组件注册使用

这里为了方便，笔者使用全局注册组件使用，如果您只需要部分引用，则可以在组件中单独引用。
在main.ts中引入和注册全局组件

//引入依赖和语言
import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript"; //引入语言
hljs.registerLanguage("javascript", javascript);
import hljsVuePlugin from "@highlightjs/vue-plugin";
import "highlight.js/styles/stackoverflow-light.css";
import "highlight.js/lib/common";
const app = createApp(App);
app.component("hljsVuePlugin", hljsVuePlugin);//全局注册

在页面中直接使用。

  <highlightjs language="js" code="console.log('Hello World');" />

局部组件使用

局部组件单独引入使用，和正常的组件引用一样。

<template><highlightjslanguage="js"code="console.log('Hello World');"/>
</template><script>
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";export default {components: {highlightjs: hljsVuePlugin.component}
}
</script>

这样就可以了。截个图看个结果。

如果有问题，您可以随时联系我。

这样就可以正常使用了，文章不易，点个赞，
这样就可以正常使用了，文章不易，点个赞，
这样就可以正常使用了，文章不易，点个赞，

Vue3+vite使用 Highlight.js代码高亮实现网页代码显示相关推荐

JS获取整个HTML网页代码 - Android 集美软件园 - 博客频道 - CSDN.NET
JS获取整个HTML网页代码 - Android 集美软件园 - 博客频道 - CSDN.NET JS获取整个HTML网页代码分类: Android提高 2012-01-12 23:27 1974人 ...
highlight.js 语法高亮，让你的页面更美观~
在网页开发过程中,经常会用到代码的展示,而不同颜色的代码,可以让页面看起来更直观,也更美观. highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供 ...
【前端代码高亮】页面代码高亮展示之Highlight高亮组件应用详解，附多个主题效果
[写在前面]作为前端开发的基本上都有接触这个高亮组件,这个也是目前被大家誉为最全面,体验最好的,所以针对数据展示型高亮显示我是力推这个的,但是我个人还是觉得还有不完美的地方,比如说一边输入一边高亮就不 ...
highlight js 为博客增加代码着色
利用:marked 把 markdown 文本转换成 HTML. 利用:highlight.js 为代码添加相应 class. 然后用自己写的样式,添加颜色. 找了半天,想找一个 Vue 官方例子的颜 ...
html语言高亮代码,实现HTML网页代码高亮的几种选择
代码高亮可以说是程序员必备,无论是搭建模块,或者是产品的说明网站都是需要展示代码的,而代码的样式直接的影响了阅读效果,一个好的代码高亮插件将会有好的体验. Jekyll Jekyll 是一种通过模版和 ...
markdown java 代码高亮_MarkdownPad2使用代码高亮插件
MarkdownPad 2有插入代码块的功能,但样式却不尽人意,但又不想换个编辑器,找了挺多相关资料,最后在MarkdownPad 2集成prettify高亮插件. 如下相关资料: 你可以下载后引用, ...
linux vi代码高亮,linux Vi编辑器代码高亮设置及永久显示行号的方法
在linux中用vi编辑和修改文件配置中没有彩色显示文件的内容,特别一些关键字不能彩色显示,给我们配置服务过程中造成极大的不方便.[其实主要是vi本身不带颜色的,vim带颜色]下面给出一种解决的方法. ...
Eclipse设置代码高亮，设置代码样式
前言由于eclipse自身的文本框.代码颜色等不够好看,不够护眼等原因,于是自己摸索试着设置了下,最后成功设置代码颜色高亮,分享如下.(本文提供了两种方法,一是自己根据下列步骤自己尝试设置一遍,此法 ...
【代码高亮】解决代码高亮工具复制在word中左边留有空白
代码高亮网站有: http://word.wd1x.com/ https://highlightcode.com/ 下面那个网站对于python的高亮效果不是很好,上面那个网站可选择编程语言. 以第一 ...

Vue3+vite使用 Highlight.js代码高亮实现网页代码显示