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