Skip to content

Commit 37ecca4

Browse files
greycodeegreycodee
authored
Merge pull request #3 from BacooTang/main
feat: 增加复制按钮和自动高亮
2 parents 0f92a6e + 9194fd2 commit 37ecca4

4 files changed

Lines changed: 258 additions & 177 deletions

File tree

‎README.md‎

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

3-
# Flomo Code
3+
feat: 仅新增复制按钮
44

5-
Flomo Code 是一款 Chrome 扩展程序，为您的 Flomo 笔记提供代码语法高亮功能。
5+
feat: 新增自动高亮
66

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) 下获得许可。
7+
fix: 网址形式的内容在高亮块显示不为 herf 问题

‎manifest.json‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
11
{
2-
"name": "flomo code",
3-
"version": "1.1",
4-
"manifest_version": 3,
5-
"description": "flomo md代码块高亮插件",
6-
"action":{
7-
"default_title":"选择主题",
8-
"default_popup": "popup/popup.html"
9-
},
10-
"permissions": [
11-
"storage",
12-
"scripting",
13-
"tabs",
14-
"activeTab"
15-
],
16-
"background": {
17-
"service_worker": "service-worker.js"
18-
},
19-
"icons": {
2+
"name": "flomo code",
3+
"version": "1.1",
4+
"manifest_version": 3,
5+
"description": "flomo md代码块高亮插件",
6+
"action": {
7+
"default_title": "选择主题",
8+
"default_popup": "popup/popup.html"
9+
},
10+
"permissions": ["storage", "scripting", "tabs", "activeTab", "webRequest"],
11+
"background": {
12+
"service_worker": "service-worker.js"
13+
},
14+
"icons": {
15+
"128": "images/flomo128.png"
16+
},
2017

21-
"128": "images/flomo128.png"
22-
},
23-
24-
"web_accessible_resources": [
25-
{
26-
"resources": ["images/*"],
27-
"matches": ["https://v.flomoapp.com/*","https://flomoapp.com/*"]
28-
}
29-
],
30-
"host_permissions": [
31-
"https://v.flomoapp.com/*",
32-
"https://flomoapp.com/*"
33-
],
34-
"options_page": "options/options.html"
35-
}
18+
"web_accessible_resources": [
19+
{
20+
"resources": ["images/*"],
21+
"matches": ["https://v.flomoapp.com/*", "https://flomoapp.com/*", "https://h5.udrig.com/*"]
22+
}
23+
],
24+
"host_permissions": ["https://v.flomoapp.com/*", "https://flomoapp.com/*", "https://h5.udrig.com/*"],
25+
"options_page": "options/options.html"
26+
}

‎scripts/content.js‎

Lines changed: 162 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,168 @@
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);
9-
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");
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);
9+
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', highlightCodeBlocks);
28+
29+
document.body.appendChild(hljsbtn);
30+
};
31+
32+
// 添加消息监听器
33+
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
34+
if (request.action === 'highlightCode') {
35+
highlightCodeBlocks();
36+
sendResponse({ status: '高亮处理完成' });
37+
}
38+
return true; // 表示会异步发送响应
39+
});
40+
41+
// 将代码高亮功能抽取为单独的函数
42+
function highlightCodeBlocks() {
43+
const memos = document.getElementsByClassName('richText');
2944
const memos_array = Array.from(memos);
3045
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-
}
46+
let children = memo.children;
47+
const memo_p_array = Array.from(children);
48+
let languageFlag = false;
49+
let codeContentArr = [];
50+
let languageType = '';
51+
for (let i = 0; i < memo_p_array.length; i++) {
52+
if (memo_p_array[i].innerHTML.startsWith('```') && memo_p_array[i].innerHTML.substring(3) != '') {
53+
languageType = 'language-' + memo_p_array[i].innerHTML.substring(3);
54+
languageFlag = true;
55+
memo.removeChild(memo_p_array[i]);
56+
continue;
57+
} else if (memo_p_array[i].innerHTML.startsWith('```') && memo_p_array[i].innerHTML.substring(3) === '') {
58+
// memo.removeChild(memo_p_array[i]);
59+
languageFlag = false;
60+
61+
// 保存代码内容的副本用于复制功能
62+
const codeForCopy = [...codeContentArr];
63+
64+
let pre = document.createElement('pre');
65+
let code = document.createElement('code');
66+
code.innerHTML = codeContentArr.join('\n');
67+
code.className = languageType;
68+
69+
let wrapper = document.createElement('div');
70+
wrapper.style.position = 'relative';
71+
72+
// 创建复制按钮
73+
let copyBtn = document.createElement('button');
74+
copyBtn.innerHTML =
75+
'<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>';
76+
copyBtn.style.position = 'absolute';
77+
copyBtn.style.top = '5px';
78+
copyBtn.style.right = '5px';
79+
copyBtn.style.zIndex = '100';
80+
copyBtn.style.fontSize = '12px';
81+
copyBtn.style.padding = '4px';
82+
copyBtn.style.background = 'rgba(240, 240, 240, 0.8)';
83+
copyBtn.style.border = '1px solid #ccc';
84+
copyBtn.style.borderRadius = '3px';
85+
copyBtn.style.cursor = 'pointer';
86+
copyBtn.style.display = 'flex';
87+
copyBtn.style.justifyContent = 'center';
88+
copyBtn.style.alignItems = 'center';
89+
copyBtn.title = '复制代码';
90+
91+
copyBtn.addEventListener('click', function (e) {
92+
e.stopPropagation();
93+
94+
// 创建临时元素解码HTML
95+
const tempElement = document.createElement('div');
96+
97+
// 处理内容
98+
let decodedContent = [];
99+
for (let i = 0; i < codeForCopy.length; i++) {
100+
tempElement.innerHTML = codeForCopy[i];
101+
decodedContent.push(tempElement.textContent || tempElement.innerText);
102+
}
103+
104+
// 最终复制内容
105+
const codeText = decodedContent.join('\n');
106+
107+
// 复制到剪贴板
108+
navigator.clipboard
109+
.writeText(codeText)
110+
.then(() => {
111+
copyBtn.style.color = '#4CAF50';
112+
copyBtn.title = '已复制!';
113+
114+
setTimeout(() => {
115+
copyBtn.style.color = '';
116+
copyBtn.title = '复制代码';
117+
}, 1500);
118+
})
119+
.catch((err) => {
120+
console.error('复制失败:', err);
121+
});
122+
});
123+
124+
pre.appendChild(code);
125+
wrapper.appendChild(pre);
126+
wrapper.appendChild(copyBtn);
127+
128+
memo_p_array[i].innerHTML = '';
129+
memo_p_array[i].appendChild(wrapper);
130+
// memo.appendChild(pre);
131+
//清空数组
132+
codeContentArr = [];
133+
languageType = '';
134+
continue;
135+
} else {
136+
if (languageFlag) {
137+
// 处理内容中的a标签
138+
let content = memo_p_array[i].innerHTML;
139+
140+
// 创建临时DOM元素来解析HTML
141+
const tempDiv = document.createElement('div');
142+
tempDiv.innerHTML = content;
143+
144+
// 查找所有a标签
145+
const links = tempDiv.querySelectorAll('a');
146+
links.forEach((link) => {
147+
// 获取href属性
148+
const href = link.getAttribute('href');
149+
if (href) {
150+
// 替换整个a标签为@+href
151+
const linkText = `${href}`;
152+
// 创建文本节点
153+
const textNode = document.createTextNode(linkText);
154+
// 替换a标签为文本节点
155+
link.parentNode.replaceChild(textNode, link);
156+
}
157+
});
158+
159+
// 获取处理后的内容
160+
content = tempDiv.innerHTML;
161+
codeContentArr.push(content);
162+
memo.removeChild(memo_p_array[i]);
163+
}
164+
}
68165
}
69-
}
70166
});
71167
hljs.highlightAll();
72-
});
73-
document.body.appendChild(hljsbtn);
74-
75-
76-
};
168+
}

0 commit comments

Comments
 (0)