如下图所示,之前好像看到有大佬实现了,但是必须使用对应的主题,有咩有对应的 css 片段能够实现呢,之前还看到 obsidion 社区他们那边也在求,这个其实还是挺好用的
-
思源笔记
22346 引用 • 89406 回帖 • 1 关注
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
-
Q&A
8116 引用 • 37015 回帖 • 160 关注
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
相关帖子
-
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) }
- 其他回帖
-
Rem Craft 主题有这个,需要 JS 定位 app-translate-content Rem Craft 主题有这个,需要 JS 定位
js 片段
/** * 获得指定块位于的编辑区 * @params {HTMLElement} * @return {HTMLElement} 光标所在块位于的编辑区 * @return {null} 光标不在块内 */ function getTargetEditor(block) { while (block != null && !block.classList.contains('protyle-wysiwyg')) block = block.parentElement; return block; } /** * 获得焦点所在的块 * @return {HTMLElement} 光标所在块 * @return {null} 光标不在块内 */ function getFocusedBlock() { if (document.activeElement.classList.contains('protyle-wysiwyg')) { let block = window.getSelection()?.focusNode?.parentElement; // 当前光标 while (block != null && block.dataset.nodeId == null) block = block.parentElement; return block; } } function focusHandler() { /* 获取当前编辑区 */ let block = getFocusedBlock(); // 当前光标所在块 /* 当前块已经设置焦点 */ if (block?.classList.contains(`block-focus`)) return; /* 当前块未设置焦点 */ const editor = getTargetEditor(block); // 当前光标所在块位于的编辑区 if (editor) { editor.querySelectorAll(`.block-focus`).forEach((element) => element.classList.remove(`block-focus`)); block.classList.add(`block-focus`); // setSelector(block); } } function bulletMain() { // 跟踪当前所在块 window.addEventListener('mouseup', focusHandler, true); window.addEventListener('keyup', focusHandler, true); } (async () => { bulletMain(); console.log('加载子弹线成功') })();
1 回复 - 查看全部回帖