JS生成可自定义语法高亮HTML^code

cnblogs @ Orcim 　　

!deprecated!

这里有更好的方案，具体看我的这篇博客博客代码高亮的另一种思路

这篇文章介绍了如何在博客里插入一段 pretty 代码框的方法（以博客园为例），主要是因为实在是受不了博客园以及其他一些博客自带代码框的样子了w~

这篇文章很长很长，你可以直接点击这里，直接跳到源代码处，复制代码，或者滑到文章最底部查看使用方法。

原理是利用 VSCode 的 Copy With Syntax Highlighting 这个自带的功能，其实很多 IDE 都具有此类功能：

Ctrl + 逗号，打开设置，搜索找到上图中的选项就可以开启高亮语法复制为 HTML 代码的这个功能了，当然现在直接粘贴并不能直接获取到剪切板内 TEXT 文本，也无法获取带高亮样式的内 HTML 文本。

其实是可以获取剪切板的 HTML 文本的，js 提供了一个 onpaste 事件，可以在函数事件的 event 参数中获取到剪切板的内容了。

event.clipboardData.getData( Format: String )

如果要获取剪切板的纯文本，String 为 “text/plan”，如果是 HTML 文本，String 为 “text/html”：

CODE01.js

12345

document.onpaste = function (e){

var cb_data = e.clipboardData.getData("text\/html");

// var cb_data = e.clipboardData.getData("text\/plain");

console.log(cb_data);

}

然后，在 IDE 里面复制一段高亮显示着的代码，浏览器里面 Ctrl + V，控制台会 log 出来一堆东西：

为方便查看把这串从 VSCode剪切板里面得到的内容 Prettify 一下，其实很有规律：

CODE02.html

12345678910111213141516171819

<div>

<span style="color: #9cdcfe;">document</span>

<span style="color: #dcdcaa;">onpaste</span>

<span style="color: #569cd6;">function</span>

</div>

<div>

........

</div>

可能你也发现了规律了吧，其实这就是大多数 IDE 的语法高亮显示功能的原理，整个编辑器就相当于浏览器的窗口，窗口中每段文字都被特定样式的标签包裹起来……每行一个 div 又包裹很多 span 的行内元素，就这样一行一行堆砌，然后就实现了这个功能。

得到的这些 HTML 文本基本上就可以复制到各大博客的编辑器来用了，但是我们除了去设置整个编辑器的样式这个方法之外，没有其他更简便的办法去改变高亮的样式了，而且如果剪切板中 HTML 标签内为制表符或者是一些空白字符的话，编辑器通常会将其忽略，就没有代码缩进显示，比如我在博客园的编辑器中直接复制 CODE02 的代码到 HTML 编辑文本域里面，代码的缩进全部都没有了，于是就想到对这些剪切板里面的内容处理一下，可以灵活输出自己想要展示 Code 的 HTML。

于是花了一天的时间，从最初的 HTML模板布局到整个功能的实现，以及 JS 代码修改，最后完善了整个程序。直接给大家看 demo，其实前面的代码框就是演示……，上面的两个代码展示框就是 JS 生成的（普通的字符串的处理），加入了行数标识以及标题标识功能，之后还添加了一个 light 主题，两者样式兼容移动端：

theme.js

12345678910111213141516

var themes = {

"dark": {

c_title_bg: "#252525",

c_title_fg: "#ededed",

c_editor_bg: "#1e1e1e",

c_sideNum_bg: "#1e1e1e",

c_sideNum_fg: "#727272"

"light": {

c_title_bg: "#dcdcdc",

c_title_fg: "#999",

c_editor_bg: "#f5f5f5",

c_sideNum_bg: "#e5e5e5",

c_sideNum_fg: "#999"

}

};

这里就不卖关子了，直接贴代码吧，里面有注释。

-（紧凑的分割线）-

源代码

HTML 代码，便于最后的自定义样式的代码框输出

copyAsHTML.html

12345678910111213141516171819202122232425262728293031323334353637

<!DOCTYPE html>

<head>

<title>CopyAsHtmlFromVScode</title>

</head>

<body>

<!--

生成的代码框左上角用于标识文件类型的圆，颜色集合变量名：stampColors

html -> 红

css -> 蓝

js -> 黄

txt -> 黑灰

-->

</div>

</div>

</div>

</div>

</body>

</html>

JS 代码，直接复制放在 body 标签后的 script 标签里面，这里分开展示是为了方便排版和阅读~

copyAsHTML.js

var themes = { // 主题，自己定义了两种，可以自己加~

"dark": {

c_title_bg: "#252525", // 标题栏背景色

c_title_fg: "#ededed", // 前景色（文字颜色）

c_editor_bg: "#1e1e1e", // 代码区背景

c_sideNum_bg: "#1e1e1e", // 行数栏背景

c_sideNum_fg: "#727272" // 前景色

"light": {

c_title_bg: "#dcdcdc",

c_title_fg: "#999",

c_editor_bg: "#f5f5f5",

c_sideNum_bg: "#e5e5e5",

c_sideNum_fg: "#999"

}

};

var config = { // 调整基本样式

"theme": "dark", // 主题名

"fontFamily": '"Meslo LG L DZ", "monospace"',

"lineHeight": "25px",

"fontSize": "15px",

"fileName": "copyAsHTML.js", // 标题名称

"stampColor": "" // 留空会根据文件拓展名设置圆点的颜色

};

document.onpaste = function(e){

format(); // 初始化代码外框模板

var cb_str = e.clipboardData.getData('text\/html'); // 获取从 VSCode 里面复制的含 html 标签的代码

var tmpDiv = document.createElement("div");

tmpDiv.innerHTML = cb_str;

var containerBox = tmpDiv.children[0];

var arrLineDiv = containerBox.children;

var HollowArr = [];

for(var i=0; i<arrLineDiv.length; i++){

var arrLineSpanChar = arrLineDiv[i].children;

var tmp_arrLine = [];

for(var j=0; j<arrLineSpanChar.length; j++){

var arrEmpty = [];

arrEmpty[0] = arrLineSpanChar[j].style.color;

// 空格替换为 HTML 转义符

arrEmpty[1] = arrLineSpanChar[j].innerHTML.replace(/ /g, " ");

tmp_arrLine.push(arrEmpty);

}

HollowArr.push(tmp_arrLine);

}

var _containerBox = document.getElementById("_containerBox");

var _sideNums = document.getElementById("vsSide");

for(var l=0; l<HollowArr.length; l++){

_containerBox.append(returnLine(HollowArr[l]));

var tmpSpan = returnSpan("", l+1);

tmpSpan.style = "display: block; width: 40px; text-align: right; padding-right: 10px; float: left; font-size: 14px; height: " + config.lineHeight;

_sideNums.append(tmpSpan);

}

var g_Span = _sideNums.querySelectorAll("span");

if(_sideNums.innerHTML) g_Span[g_Span.length - 1].style.borderBottomRightRadius = "4px";

// 最终结果在浏览器控制台处输出查看

console.log(document.getElementById("codePart").innerHTML);

function returnLine(array){

var oDiv = document.createElement("div");

oDiv.style = "height: " + config.lineHeight + "; line-height: " + config.lineHeight + "; font-size: " + config.fontSize + ";";

for(var k=0; k<array.length; k++){

tspan = returnSpan(array[k][0], array[k][1]);

tspan.style.lineHeight = "100%";

oDiv.append(tspan);

}

var groupSpan = oDiv.querySelectorAll("span");

if(oDiv.innerHTML) groupSpan[groupSpan.length - 1].style.paddingRight = "20px";

return oDiv;

}

function returnSpan(cr, ct){

var oSpan = document.createElement("span");

oSpan.innerHTML = ct;

if(!cr) return oSpan;

oSpan.style.color = cr;

return oSpan;

}

function format(){

var stampColors = { // 左上角圆点颜色主题集合

"html": "#d13239",

"css": "#4286f4",

"js": "#fbb507",

"txt": "#303030",

}

var oCodeBox = document.getElementById("codeBox");

var oBanner = document.getElementById("banner");

var bannerStamp = document.getElementById("bannerStamp");

var bannerTitle = document.getElementById("bannerTitle");

var oVsSide = document.getElementById("vsSide");

var oOuter = document.getElementById("containerOuter");

var theStampColor = config.stampColor;

var configTheme = config.theme;

if(!config.stampColor) theStampColor = stampColors[config.fileName.split(".").pop()];

oCodeBox.style.fontFamily = config.fontFamily;

oCodeBox.style.lineHeight = config.lineHeight;

bannerTitle.innerText = config.fileName;

bannerStamp.querySelector("span").style.backgroundColor = theStampColor;

oBanner.style.backgroundColor = themes[configTheme].c_title_bg;

bannerTitle.style.color = themes[configTheme].c_title_fg;

oOuter.style.backgroundColor = themes[configTheme].c_editor_bg;

oVsSide.style.backgroundColor = themes[configTheme].c_sideNum_bg;

oVsSide.style.color = themes[configTheme].c_sideNum_fg;

}

使用方法

在 copyAsHTML.html 中引入 copyAsHTML.js
打开 VSCode，并在设置中确保已勾选控制在复制时是否同时复制语法高亮选项
Ctrl + C 复制一段编辑器的代码
Chrome 打开 copyAsHTML.html，页面空白区 Ctrl + V 粘贴
F12 打开控制台，Copy 输出的所有内容
粘贴 HTML 代码到 HTML 编辑器中，即可

Advance

添加复制功能和展开/收起功能：

advancedHighLight.html

COPY EXPAND

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208

<!DOCTYPE html>

<head>

<title>CopyAsHtmlFromVScode</title>

<style>

</style>

</head>

<body>

</div>

</div>

<span class="expandBtn" style="display: block; background: rgba(255, 0, 0, .65); color: #f5f5f5; font-family: sans-serif; padding: 0 5px; margin-right: 10px;">EXPAND</span>

</div>

</div>

</div>

</div>

</body>

</html>

var themes = { // 主题，自己定义了两种，可以自己加~

"dark": {

c_title_bg: "#252525", // 标题栏背景色

c_title_fg: "#ededed", // 前景色（文字颜色）

c_editor_bg: "#1e1e1e", // 代码区背景

c_sideNum_bg: "#1e1e1e", // 行数栏背景

c_sideNum_fg: "#727272" // 前景色

"light": {

c_title_bg: "#dcdcdc",

c_title_fg: "#999",

c_editor_bg: "#f5f5f5",

c_sideNum_bg: "#e5e5e5",

c_sideNum_fg: "#999"

}

};

var config = { // 调整基本样式

"theme": "dark", // 主题名

"fontFamily": '"Meslo LG L DZ", "monospace"',

"lineHeight": "25px",

"fontSize": "15px",

"fileName": "advancedHighLight.html", // 标题名称

"stampColor": "", // 留空会根据文件拓展名设置圆点的颜色

"maxHeight": 400, // 限制高度,px

"highLight": [true, "#569cd6"]

};

/* 兼容 IE, getComputedStyle */

if (!window.getComputedStyle) {

window.getComputedStyle = function(el, pseudo) {

this.el = el;

this.getPropertyValue = function(prop) {

var re = /(\-([a-z]){1})/g;

if (prop == 'float') prop = 'styleFloat';

if (re.test(prop)) {

prop = prop.replace(re, function () {

return arguments[2].toUpperCase();

});

}

return el.currentStyle[prop] ? el.currentStyle[prop] : null;

}

return this;

}

};

document.onpaste = function(e){

format(); // 初始化代码外框模板

var cb_str = e.clipboardData.getData('text\/html') || e.clipboardData.getData('text\/plain'); // 获取从 VSCode 里面复制的含 html 标签的代码

console.log(cb_str)

var tmpDiv = document.createElement("div");

tmpDiv.innerHTML = cb_str;

var containerBox = tmpDiv.children[0];

var arrLineDiv = containerBox.children;

var HollowArr = [];

for(var i=0; i<arrLineDiv.length; i++){

var arrLineSpanChar = arrLineDiv[i].children;

var tmp_arrLine = [];

for(var j=0; j<arrLineSpanChar.length; j++){

var arrEmpty = [];

arrEmpty[0] = arrLineSpanChar[j].style.color;

// 空格替换为 HTML 转义符

arrEmpty[1] = arrLineSpanChar[j].innerHTML.replace(/ /g, " ");

tmp_arrLine.push(arrEmpty);

}

HollowArr.push(tmp_arrLine);

}

var _containerBox = document.getElementById("_containerBox");

var stamp = new Date().getTime();

_containerBox.id = "d" + stamp;

document.querySelector("[data-clipboard-target]").dataset.clipboardTarget = "#d" + stamp;

var _sideNums = document.getElementById("vsSide");

for(var l=0; l<HollowArr.length; l++){

_containerBox.append(returnLine(HollowArr[l]));

var tmpSpan = returnSpan("", l+1);

tmpSpan.style = "display: block; width: 40px; text-align: right; padding-right: 10px; float: left; font-size: 14px; height: " + config.lineHeight;

_sideNums.append(tmpSpan);

}

var g_Span = _sideNums.querySelectorAll("span");

if(_sideNums.innerHTML) g_Span[g_Span.length - 1].style.borderBottomRightRadius = "4px";

var cb = document.getElementById("codeBox");

var codeHeight = parseFloat(window.getComputedStyle(codeBox, "").getPropertyValue("height"));

console.log(codeHeight)

var expandBtn = document.querySelector(".expandBtn");

var tog = {

"expand": function(){

document.getElementById("banner").style.borderTopRightRadius = "8px";

// cb.style.maxHeight = codeHeight + "px";

cb.style.overflow = "auto";

return "SHRINK";

"shrink": function(){

document.getElementById("banner").style.borderTopRightRadius = 0;

// cb.style.maxHeight = config.maxHeight + "px";

cb.style.overflow = "auto";

return "EXPAND";

}

};

if(codeHeight > config.maxHeight){

expandBtn.style.display = "block";

tog["shrink"]();

expandBtn.onclick = function(){

var lbl = this.innerHTML;

this.innerHTML = (lbl === "EXPAND" ? tog["expand"]() : tog["shrink"]());

}

}else{

expandBtn.style.display = "none";

}

// 最终结果在看控制台处输出查看

console.log(document.getElementById("codePart").innerHTML);

function returnLine(array){

var oDiv = document.createElement("div");

var bFill = config.highLight[0];

oDiv.style = "height: " + config.lineHeight + "; line-height: " + config.lineHeight + "; font-size: " + config.fontSize + ";";

if(!bFill) oDiv.style.color = config.highLight[1];

for(var k=0; k<array.length; k++){

tspan = returnSpan(array[k][0], array[k][1], bFill);

tspan.style.lineHeight = "100%";

oDiv.append(tspan);

}

var groupSpan = oDiv.querySelectorAll("span");

if(oDiv.innerHTML) groupSpan[groupSpan.length - 1].style.paddingRight = "20px";

return oDiv;

}

function returnSpan(cr, ct, fill = true){

var oSpan = document.createElement("span");

oSpan.innerHTML = ct;

if(!cr) return oSpan;

if(fill) oSpan.style.color = cr;

return oSpan;

}

function format(){

var stampColors = { // 左上角圆点颜色主题集合

"html": "#d13239",

"css": "#4286f4",

"js": "#fbb507",

"txt": "#373a41",

"plist": "#8bc34a"

}

var oCodeBox = document.getElementById("codeBox");

var oBanner = document.getElementById("banner");

var bannerStamp = document.getElementById("bannerStamp");

var bannerTitle = document.getElementById("bannerTitle");

var oVsSide = document.getElementById("vsSide");

var oOuter = document.getElementById("containerOuter");

var theStampColor = config.stampColor;

var configTheme = config.theme;

if(config.maxHeight){

oCodeBox.dataset.maxHeight = config.maxHeight;

};

if(!config.stampColor) theStampColor = stampColors[config.fileName.split(".").pop()];

oCodeBox.style.fontFamily = config.fontFamily;

oCodeBox.style.lineHeight = config.lineHeight;

bannerTitle.innerText = config.fileName;

bannerStamp.querySelector("span").style.backgroundColor = theStampColor;

oBanner.style.backgroundColor = themes[configTheme].c_title_bg;

bannerTitle.style.color = themes[configTheme].c_title_fg;

oOuter.style.backgroundColor = themes[configTheme].c_editor_bg;

oVsSide.style.backgroundColor = themes[configTheme].c_sideNum_bg;

oVsSide.style.color = themes[configTheme].c_sideNum_fg;

}

new ClipboardJS('[data-clipboard-target]');

</script>

Advance Ver2.0

增加代码框盒子bottom处的复制按钮和展开/收起按钮。

advancedHighLight_ver_2_0.html

COPY EXPAND

<!DOCTYPE html>

<head>

<title>CopyAsHtmlFromVScode</title>

<style>

</style>

</head>

<body>

</div>

</div>

<span class="expandBtn" style="display: block; background: rgba(255, 0, 0, .65); color: #f5f5f5; font-family: sans-serif; padding: 0 5px; margin-right: 10px;">EXPAND</span>

</div>

</div>

</div>

<span class="expandBtn" style="display: block; background: rgba(255, 0, 0, .65); color: #f5f5f5; font-family: sans-serif; padding: 0 5px; margin-right: 10px;">EXPAND</span>

</div>

</div>

</body>

</html>

var themes = { // 主题，自己定义了两种，可以自己加~

"dark": {

c_title_bg: "#252525", // 标题栏背景色

c_title_fg: "#ededed", // 前景色（文字颜色）

c_editor_bg: "#1e1e1e", // 代码区背景

c_sideNum_bg: "#1e1e1e", // 行数栏背景

c_sideNum_fg: "#727272" // 前景色

"light": {

c_title_bg: "#dcdcdc",

c_title_fg: "#999",

c_editor_bg: "#f5f5f5",

c_sideNum_bg: "#e5e5e5",

c_sideNum_fg: "#999"

}

};

var config = { // 调整基本样式

"theme": "dark", // 主题名

"fontFamily": '"Meslo LG L DZ", "monospace"',

"lineHeight": "25px",

"fontSize": "15px",

"fileName": "advancedHighLight_ver_2_0.html", // 标题名称

"stampColor": "", // 留空会根据文件拓展名设置圆点的颜色

"maxHeight": 400, // 限制高度,px

"highLight": [true, "#569cd6"]

};

/* 兼容 IE, getComputedStyle */

if (!window.getComputedStyle) {

window.getComputedStyle = function(el, pseudo) {

this.el = el;

this.getPropertyValue = function(prop) {

var re = /(\-([a-z]){1})/g;

if (prop == 'float') prop = 'styleFloat';

if (re.test(prop)) {

prop = prop.replace(re, function () {

return arguments[2].toUpperCase();

});

}

return el.currentStyle[prop] ? el.currentStyle[prop] : null;

}

return this;

}

};

document.onpaste = function(e){

format(); // 初始化代码外框模板

var cb_str = e.clipboardData.getData('text\/html') || e.clipboardData.getData('text\/plain'); // 获取从 VSCode 里面复制的含 html 标签的代码

console.log(cb_str)

var tmpDiv = document.createElement("div");

tmpDiv.innerHTML = cb_str;

var containerBox = tmpDiv.children[0];

var arrLineDiv = containerBox.children;

var HollowArr = [];

for(var i=0; i<arrLineDiv.length; i++){

var arrLineSpanChar = arrLineDiv[i].children;

var tmp_arrLine = [];

for(var j=0; j<arrLineSpanChar.length; j++){

var arrEmpty = [];

arrEmpty[0] = arrLineSpanChar[j].style.color;

// 空格替换为 HTML 转义符

arrEmpty[1] = arrLineSpanChar[j].innerHTML.replace(/ /g, " ");

tmp_arrLine.push(arrEmpty);

}

HollowArr.push(tmp_arrLine);

}

var _containerBox = document.getElementById("_containerBox");

var stamp = new Date().getTime();

_containerBox.id = "d" + stamp;

var clipBoard_tars = document.querySelectorAll("[data-clipboard-target]");

for(var c=0; c<clipBoard_tars.length; c++) clipBoard_tars[c].dataset.clipboardTarget = "#d" + stamp;

var _sideNums = document.getElementById("vsSide");

for(var l=0; l<HollowArr.length; l++){

_containerBox.append(returnLine(HollowArr[l]));

var tmpSpan = returnSpan("", l+1);

tmpSpan.style = "display: block; width: 40px; text-align: right; padding-right: 10px; float: left; font-size: 14px; height: " + config.lineHeight;

_sideNums.append(tmpSpan);

}

var g_Span = _sideNums.querySelectorAll("span");

if(_sideNums.innerHTML) g_Span[g_Span.length - 1].style.borderBottomRightRadius = "4px";

var cb = document.getElementById("codeBox");

var codeHeight = parseFloat(window.getComputedStyle(codeBox, "").getPropertyValue("height"));

console.log(codeHeight)

var expandBtn = document.querySelector(".expandBtn");

var tog = {

"expand": function(){

document.getElementById("banner").style.borderTopRightRadius = "8px";

// cb.style.maxHeight = codeHeight + "px";

cb.style.overflow = "auto";

return "SHRINK";

"shrink": function(){

document.getElementById("banner").style.borderTopRightRadius = 0;

// cb.style.maxHeight = config.maxHeight + "px";

cb.style.overflow = "auto";

return "EXPAND";

}

};

if(codeHeight > config.maxHeight){

expandBtn.style.display = "block";

tog["shrink"]();

expandBtn.onclick = function(){

var lbl = this.innerHTML;

this.innerHTML = (lbl === "EXPAND" ? tog["expand"]() : tog["shrink"]());

}

}else{

expandBtn.style.display = "none";

}

// 最终结果在看控制台处输出查看

console.log(document.getElementById("codePart").innerHTML);

function returnLine(array){

var oDiv = document.createElement("div");

var bFill = config.highLight[0];

oDiv.style = "height: " + config.lineHeight + "; line-height: " + config.lineHeight + "; font-size: " + config.fontSize + ";";

if(!bFill) oDiv.style.color = config.highLight[1];

for(var k=0; k<array.length; k++){

tspan = returnSpan(array[k][0], array[k][1], bFill);

tspan.style.lineHeight = "100%";

oDiv.append(tspan);

}

var groupSpan = oDiv.querySelectorAll("span");

if(oDiv.innerHTML) groupSpan[groupSpan.length - 1].style.paddingRight = "20px";

return oDiv;

}

function returnSpan(cr, ct, fill = true){

var oSpan = document.createElement("span");

oSpan.innerHTML = ct;

if(!cr) return oSpan;

if(fill) oSpan.style.color = cr;

return oSpan;

}

function format(){

var stampColors = { // 左上角圆点颜色主题集合

"html": "#d13239",

"css": "#4286f4",

"js": "#fbb507",

"txt": "#373a41",

"plist": "#8bc34a"

}

var oCodeBox = document.getElementById("codeBox");

var oBanner = document.getElementById("banner");

var bannerStamp = document.getElementById("bannerStamp");

var bannerTitle = document.getElementById("bannerTitle");

var oVsSide = document.getElementById("vsSide");

var oOuter = document.getElementById("containerOuter");

var theStampColor = config.stampColor;

var configTheme = config.theme;

if(config.maxHeight){

oCodeBox.dataset.maxHeight = config.maxHeight;

};

if(!config.stampColor) theStampColor = stampColors[config.fileName.split(".").pop()];

oCodeBox.style.fontFamily = config.fontFamily;

oCodeBox.style.lineHeight = config.lineHeight;

bannerTitle.innerText = config.fileName;

bannerStamp.querySelector("span").style.backgroundColor = theStampColor;

oBanner.style.backgroundColor = themes[configTheme].c_title_bg;

bannerTitle.style.color = themes[configTheme].c_title_fg;

oOuter.style.backgroundColor = themes[configTheme].c_editor_bg;

oVsSide.style.backgroundColor = themes[configTheme].c_sideNum_bg;

oVsSide.style.color = themes[configTheme].c_sideNum_fg;

}

new ClipboardJS('[data-clipboard-target]');

</script>

COPY EXPAND

Copy As HTML From VSCode的更多相关文章

编写一个Open Live Writer的VSCode代码插件
起因又是一年多没有更新过博客了,最近用Arduino做了一点有意思的东西,准备写一篇博客.打开尘封许久的博客园,发现因为Windows Live Writer停止更新,博客园推荐的客户端变为了Ope ...
HEC-ResSim原文档
HEC-ResSim Reservoir System Simulation User's Manual Version 3.1 May 201 ...
shift Alt + up(down) copy current line ! ctrl + j show the control # vscode key
shift Alt + up(down) copy current line ! ctrl + j show the control # vscode key
vscode restclient 插件
使用步骤: 1.vscode 安装restclient 扩展 2.创建 .http 或 .rest 文件 ,编写相应内容同一个文件内可以通过 ### 分割多个请求可以通过 @hostname ...
vscode之常用快捷键
原文章地址: vscode: Visual Studio Code 常用快捷键官方快捷键说明:Key Bindings for Visual Studio Code 主命令框 F1 或 Ctrl+S ...
vscode c++ cmake template project
VSCode configure C++ dev environment claim use CMake to build the project. For debugging, VSCode's C ...
vscode 集成 cygwin 的注意事项
vscode 集成 cygwin vscode 现在是我的主力开发编辑器,它自带 terminal 不需要我各种切换,我还想要在 windows 下执行一些简单的 .sh 文件.所以,我希望有一款工具 ...
win10 添加项目右键用vscode打开
1.新建reg文件:在vscode安装目录下新建一个文本文件,然后将文件后缀改为:*.reg,文件名任意,例如:vsCodeOpenFolder.reg. 2.编写文本文件内容.将下面的内容Copy到 ...
使用VSCode调试单个PHP文件
突然发现是可以使用 VSCode 调试单个 PHP 文件的,今天之前一直没有弄成功,还以为 VSCode 是不能调试单文件呢.这里记录一下今天这个"突然发现"的过程. 开始,是在看 ...

随机推荐

力扣Leetcode 11. 盛最多水的容器
盛最多水的容器给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找 ...
Android开发之recycleView详解代码，看完包你熟练掌握recycleView的用法。转自网络经典文章
来源 http://jinyudong.com/2014/11/13/Introduce-RecyclerView-%E4%B8%80/ 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在 ...
Springboot整合Spring Cloud Kubernetes读取ConfigMap，支持自动刷新配置
1 前言欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! Docker & Kubernetes相关文章:容器技术之前介绍了Spring Cloud Config的用法,但 ...
ios 常见性能优化
1. 用ARC管理内存 2. 在正确的地方使用reuseIdentifier 3. 尽可能使Views透明 4. 避免庞大的XIB 5. 不要block主线程 6. 在Image Views中调整图片 ...
【小白学PyTorch】7 最新版本torchvision.transforms常用API翻译与讲解
文章来自:微信公众号[机器学习炼丹术].欢迎关注支持原创也欢迎添加作者微信:cyx645016617. 参考目录: 目录 1 基本函数 1.1 Compose 1.2 RandomChoice 1. ...
Redis安装问题解决方案
Redis部署采坑记 Redis部署采坑记问题一: 问题描述: make 编译源码时报错问题详解: 因为缺少gcc-c++编译器的原因解决方案: 方案一: yum -y install gc ...
Sender(agumaster_crawler)->RabbitMq->Reciever(agumaster)
发送方: package com.heyang.agumasterCrawler; import java.util.List; import org.springframework.beans.fa ...
20190916-01linux文件与目录结构 000 001
1./bin 是Binary的缩写,这个目录存放着最经常使用的命令 2./sbin s就是Super User的意思,这里存放的是系统管理员使用的系统管理程序 3./home 存放普通用户的主目录,在 ...
css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面
1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...
vue3 报错解决：找不到模块‘xxx.vue’或其相应的类型声明。（Vue 3 can not find module）
最近在用 vue3 写一个小组件库,在 ts 文件中引入 .vue 文件时出现以下报错: 报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件解决方法:在项目根目录或 sr ...

Copy As HTML From VSCode

JS生成可自定义语法高亮HTMLcode

cnblogs @ Orcim

event.clipboardData.getData( Format: String )

源代码

使用方法

Advance

Advance Ver2.0

Copy As HTML From VSCode的更多相关文章

随机推荐

热门专题

JS生成可自定义语法高亮HTML^code

cnblogs @ Orcim 　　