// 添加颜色切换按钮
function addToggleColorBtn(perv_btn) {
let barMode = document.getElementById(perv_btn);
barMode.insertAdjacentHTML(
"afterend",
'<div id="toggle_color_btn" class="toolbar__item ariaLabel" aria-label="切换字体颜色">切换颜色</div>'
);
let toggleBtn = document.getElementById("toggle_color_btn");
let isBlue = true; // 变量来跟踪当前颜色状态
const changeColor = () => {
const elements = document.querySelectorAll('[data-type$="mark"]'); // 选择以 "mark" 结尾的元素
elements.forEach(element => {
if (isBlue) {
element.style.color = '#0000ff00'; // 设置为蓝色
} else {
element.style.color = ''; // 清除颜色
}
});
// 使用选择器选择指定结构内的元素
const nestedElements = document.querySelectorAll('[name="mark"] > div[contenteditable="true"] > span > span > img');
nestedElements.forEach(element => {
// 控制元素的可见状态,但保持位置
if (isBlue) {
element.style.visibility = 'hidden'; // 显示元素
} else {
element.style.visibility = 'visible'; // 隐藏元素,但保留位置
}
});
isBlue = !isBlue; // 切换状态
};
toggleBtn.addEventListener("click", changeColor);
// 监测带有 data-type 以 "mark" 结尾的元素变化
const observeMarkChange = () => {
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.matches('[data-type$="mark"]')) { // 检测以 "mark" 结尾的元素
changeColor(); // 新的 mark 元素加载后,改变颜色
}
// 额外监测符合嵌套结构的元素
if (node.nodeType === 1 && node.matches('[name="mark"] > div[contenteditable="true"] > span > span')) {
changeColor(); // 新的符合条件的元素加载后,改变显示状态
}
});
});
});
// 监听目标节点的子节点变化
observer.observe(document.body, { childList: true, subtree: true });
};
observeMarkChange();
return "toggle_color_btn";
}
// 添加按钮
setTimeout(() => {
addToggleColorBtn("plugin_Calendar-heatmap_0");
}, 300);
还需要有一个 css 标记
[name="inline-math mark"] > div[contenteditable="true"] > span > span {
box-shadow: 0 -0.5em 0 0 inset var(--b3-protyle-inline-mark-background),
0 0.1em 0 0 var(--b3-protyle-inline-mark-background);
}
(不知道为啥标记快捷键能让图片也隐藏)
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于