回帖 - cxg318


/* (标记或标记+粗体)同时转挖空 CSS片段 */
.b3-typography [data-type~="mark"], .protyle-wysiwyg [data-type~="mark"]{
color: transparent !important;
padding: 0px 5px 0px 5px;
background-color: transparent !important;
background-image: none !important;
border-bottom: 0.1em solid var(--b3-theme-on-background) !important;
transition: all 300ms;
}
.b3-typography [data-type~="mark"]:hover, .protyle-wysiwyg [data-type~="mark"]:hover,.p.block-focus [data-type~="mark"]{
color: var(--b3-theme-on-background) !important;
transition: all 300ms;
padding: 0px 5px 0px 5px;
}

.b3-typography [data-type~="mark"][data-type~="strong"], .protyle-wysiwyg [data-type~="mark"][data-type~="strong"]{
color: transparent !important;
padding: 0px 5px 0px 5px;
background-color: transparent !important;
background-image: none !important;
border-bottom: 0.1em solid var(--b3-theme-on-background) !important;
transition: all 300ms;
}
.b3-typography [data-type~="mark"][data-type~="strong"]:hover, .protyle-wysiwyg [data-type~="mark"][data-type~="strong"]:hover,.p.block-focus [data-type~="mark"][data-type~="strong"]{
color: #81ebcf !important;
transition: all 300ms;
padding: 0px 5px 0px 5px;
}

分享两个好用的代码片段

2024-07-23 10:59

// js片段
// 通过快捷键(alt + p), 打开配置页面
function openSettingPage() {
let keyInit = {
ctrlKey: false,
altKey: true,
metaKey: false,
shiftKey: false,
key: 'P',
keyCode: 80
}
keyInit["bubbles"] = true;
let keydownEvent = new KeyboardEvent('keydown', keyInit);
document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent);
let keyUpEvent = new KeyboardEvent('keyup', keyInit);
document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent);
}

// 添加按钮, 并设置点击事件
// 添加 js代码片段
function addBtnJsSnippets(perv_btn) {
let barMode = document.getElementById(perv_btn);
barMode.insertAdjacentHTML(
"afterend",
'<div id="js_barSnippets_simulate_btn" class="toolbar__item ariaLabel" aria-label="JS代码片段"></div>'
);
let settingBtn = document.getElementById("js_barSnippets_simulate_btn");
settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

settingBtn.addEventListener(
"click",
function (e) {
// 打开设置
openSettingPage();
// 点击外观
// 找到包含 data-name="appearance" 的 <li> 元素
var btn = document.querySelector('li[data-name="appearance"]');
btn.click();
// 点击 设置
// 获取按钮元素
btn = document.getElementById('codeSnippet');
btn.click();
// 点击 js
// 获取按钮元素
setTimeout(() => {
btn = document.querySelector('[data-type="js"]');
btn.click();
}, 200);
}
);
return "js_barSnippets_simulate_btn"
}
// 添加按钮, 并设置点击事件
// 添加 css代码片段
function addBtnCssSnippets(perv_btn) {
let barMode = document.getElementById(perv_btn);
barMode.insertAdjacentHTML(
"afterend",
'<div id="css_barSnippets_simulate_btn" class="toolbar__item ariaLabel" aria-label="css代码片段"></div>'
);
let settingBtn = document.getElementById("css_barSnippets_simulate_btn");
settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

settingBtn.addEventListener(
"click",
function (e) {
// 打开设置
openSettingPage();
// 点击外观
// 找到包含 data-name="appearance" 的 <li> 元素
var btn = document.querySelector('li[data-name="appearance"]');
btn.click();
// 点击 设置
// 获取按钮元素
btn = document.getElementById('codeSnippet');
btn.click();
}
);
return "css_barSnippets_simulate_btn"
}

// 添加按钮, 并设置点击事件
// 添加 重新加载按钮
function addBtnRefresh(perv_btn) {
let barMode = document.getElementById(perv_btn);
barMode.insertAdjacentHTML(
"afterend",
'<div id="reload_page_btn" class="toolbar__item ariaLabel" aria-label="重新加载"></div>'
);
let settingBtn = document.getElementById("reload_page_btn");
settingBtn.innerHTML = `<svg><use xlink:href="#iconRefresh"></use></svg>`;

settingBtn.addEventListener(
"click",
function (e) {
// 打开设置
openSettingPage();
// 点击外观
// 找到包含 data-name="appearance" 的 <li> 元素
var btn = document.querySelector('li[data-name="keymap"]');
btn.click();
// 点击 设置
// 获取按钮元素
btn = document.getElementById('keymapRefreshBtn');
btn.click();
}
);
return "reload_page_btn"
}
/* 重新加载会有延时, 所以需要等待300ms之后再添加按钮 */
setTimeout(() => {
js_btn_str = addBtnJsSnippets("barForward");
js_btn_str = addBtnCssSnippets(js_btn_str);
addBtnRefresh(js_btn_str);
}, 300);