思源标记整张图片

本贴最后更新于 259 天前,其中的信息可能已经斗转星移

原贴 [已解决] 有没有 css 能显示 / 隐藏闪卡答案

// 添加颜色切换按钮 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); }

(不知道为啥标记快捷键能让图片也隐藏)

  • 思源笔记

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

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

    26416 引用 • 109881 回帖 • 1 关注
1 操作
maidang2233 在 2024-11-02 08:55:29 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • maidang2233
    作者

    现在的问题是标记的时候是全部图片都标记上的,可以在命名那加类似 xxx-1 来制定某张图片(假象,暂时还不知道怎么改代码)

    image.png

  • 其他回帖
  • maidang2233
    作者

    可能是录屏太卡了,字数也不少

    image.png

  • 为什么看起来卡卡的,你有多少笔记

    1 回复
  • maidang2233
    作者

    新代码改为了命名为 mark,所以输入 mark 就可以了

    image.png

推荐标签 标签

  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    172 引用 • 540 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 1 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    441 引用 • 1238 回帖 • 599 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    10 引用 • 15 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    108 引用 • 153 回帖
  • gRpc
    11 引用 • 9 回帖 • 104 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 767 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    53 引用 • 190 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 112 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 233 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    291 引用 • 4495 回帖 • 665 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    187 引用 • 832 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 106 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 742 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 392 关注
  • Visio
    1 引用 • 2 回帖 • 3 关注
  • AWS
    11 引用 • 28 回帖 • 6 关注
  • OneNote
    1 引用 • 3 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖 • 4 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 2 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 642 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    591 引用 • 3528 回帖 • 1 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 407 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 40 关注