Skip to content

Commit db05242

Browse files
BacooTangBacooTang
committed
feat: add copy button
1 parent 0f92a6e commit db05242

2 files changed

Lines changed: 130 additions & 100 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,3 @@
1-
![](./images/flomo128.png)
1+
原项目地址 https://github.com/greycodee/flomo-code
22

3-
# Flomo Code
4-
5-
Flomo Code 是一款 Chrome 扩展程序，为您的 Flomo 笔记提供代码语法高亮功能。
6-
7-
## 安装
8-
9-
您可以从 [Release](https://github.com/greycodee/flomo-code/releases/) 下载源码压缩包，然后解压文件。在 **Chrome 扩展程序**页面打开右上角的**开发者模式**，选择**加载已解压的扩展程序**，选择解压的文件路径，就可加载flomo-code
10-
## 使用
11-
12-
要使用 Flomo Code，只需在 Flomo 笔记中添加 Markdown 代码块，点击 flomo 页面右下角`绿色按钮`，即可突出显示语法。
13-
14-
### before
15-
![](./before.png)
16-
17-
### after
18-
![](./after.png)
19-
20-
## 更换代码主题
21-
22-
可以在插件栏点击进行更换代码主题
23-
24-
![](./choose_theme.gif)
25-
## 贡献
26-
27-
欢迎贡献！如果您发现错误或有功能请求，请在 [GitHub 存储库](https://github.com/greycodee/flomo-code) 上打开 Issue。
28-
29-
## 许可证
30-
31-
Flomo Code 在 [MIT 许可证](https://opensource.org/licenses/MIT) 下获得许可。
3+
仅新增复制按钮

‎scripts/content.js‎

Lines changed: 128 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,134 @@
11
window.onload = function () {
2-
const hljsbtn = document.createElement("button");
3-
const img = document.createElement("img");
4-
img.src = chrome.runtime.getURL("images/code.svg");
5-
img.style.height = "20px";
6-
img.style.width = "20px";
7-
8-
hljsbtn.appendChild(img);
2+
const hljsbtn = document.createElement('button');
3+
const img = document.createElement('img');
4+
img.src = chrome.runtime.getURL('images/code.svg');
5+
img.style.height = '20px';
6+
img.style.width = '20px';
97

10-
// hljsbtn.innerHTML = "点击";
11-
hljsbtn.type = "button";
12-
hljsbtn.style.height = "36px";
13-
hljsbtn.style.width = "36px";
14-
hljsbtn.style.borderRadius = "36px";
15-
hljsbtn.style.border = "none";
16-
hljsbtn.style.backgroundColor = "#397354";
17-
hljsbtn.style.color = "#fff";
18-
hljsbtn.style.cursor = "pointer";
19-
hljsbtn.style.position = "fixed";
20-
hljsbtn.style.bottom = "80px";
21-
hljsbtn.style.right = "30px";
22-
hljsbtn.style.zIndex = "9999";
23-
hljsbtn.style.display = "flex";
24-
hljsbtn.style.justifyContent = "center";
25-
hljsbtn.style.alignItems = "center";
8+
hljsbtn.appendChild(img);
269

27-
hljsbtn.addEventListener("click", () => {
28-
const memos = document.getElementsByClassName("richText");
29-
const memos_array = Array.from(memos);
30-
memos_array.forEach((memo) => {
31-
let children = memo.children;
32-
const memo_p_array = Array.from(children);
33-
let languageFlag = false;
34-
let codeContentArr = [];
35-
let languageType = "";
36-
for (let i = 0; i < memo_p_array.length; i++) {
37-
if (
38-
memo_p_array[i].innerHTML.startsWith("```") &&
39-
memo_p_array[i].innerHTML.substring(3) != ""
40-
) {
41-
languageType = "language-" + memo_p_array[i].innerHTML.substring(3);
42-
languageFlag = true;
43-
memo.removeChild(memo_p_array[i]);
44-
continue;
45-
} else if (
46-
memo_p_array[i].innerHTML.startsWith("```") &&
47-
memo_p_array[i].innerHTML.substring(3) === ""
48-
) {
49-
// memo.removeChild(memo_p_array[i]);
50-
languageFlag = false;
51-
let pre = document.createElement("pre");
52-
let code = document.createElement("code");
53-
code.innerHTML = codeContentArr.join("\n");
54-
code.className = languageType;
55-
pre.appendChild(code);
56-
memo_p_array[i].innerHTML = "";
57-
memo_p_array[i].appendChild(pre);
58-
// memo.appendChild(pre);
59-
//清空数组
60-
codeContentArr = [];
61-
languageType = "";
62-
continue;
63-
} else {
64-
if (languageFlag) {
65-
codeContentArr.push(memo_p_array[i].innerHTML);
66-
memo.removeChild(memo_p_array[i]);
67-
}
68-
}
69-
}
70-
});
71-
hljs.highlightAll();
72-
});
73-
document.body.appendChild(hljsbtn);
10+
// hljsbtn.innerHTML = "点击";
11+
hljsbtn.type = 'button';
12+
hljsbtn.style.height = '36px';
13+
hljsbtn.style.width = '36px';
14+
hljsbtn.style.borderRadius = '36px';
15+
hljsbtn.style.border = 'none';
16+
hljsbtn.style.backgroundColor = '#397354';
17+
hljsbtn.style.color = '#fff';
18+
hljsbtn.style.cursor = 'pointer';
19+
hljsbtn.style.position = 'fixed';
20+
hljsbtn.style.bottom = '80px';
21+
hljsbtn.style.right = '30px';
22+
hljsbtn.style.zIndex = '9999';
23+
hljsbtn.style.display = 'flex';
24+
hljsbtn.style.justifyContent = 'center';
25+
hljsbtn.style.alignItems = 'center';
26+
27+
hljsbtn.addEventListener('click', () => {
28+
const memos = document.getElementsByClassName('richText');
29+
const memos_array = Array.from(memos);
30+
memos_array.forEach((memo) => {
31+
let children = memo.children;
32+
const memo_p_array = Array.from(children);
33+
let languageFlag = false;
34+
let codeContentArr = [];
35+
let languageType = '';
36+
for (let i = 0; i < memo_p_array.length; i++) {
37+
if (memo_p_array[i].innerHTML.startsWith('```') && memo_p_array[i].innerHTML.substring(3) != '') {
38+
languageType = 'language-' + memo_p_array[i].innerHTML.substring(3);
39+
languageFlag = true;
40+
memo.removeChild(memo_p_array[i]);
41+
continue;
42+
} else if (
43+
memo_p_array[i].innerHTML.startsWith('```') &&
44+
memo_p_array[i].innerHTML.substring(3) === ''
45+
) {
46+
// memo.removeChild(memo_p_array[i]);
47+
languageFlag = false;
48+
49+
// 保存代码内容的副本用于复制功能
50+
const codeForCopy = [...codeContentArr];
51+
52+
let pre = document.createElement('pre');
53+
let code = document.createElement('code');
54+
code.innerHTML = codeContentArr.join('\n');
55+
code.className = languageType;
56+
57+
let wrapper = document.createElement('div');
58+
wrapper.style.position = 'relative';
59+
60+
// 创建复制按钮
61+
let copyBtn = document.createElement('button');
62+
copyBtn.innerHTML =
63+
'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
64+
copyBtn.style.position = 'absolute';
65+
copyBtn.style.top = '5px';
66+
copyBtn.style.right = '5px';
67+
copyBtn.style.zIndex = '100';
68+
copyBtn.style.fontSize = '12px';
69+
copyBtn.style.padding = '4px';
70+
copyBtn.style.background = 'rgba(240, 240, 240, 0.8)';
71+
copyBtn.style.border = '1px solid #ccc';
72+
copyBtn.style.borderRadius = '3px';
73+
copyBtn.style.cursor = 'pointer';
74+
copyBtn.style.display = 'flex';
75+
copyBtn.style.justifyContent = 'center';
76+
copyBtn.style.alignItems = 'center';
77+
copyBtn.title = '复制代码';
78+
79+
copyBtn.addEventListener('click', function (e) {
80+
e.stopPropagation();
7481

82+
// 创建临时元素解码HTML
83+
const tempElement = document.createElement('div');
7584

85+
// 处理内容
86+
let decodedContent = [];
87+
for (let i = 0; i < codeForCopy.length; i++) {
88+
tempElement.innerHTML = codeForCopy[i];
89+
decodedContent.push(tempElement.textContent || tempElement.innerText);
90+
}
91+
92+
// 最终复制内容
93+
const codeText = decodedContent.join('\n');
94+
95+
// 复制到剪贴板
96+
navigator.clipboard
97+
.writeText(codeText)
98+
.then(() => {
99+
copyBtn.style.color = '#4CAF50';
100+
copyBtn.title = '已复制!';
101+
102+
setTimeout(() => {
103+
copyBtn.style.color = '';
104+
copyBtn.title = '复制代码';
105+
}, 1500);
106+
})
107+
.catch((err) => {
108+
console.error('复制失败:', err);
109+
});
110+
});
111+
112+
pre.appendChild(code);
113+
wrapper.appendChild(pre);
114+
wrapper.appendChild(copyBtn);
115+
116+
memo_p_array[i].innerHTML = '';
117+
memo_p_array[i].appendChild(wrapper);
118+
// memo.appendChild(pre);
119+
//清空数组
120+
codeContentArr = [];
121+
languageType = '';
122+
continue;
123+
} else {
124+
if (languageFlag) {
125+
codeContentArr.push(memo_p_array[i].innerHTML);
126+
memo.removeChild(memo_p_array[i]);
127+
}
128+
}
129+
}
130+
});
131+
hljs.highlightAll();
132+
});
133+
document.body.appendChild(hljsbtn);
76134
};

0 commit comments

Comments
 (0)