vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比

首先需要下载codemirror组件,diff-match-patch组件

npm install codemirror
npm install diff-match-patch

当然啦,npm下载很是缓慢,换个国内镜像,淘宝的吧。果然,速度就嗖嗖的起来。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

cnpm install codemirror
cnpm install diff-match-patch

可在node_modules下看到其目录结构

codemirror_lgx211

核心代码如下,简练易懂,可以根据下面的自己在接着定制开发。

<template>
  <div>
    <!-- 操作按钮 --> 
    <el-button @click="handleAdd">代码编辑,高亮补全</el-button>
    <el-button @click="handleMerge">代码版本,差异对比</el-button>
      
    <!-- 代码编辑,高亮补全 对话框内容 -->  
    <el-dialog :title="title" :visible.sync="open">
  
vue2 导入使用vue-codemirror详解 vue使用vue-codemirror详解,包含语言配置、主题配置等。 阅读详情

相关推荐

vue项目中,在线编辑器vue-codemirror、ace、和monaco的使用及踩坑记录

vue2版本不支持最新的vue-codemirror,所以要下载固定的版本4.0.6,并且要搭配codemirror使用,codemirror也不建议使用6以上的版本。由于第一次使用代码编辑器插件,之前都没接触过,花了几天时间才做出来满意的,参考了好几个大佬的文章,大家有需要可以自行查找相关文章!在要展示codemirror的页面,导入以下文件,包括有语言文件JavaScript,主体样式eclipse,和代码折叠所需的文件fold/xxx。代码:参考的一个大佬的,但是文章被关掉了,大家可以自己去找找。

m0_71775808的博客 6867

vue codemirror 代码编辑器

一、npm安装 npm i codemirror 二、具体使用 1、依赖引入 import "codemirror/theme/ambiance.css"; //主题 import "codemirror/lib/codemirror.css"; import "codemirror/addon/hint/show-hint.css"; let CodeMirror = require("codemirror/lib/codemirror"); require("codemirr...

qq_42181155的博客 2584

OpenClaw Canvas:跨平台协同内容呈现的系统架构与实战

在分布式系统与实时协作应用中,状态同步与数据一致性是核心挑战,其背后依赖操作转换(OT)或冲突无关复制数据类型(CRDT)等协同算法原理。这些技术通过定义可序列化的操作指令和状态转换规则,确保了多端数据的最终一致性,为在线文档、低代码平台等场景提供了关键技术支撑。OpenClaw Canvas 正是基于这一理念,设计了一套与平台无关的中间描述语言(DSL),将HTML/CSS/JS内容转化为结构化协议,并通过同步层管理状态、实现实时协同。其三层架构——协议层、同步层与渲染层——共同解决了跨平台内容高效、准确

weixin_33722405的博客 407

vue(element)中代码高亮插件全面对比

monaco,微软的VSCode用的和其通用了很多核心模块,凭借成熟可靠的产品,用户交互逻辑最好,原生Visual Studio主题,代码差异对比效果也最好。出局主要是因为我看见打包会有个坑,ace部署失败主要原因是不支持webpack打包,ace在本地搭建完成后,会有一个小型的worker帮助我们对内容进行渲染,webpack打包之后就变成完完全全的静态资源了,动态渲染的效果也就没了,虽然按找官网的意思是可以支持的,但是某博主实践了很多方法,均以失败告终。编辑器提供代码提示,智能建议等功能。

m0_70960708的博客 175

UDS 诊断 - CommunicationControl(通信控制)(0x28)服务 诊断

字节参数名称字节值#1CommunicationControl(通信控制)请求SID0x28#2#3communicationType(通信类型)#4nodeIdentificationNumer(节点标识符)(高位字节)controlType 为 0x04 或 0x05 时,使用该参数#5nodeIdentificationNumer(节点标识符)(低位字节)controlType 为 0x04 或 0x05 时,使用该参数。

耳朵东金子千的博客 1820

别再只会按按钮了!用NanoStat开源项目学ESP32硬件设计:BOOT与自动下载电路的避坑指南

本文通过NanoStat开源项目深入解析ESP32硬件设计中BOOT与自动下载电路的关键技术。从启动机制、电路设计陷阱到三极管选型,提供了一套完整的避坑指南和优化方案,帮助开发者提升设计可靠性和烧录效率。特别适合中级开发者学习ESP32硬件设计的精髓。

weixin_30296405的博客 439

ArcGIS License Server点击启动没反应,许可管理器无法启动怎么办

4 当我们再打开ArcGIS License Server Administrator的时候。3 在【服务】中找到【ArcGIS License Manager】双击。无法启动ArcGIS License Server的情况。在使用ArcGIS的过程中,我们经常会遇到。专注GIS领域知识分享,交流行业软件技巧。欢迎关注,不定期分享GIS各种问题和技巧。1 右击我的电脑——【管理】服务状态——启动,确定即可。启动类型选择——自动。

GIS蒲公英的博客 2万+

DOTS 性能基石:为什么传统 Unity 代码难以满足现代游戏需求?(DOTS 系列教程 · 第1篇)

本文探讨了Unity游戏开发中的性能优化问题,指出性能问题不应在最后才考虑,而应贯穿整个开发过程。文章分析了性能问题的三大表现(渲染开销、物理模拟、游戏逻辑),并解释了依赖硬件升级的不可行性。重点剖析了传统Unity代码性能低下的六大根源:垃圾回收卡顿、编译器优化不足、多核利用不足、数据结构和代码缓存不友好、过度抽象等问题。最后指出Unity项目中常见的反模式,如主线程垄断、内存碎片化等,为后续学习DOTS高性能架构解决方案奠定基础。

分享知识,拥抱变化 151

UG\NX二次开发 使用UF_CURVE_create_ocf_feature函数创建“在面上偏置”特征

使用UF_CURVE_create_ocf_feature函数创建“在面上偏置”特征。

王牌飞行员_里海的博客 850

科研问答:医药类本科生(临床、中医、中药与护理)本科阶段是否需要开展科研学习?

医药类本科生(临床、中医、中药与护理)本科阶段是否需要开展科研学习?

MD Code 1507

Python爬虫实战:京东/淘宝商品价格与评论监控系统——从User-Agent伪装到编码陷阱的全面攻克

在电商数据驱动决策的今天,无论是个人消费者想抓住历史低价,还是市场分析师需要追踪竞品动态,抑或是算法交易员依赖实时价格信号,自动化的商品价格与评论监控系统都已成为不可或缺的工具。然而,电商平台的反爬虫策略日益严苛,字符编码的“暗坑”更是让初学者屡屡碰壁。本文将以京东(JD.com和淘宝(Taobao.com两大主流平台为目标,手把手带你构建一个稳定、高效的商品监控爬虫。User-Agent伪装——如何模拟真实浏览器行为,突破初级反爬。GBK/UTF-8编码混战。

2201_76125261的博客 75

Python实现FFT、小波变换和数据压缩

小波变换是一种分析信号的方法,可以分解信号成为多个尺度和频率的分量,从而更好地理解和处理信号。在Python中,我们可以使用pywt库来实现小波变换。在Python中,我们可以使用numpy库中的fft模块来实现FFT。数据压缩是一种将数据表示成更紧凑的形式的方法,可以减少存储空间和传输带宽。综上所述,Python提供了很多方便的工具来实现各种信号处理和数据压缩的方法。本文将介绍Python中如何实现傅里叶变换(FFT)、小波变换以及如何使用它们来进行数据压缩。Python实现FFT、小波变换和数据压缩。

学习使你进步。 692

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

上一篇: vue(element)中使用monaco实现代码高亮
下一篇: vue(element)中代码高亮插件全面对比
m0_70960708
博客等级 码龄4年 884粉丝 611原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值