[js][css] 高亮提示目前正在编辑的块、高亮提示超级块、高亮提示鼠标悬浮块

实现了:

1.高亮提示目前正在编辑的块

正在编辑某个块时(不包括公式块、代码块等),明显的高亮提示

正在编辑.png

2.高亮提示鼠标悬浮块

当鼠标悬浮在某个块上时(不包括公式块、代码块等),稍淡的高亮提示

悬浮.png

3.高亮提示超级块

当鼠标悬浮在超级块内的任意一个子块上时,将高亮提示整个超级块的范围

超级块.png

JS:

document.addEventListener('selectionchange', function() { const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); const node = range.startContainer; let element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement; while (element && !element.classList.contains('protyle-wysiwyg')) { element = element.parentElement; } if (element && element.classList.contains('protyle-wysiwyg')) { const highlightedElements = element.querySelectorAll('.highlight'); highlightedElements.forEach(el => el.classList.remove('highlight')); let targetElement = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement; while (targetElement && (!element.contains(targetElement) || !targetElement.classList.contains('p'))) { targetElement = targetElement.parentElement; } if (targetElement && targetElement.classList.contains('p')) { targetElement.classList.add('highlight'); } } } });

CSS:

.sb:hover { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15), -2px -2px 6px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.1) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; } .p:hover { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15), -2px -2px 6px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.1) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; } .p.highlight { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.2) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; } .p.highlight:hover { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.2) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; }
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    23226 引用 • 93695 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    93 引用 • 624 回帖
3 操作
queguaiya 在 2024-12-22 01:22:00 更新了该帖
queguaiya 在 2024-12-22 00:57:17 更新了该帖
queguaiya 在 2024-12-22 00:55:36 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • queguaiya 1 1 赞同

    暗黑模式用这个 CSS,如果你需要超级块一直显示,把第一行的.sb:hover 改成.sb

    .sb:hover { box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.4), -2px -2px 6px rgba(255, 255, 255, 0.4), 0 0 12px rgba(255, 255, 255, 0.2) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; } .p:hover { box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.4), -2px -2px 6px rgba(255, 255, 255, 0.4), 0 0 12px rgba(255, 255, 255, 0.2) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; } .p.highlight { box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.8), -2px -2px 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; } .p.highlight:hover { box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.8), -2px -2px 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6) !important; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important; }
    1 回复
  • 其他回帖
  • MasterYS

    效果很炸裂,超级好看突出,谢谢

  • Mayrain

    这个超级好看,非常感谢!!!

  • queguaiya

    要改颜色,你需要改的是 css,如果不需要编辑的块高亮,直接把 js 全部删掉,如果需要超级块一直显示,把.sb:hover 改成.sb

  • 查看全部回帖