Vue3之集成Highlight.js代码语法亮显示插件

2024-03-08 04:20
文章标签 javascript 代码 显示 语法 vue vue3 js 集成 插件 frontend highlight

本文主要是介绍Vue3之集成Highlight.js代码语法亮显示插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue3之集成Highlight.js代码语法亮显示插件

文章目录

  • Vue3之集成Highlight.js代码语法亮显示插件
  • 1.Vue3中集成说明
  • 2. 安装highlight.js与@highlightjs/vue-plugin
  • 3. Vue3集成与使用
    • 1. main.ts(或main.js)中导入highlight.js
    • 2. 各语言测试代码
    • 3. 高亮显示vue文件
    • 4. 显示效果
  • 4. Highlight.js-Vue插件详细说明
    • 1. 使用预构建的库
    • 2. 使用 ES6 模块/捆绑
    • 3. 在本地使用组件
    • 4.从源代码构建预构建库

1.Vue3中集成说明

vue中需要使用highlight.js必须借助highlightjs/vue-plugin 插件来完成

这个插件提供了一个用于Vue.js 3应用程序的组件：highlightjs

注意：vue3中highlightjs/vue-plugin的版本必须为2.x.x, 而1.x.x为vue2的适配版本

关于highlight.js说明请查看 JavaScript之Highlight.js语法高亮显示神器集成说明

2. 安装highlight.js与@highlightjs/vue-plugin

注意：highlight.js与 @highlightjs/vue-plugin必须都安装

pnpm install highlight.js
pnpm install @highlightjs/vue-plugin
# or
yarn add highlight.js
yarn add @highlightjs/vue-plugin
# or
npm install highlight.js
npm install @highlightjs/vue-plugin

3. Vue3集成与使用

1. main.ts(或main.js)中导入highlight.js

这里配置为按需引入语言

//引入依赖和语言
import 'highlight.js/styles/stackoverflow-light.css'
import hljs from "highlight.js/lib/core";
import hljsVuePlugin from "@highlightjs/vue-plugin";
//import "highlight.js/lib/common"; //单一加载
//按需引入语言
import javascript from "highlight.js/lib/languages/javascript";
import java from "highlight.js/lib/languages/java";
import sql from "highlight.js/lib/languages/sql";
import xml from "highlight.js/lib/languages/xml";
import html from "highlight.js/lib/languages/vbscript-html";
import json from "highlight.js/lib/languages/json";
import yaml from "highlight.js/lib/languages/json";
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("yaml", yaml);
hljs.registerLanguage("json", json);
hljs.registerLanguage("sql", sql);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("html", html);const app = createApp(App)
app.use(hljsVuePlugin).mount('#app')

2. 各语言测试代码

CodeHighlightData.ts内容如下

export const json: string = `{"type": "object","properties": {"name": {"type": "string"},"age": {"type": "number"},"address": {"type": "object"},"phoneNumbers": {"type": "array","items": {"type": "object","properties": {"type": {"type": "string"},"number": {"type": "string"}},"additionalProperties": false}}},"additionalProperties": false
}`export const js:string = `// Using require
const hljs = require('highlight.js/lib/core');// Load any languages you need
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
// Using ES6 import syntax
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';// Then register the languages you need
hljs.registerLanguage('javascript', javascript);`export const java:string = `package com.lab.standard.entity;import com.baomidou.mybatisplus.annotation.TableName;import java.io.Serializable;
import java.time.LocalDateTime;import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Getter;
import lombok.Setter;/*** <p>* 用户反馈* </p>** @author jinshengyuan* @since 2023-01-06*/
@Getter
@Setter
@TableName("std_user_feedback")
@ApiModel(value = "反馈对象", description = "标准-用户反馈")
public class StdUserFeedback implements Serializable {private static final long serialVersionUID = 1L;private String id;@ApiModelProperty(value = "用户ID")private String userId;@ApiModelProperty(value = "用户名")private String userName;@ApiModelProperty(value = "用户姓名")private String fullName;@ApiModelProperty(value = "反馈内容")private String remarks;@ApiModelProperty(value = "反馈时间")private LocalDateTime feedbackTime;
}
`
export const xml:string = `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.yuan.standard.mapper.StdUserFeedbackMapper"><select id="selectImageInfo" resultType="java.util.HashMap" parameterType="string">select * from v_sys_upload where bus_id=#{id} and is_del='0'</select><update id="deleteImageInfo">update v_sys_upload set is_del=1<where>id in<foreach  collection="ids" item="id" index="index"  open="(" close=")" separator=",">#{id}</foreach></where></update>
</mapper>
`export const yaml:string = `server:port: 8080servlet:context-path: /upload
spring:servlet:multipart:
#      设置最大文件max-file-size: 20MBmax-request-size: 1000MBapplication:name: yuan-upload-app`export const sql:string = ` SELECT * FROM USER WHERE ID = ?`

3. 高亮显示vue文件

CodeHighlight.vue内容如下

<template>语言：<el-select v-model="language" @change="languageChange" placeholder="Select" style="width: 240px"><el-optionv-for="item in languageOptions":key="item.value":label="item.label":value="item.value":disabled="item.disabled"/></el-select><div style="height: 100vh;width: 100vh;line-height: 30px;padding: 5px;"><!--<highlightjs language="sql" :code="code"></highlightjs>--><highlightjs :language="language" :code="code"></highlightjs></div>
</template><script setup lang="ts">
import {ref} from "vue";
import {js, json, java, sql, yaml,xml} from './CodeHighlightData.ts'//默认高亮JS代码
let code = ref(js)
let language = ref('javascript')
//语言选项
const languageOptions = [{value: 'javascript',label: 'js',},{value: 'java',label: 'Java'},{value: 'yaml',label: 'yaml',},{value: 'sql',label: 'sql',},{value: 'json',label: 'json',},{value: 'xml',label: 'xml',disabled: false,},{value: 'html',label: 'html',disabled: false,},
]/*** 语言改变事件处理函数* @param language*/
const languageChange = (language: string) => {if ('java' === language) {code.value = java} else if ('json' === language) {code.value = json} else if ('yaml' === language) {code.value = yaml} else if ('sql' === language) {code.value = sql} else if ('xml' === language) {code.value = xml} else {code.value = js}
}</script><style lang="scss" scoped></style>

4. 显示效果

在这里插入图片描述

4. Highlight.js-Vue插件详细说明

官网：highlightjs/vue-plugin: Highlight.js Vue Plugin (github.com)

此插件提供了一个组件，用于您的Vue.js 3 个应用程序：highlightjs

<div id="app"><!-- bind to a data property named `code` --><highlightjs autodetect :code="code" /><!-- or literal code works as well --><highlightjs language='javascript' code="var x = 5;" />
</div>

注意：有关版本 2 Vue.js支持，请参阅 GitHub 上的 1-stable 分支。版本 1.x.x 与 Vue.js v2 兼容;带有 Vue.js v3 的 2.x.x 版本。

1. 使用预构建的库

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script src="/path/to/highlight-vue.min.js"></script>

然后只需在 Vue 中注册插件：

const app = createApp(App)
app.use(hljsVuePlugin)

2. 使用 ES6 模块/捆绑

import 'highlight.js/styles/stackoverflow-light.css'
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import hljsVuePlugin from "@highlightjs/vue-plugin";hljs.registerLanguage('javascript', javascript);const app = createApp(App)
app.use(hljsVuePlugin)
app.mount('#app')

注意：插件在内部导入（但没有语言）。由于 ES6 模块的魔力，您可以将Highlight.js导入到任何地方来注册语言或配置库。Highlight.js的任何导入都引用库的同一单一实例，因此在任意位置配置库就是在任意位置配置它。highlight.js/lib/core

您也可以简单地一次加载所有“通用”语言（从 v11 开始）：

import 'highlight.js/styles/stackoverflow-light.css'
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";const app = createApp(App)
app.use(hljsVuePlugin)
app.mount('#app')

请注意，导入不会导入对象，因为它在内部注册通用语言，并且现代 Web 捆绑器（如）会优化未使用的导入名称。如果要自定义对象，可以像前面的示例一样导入它。highlight.js/lib/common``hljs``webpack``hljs

3. 在本地使用组件

<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>

4.从源代码构建预构建库

我们使用 rollup 来构建可分发组件。dist

npm run build

这篇关于Vue3之集成Highlight.js代码语法亮显示插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/785958。

相关文章

Java中调用数据库存储过程的示例代码

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示
阅读更多...
Visual Studio 2022 编译C++20代码的图文步骤

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性：
阅读更多...
在Spring Boot中集成RabbitMQ的实战记录

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者（Producer）配置1. 创建 Spr
阅读更多...
浏览器插件cursor实现自动注册、续杯的详细过程

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机
阅读更多...
如何在Spring Boot项目中集成MQTT协议

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅
阅读更多...
MySQL数据库的内嵌函数和联合查询实例代码

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面：本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN
阅读更多...
Java实现自定义table宽高的示例代码

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格（JTable）作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码
阅读更多...
Go语言代码格式化的技巧分享

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具：gofmt 与 go fmt（一）
阅读更多...
SpringBoot集成LiteFlow工作流引擎的完整指南

SpringBoot集成LiteFlow工作流引擎的完整指南

《SpringBoot集成LiteFlow工作流引擎的完整指南》LiteFlow作为一款国产轻量级规则引擎/流程引擎,以其零学习成本、高可扩展性和极致性能成为微服务架构下的理想选择,本文将详细讲解Sp... 目录一、LiteFlow核心优势二、SpringBoot集成实战三、高级特性应用1. 异步并行执行2
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2