如下图所示，之前好像看到有大佬实现了，但是必须使用对应的主题，有咩有对应的 css 片段能够实现呢，之前还看到 obsidion 社区他们那边也在求，这个其实还是挺好用的
本贴最后更新于 482 天前，其中的信息可能已经时移世异
-
思源笔记
23020 引用 • 92599 回帖
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
-
Q&A
8449 引用 • 38491 回帖 • 155 关注
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
1 引用
相关帖子
被采纳的回答
-
mdzz2048 • • 6 • 1 赞同订阅者 付费者 恶龙
css 片段
/* REF https://github.com/svchord/Rem-Craft */ .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{ color:rgb(70, 110, 220);; } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action svg{ margin:0; width:16px; height:16px; padding:0px 0px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li::after{ content:""; display:block; position:absolute; pointer-events:none; width:34px; left:-18px; top:-20px; border-style:solid; border-color:rgb(70, 110, 220);; } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:not(:has(.block-focus))::after{ bottom:-2px; border-width:0 0 0 2px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{ height:38px; border-radius:0 0 0 8px; border-width:0 0 2px 2px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)~.li:not(:has(.block-focus))::after{ border-color:rgba(0,0,0,0) } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=o]::after{ width:24px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=t]::after{ width:28px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]::after{ content:""; display:block; position:absolute; pointer-events:none; width:34px; left:-18px; top:-20px; border-style:solid; border-color:rgb(70, 110, 220); top:20px; height:calc(100% + 4px); border-width:0 0 0 2px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]:has(+.list)::after{ height:auto; bottom:0 } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id][data-type=NodeHeading]::after{ top:0; height:185% } .protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)~[data-node-id]::after{ border-color:rgba(0,0,0,0) } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[fold="1"]>[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus):has(>.block-focus)>[data-node-id]::after{ border-color:rgba(0,0,0,0) } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li::after{ top:-10px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{ height:28px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action{ color:rgb(70, 110, 220);; } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action svg{ margin:0; width:14px; height:14px; padding:0px 0px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li::after{ top:-14px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{ height:32px } .protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus).protyle-task--done>.list:has(.block-focus)>.li::after{ border-color:rgba(139, 139, 139) }
请输入回帖内容
...
- 其他回帖
-
py • • 1 评论
你好，只把 CSS 片段复制就可以么，还是说 JS 片段也需要做什么操作呢？
分别把 CSS 代码、JS 代码放在 设置——外观——代码片段中。两个都要放。注意代码片段功能中 CSS 和 JS 代码需要切换一下。 -
JS 片段我用 AI 优化了下，新代码滚动页面的延迟降低，并且没有 100ms 的显示延迟了。
// 缓存编辑器块并处理聚焦状态的函数定义 let cachedEditorBlocks = []; // 缓存所有编辑器块 let focusedBlock = null; // 缓存当前聚焦的块 // 初始化缓存 function initEditorBlocksCache() { const editors = document.querySelectorAll('.protyle-wysiwyg'); editors.forEach(editor => { if (!editor.classList.contains('NodeAttributeView')) { cachedEditorBlocks.push(...editor.querySelectorAll('[data-node-id]')); } }); } // 更新聚焦状态并维护缓存 function handleBlockFocus(e) { let target; if (e.type === 'mouseup') { // 鼠标事件，查找最近的具有data-node-id属性的元素 target = e.target.closest('[data-node-id]'); } else if (e.type === 'keyup') { // 键盘事件，查找当前焦点所在的具有data-node-id属性的元素 const activeElement = document.activeElement; if (activeElement.classList.contains('protyle-wysiwyg')) { target = window.getSelection()?.focusNode?.parentElement; while (target && !target.dataset.nodeId) { target = target.parentElement; if (!target) break; // 避免空指针异常 if (target.classList.contains('NodeAttributeView')) { target = null; // 如果找到NodeAttributeView，则不处理该元素 break; } } } } if (!target || target === focusedBlock) return; if (focusedBlock) { focusedBlock.classList.remove('block-focus'); } focusedBlock = target; focusedBlock.classList.add('block-focus'); // 根据需要调用相关功能，例如： // setSelector(focusedBlock); } // 初始化编辑器块缓存 initEditorBlocksCache(); // 绑定事件监听器 document.addEventListener('mouseup', handleBlockFocus, true); document.addEventListener('keyup', handleBlockFocus, true); // 立即调用的异步函数表达式，执行handleBlockFocus并输出日志 (async () => { // 这里我们调用handleBlockFocus函数，但由于它不返回Promise，所以不需要await handleBlockFocus({ type: 'dummy' }); // 模拟事件调用 console.log('加载子弹线成功'); })();1 操作5kyfkr 在 2024-05-11 21:29:55 更新了该回帖 - 查看全部回帖
