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。

相关文章

CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
springboot循环依赖问题案例代码及解决办法

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖（即BeanA依赖BeanB,而BeanB又依赖BeanA）,会导致Spring的... 目录1. 什么是循环依赖？2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1：使用 @La
阅读更多...
使用C#代码在PDF文档中添加、删除和替换图片

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当
阅读更多...
C#使用SQLite进行大数据量高效处理的代码示例

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入：从乌龟到猎豹的蜕变分页查询：加载百万数据异步处理：拒绝界面
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2