Copy As HTML From VSCode
JS生成可自定义语法高亮HTMLcode
cnblogs @ Orcim
这篇文章介绍了如何在博客里插入一段 pretty 代码框的方法（以博客园为例），主要是由于实在是受不了博客园以及其余一些博客自带代码框的样子了w~css
这篇文章很长很长，你能够直接点击这里，直接跳到源代码处，复制代码，或者滑到文章最底部查看使用方法。html
原 理是利用 VSCode 的 Copy With Syntax Highlighting 这个自带的功能，其实不少 IDE 都具备此类功能：web
Ctrl + 逗号，打开设置，搜索找到上图中的选项就能够开启高亮语法复制为 HTML 代码的这个功能了，固然如今直接粘贴并不能直接获取到 剪切板内 TEXT 文本，也没法获取带高亮样式的内 HTML 文本。浏览器
实际上是能够获取剪切板的 HTML 文本的，js 提供了一个 onpaste 事件，能够在函数事件的 event 参数中获取到剪切板的内容了。app
event.clipboardData.getData( Format: String )
若是要获取剪切板的纯文本，String 为 “text/plan”，若是是 HTML 文本，String 为 “text/html”：编辑器
1
2
3
4
5
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 出来一堆东西：ide
为方便查看把这串从 VSCode剪切板 里面获得的内容 Prettify 一下，其实颇有规律：函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--StartFragment-->
<
div
style
=
"
color: #d4d4d4;background-color: #1e1e1e;font-family: Meslo LG L DZ, Microsoft YaHei;font-weight: 200;font-size: 16px;line-height: 34px;white-space: pre;"
>
<
div
>
<
span
style
=
"
color: #9cdcfe;"
>
document
</
span
>
<
span
style
=
"
color: #d4d4d4;"
>
.
</
span
>
<
span
style
=
"
color: #dcdcaa;"
>
onpaste
</
span
>
<
span
style
=
"
color: #d4d4d4;"
>
=
</
span
>
<
span
style
=
"
color: #569cd6;"
>
function
</
span
>
<
span
style
=
"
color: #d4d4d4;"
>
(
</
span
>
<
span
style
=
"
color: #9cdcfe;"
>
e
</
span
>
<
span
style
=
"
color: #d4d4d4;"
>
){
</
span
>
</
div
>
<
div
>
<
span
style
=
"
color: #d4d4d4;"
>
</
span
>
<
span
style
=
"
color: #569cd6;"
>
var
</
span
>
........
</
div
>
</
div
>
<!--EndFragment-->
可能你也发现了规律了吧，其实这就是大多数 IDE 的语法高亮显示功能的原理，整个编辑器就至关于浏览器的窗口，窗口中每段文字都被特定样式的标签包裹起来……每行一个 div 又包裹不少 span 的行内元素，就这样一行一行堆砌，而后就实现了这个功能。布局
获得的这些 HTML 文本基本上就能够复制到各大博客的编辑器来用了，可是咱们除了去设置整个编辑器的样式这个方法以外，没有其余更简便的办法去改变高亮的样式了，并且若是剪切板中 HTML 标签内为 制表符或者是一些空白字符的话，编辑器一般会将其忽略，就没有代码缩进显示，好比我在博客园的编辑器中直接复制 CODE02 的代码到 HTML 编辑文本域里面，代码的缩进所有都没有了，因而就想到对这些剪切板里面的内容处理一下，能够灵活输出本身想要展现 Code 的 HTML。flex
因而花了一天的时间，从最初的 HTML模板布局 到整个功能的实现，以及 JS 代码修改，最后完善了整个程序。直接给你们看 demo，其实前面的代码框就是演示……，上面的两个代码展现框就是 JS 生成的（普通的字符串的处理），加入了行数标识以及标题标识功能，以后还添加了一个 light 主题，二者样式兼容移动端：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 代码，便于最后的自定义样式的代码框输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!
DOCTYPE
html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
>
CopyAsHtmlFromVScode
</
title
>
</
head
>
<
body
>
<
div
id
=
"codePart"
>
<
div
id
=
"codeBox"
style
=
'
width: 100%; height: auto; line-height: 34px; position: relative; font-family: "Meslo LG L DZ", "monospace";'
>
<!-- 标题一栏 -->
<
div
id
=
"banner"
style
=
"
width: 100%; height: 34px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .1); border-top-left-radius: 8px; border-top-right-radius: 8px; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, .15)"
>
<!--
生成的代码框左上角用于标识文件类型的圆，颜色集合变量名：stampColors
html -> 红
css -> 蓝
js -> 黄
txt -> 黑灰
-->
<
div
id
=
"bannerStamp"
style
=
"
height: 34px; width: 34px; float: left; display: flex; align-items: center; justify-content: center"
><
span
style
=
"
display: block; width: 60%; height: 60%; -webkit-border-radius: 50%; background: green"
>
</
span
></
div
>
<!-- 标题名 -->
<
div
style
=
"
height: 34px; float: left; font-size: 16px; line-height: 34px; display: flex; align-items: center;"
><
span
style
=
"
display: block; font-family: sans-serif"
id
=
"bannerTitle"
>
123.html
</
span
></
div
>
</
div
>
<
div
class
=
"side"
id
=
"vsSide"
style
=
"
width: 50px; background: none; float: left; padding: 40px 0 30px; background: #f5f5f5; border-top-left-radius: 8px; border-bottom-left-radius: 8px;"
>
<!-- 侧边行数一列 -->
</
div
>
<
div
id
=
"containerOuter"
style
=
"
width: calc(100% - 70px); float: left; white-space: nowrap; background: #f5f5f5; overflow: auto; padding: 40px 0 30px 20px; border-bottom-right-radius: 8px; border-top-right-radius: 8px;"
>
<!-- 代码高亮的展现 HTML -->
<
div
id
=
"_containerBox"
></
div
>
</
div
>
<!-- 防止高度坍塌 -->
<
div
style
=
"
clear: both;"
></
div
>
</
div
>
</
div
>
</
body
>
</
html
>
JS 代码，直接复制放在 body 标签后的 script 标签里面，这里分开展现是为了方便排版和阅读~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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
添加复制功能和展开/收起功能：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!
DOCTYPE
html
>
<
html
lang
="
en
">
<
head
>
<
meta
charset
="
UTF-8
">
<
meta
name
="
viewport
"
content
="
width=device-width, initial-scale=1.0
">
<
meta
http-equiv
="
X-UA-Compatible
"
content
="
ie=edge
">
<
title
>
CopyAsHtmlFromVScode
</
title
>
<
style
>
<
/
style
>
</
head
>
<
body
>
<
div
id
="
codePart
">
<
div
id
="
codeBox
"
class
="
codeBox
"
style
='
width: 100%; height: auto; line-height: 34px; position: relative; font-family: "Meslo LG L DZ", "monospace";
'
>
<
div
id
="
banner
"
class
="
banner
"
style
="
width: 100%; height: 34px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .1); border-top-left-radius: 8px; border-top-right-radius: 8px; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, .15)
"
>
<
div
id
="
bannerStamp
"
style
="
height: 34px; width: 34px; float: left; display: flex; align-items: center; justify-content: center
"
>
<
span
style
="
display: block; width: 60%; height: 60%; border-radius: 50%; background: green
"
>&
nbsp
;</
span
>
</
div
>
<
div
style
="
height: 34px; float: left; font-size: 16px; line-height: 34px; display: flex; align-items: center;
"
>
<
span
style
="
display: block; font-family: sans-serif
"
id
="
bannerTitle
">
123.html
</
span
>
</
div
>
<
div
style
="
height: 34px; float: right; font-size: 16px; line-height: 34px; display: flex; align-items: center; justify-content: center;
"
>
<
span
style
="
display: block; background: rgba(255, 255, 255, .65); font-family: sans-serif; padding: 0 5px; margin-right: 10px;
"
data-clipboard-target
="">
COPY
</
span
>
<
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
class
="
side
"
id
="
vsSide
"
style
="
width: 50px; background: none; float: left; padding: 40px 0 30px; background: #f5f5f5; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
"
>
</
div
>
<
div
id
="
containerOuter
"
style
="
width: calc(100% - 70px); float: left; white-space: nowrap; background: #f5f5f5; overflow: auto; padding: 40px 0 30px 20px; border-bottom-right-radius: 8px; border-top-right-radius: 8px;
"
>
<
div
id
="
_containerBox
">
</
div
>
</
div
>
<
div
style
="
clear: both;
"
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
<
script
src
="
./clipBoard.js
">
<
/
script
>
<
script
>
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处的复制按钮和展开/收起按钮。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!
DOCTYPE
html
>
<
html
lang
="
en
">
<
head
>
<
meta
charset
="
UTF-8
">
<
meta
name
="
viewport
"
content
="
width=device-width, initial-scale=1.0
">
<
meta
http-equiv
="
X-UA-Compatible
"
content
="
ie=edge
">
<
title
>
CopyAsHtmlFromVScode
</
title
>
<
style
>
<
/
style
>
</
head
>
<
body
>
<
div
id
="
codePart
">
<
div
id
="
codeBox
"
class
="
codeBox
"
style
='
width: 100%; height: auto; line-height: 34px; position: relative; font-family: "Meslo LG L DZ", "monospace";
'
>
<
div
id
="
banner
"
class
="
banner
"
style
="
width: 100%; height: 34px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .1); border-top-left-radius: 8px; border-bottom-left-radius: 8px; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, .15)
"
>
<
div
id
="
bannerStamp
"
style
="
height: 34px; width: 34px; float: left; display: flex; align-items: center; justify-content: center
"
>
<
span
style
="
display: block; width: 60%; height: 60%; border-radius: 50%; background: green
"
>&
nbsp
;</
span
>
</
div
>
<
div
style
="
height: 34px; float: left; font-size: 16px; line-height: 34px; display: flex; align-items: center;
"
>
<
span
style
="
display: block; font-family: sans-serif
"
id
="
bannerTitle
">
123.html
</
span
>
</
div
>
<
div
style
="
height: 34px; float: right; font-size: 16px; line-height: 34px; display: flex; align-items: center; justify-content: center;
"
>
<
span
style
="
display: block; background: rgba(255, 255, 255, .65); font-family: sans-serif; padding: 0 5px; margin-right: 10px;
"
data-clipboard-target
="">
COPY
</
span
>
<
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
class
="
side
"
id
="
vsSide
"
style
="
width: 50px; background: none; float: left; padding: 40px 0 45px; background: #f5f5f5; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
"
>
</
div
>
<
div
id
="
containerOuter
"
style
="
width: calc(100% - 70px); float: left; white-space: nowrap; background: #f5f5f5; overflow: auto; padding: 40px 0 45px 20px; border-bottom-right-radius: 8px; border-top-right-radius: 8px;
"
>
<
div
id
="
_containerBox
">
</
div
>
</
div
>
<
div
class
="
banner
"
style
="
width: 100%; height: 34px; position: absolute; bottom: 55px; left: 0; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, .15)
"
>
<
div
style
="
height: 34px; float: right; font-size: 16px; line-height: 34px; display: flex; align-items: center; justify-content: center;
"
>
<
span
style
="
display: block; background: rgba(255, 255, 255, .65); font-family: sans-serif; padding: 0 5px; margin-right: 10px;
"
data-clipboard-target
="">
COPY
</
span
>
<
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
style
="
clear: both;
"
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
<
script
src
="
./clipBoard.js
">
<
/
script
>
<
script
>
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
>
相关文章
- 1. copy unicode HTML to clipboard
- 2. Cross join in excel --- Copy from Internet
- 3. Copy Files from Windows 10 to wsl
- 4. linux内核中的copy to user和copy from user 二 —图解 arch copy from u
- 5. Generate PDF from HTML
- 6. Unable to copy symbols from this device
- 7. MySql create table ... as select * from ..
- 8. watch As a noun, from English wacche
- 9. Html from 标签
- 10. [Swift]LeetCode1162. 地图分析 | As Far from Land as Possible
- 更多相关文章...
- • PHP copy() 函数 - PHP参考手册
- • ASP Copy 方法 - ASP 教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • JDK13 GA发布：5大特性解读
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. copy unicode HTML to clipboard
- 2. Cross join in excel --- Copy from Internet
- 3. Copy Files from Windows 10 to wsl
- 4. linux内核中的copy to user和copy from user 二 —图解 arch copy from u
- 5. Generate PDF from HTML
- 6. Unable to copy symbols from this device
- 7. MySql create table ... as select * from ..
- 8. watch As a noun, from English wacche
- 9. Html from 标签
- 10. [Swift]LeetCode1162. 地图分析 | As Far from Land as Possible