思源笔记插件丨高亮挖空插件

插件地址：https://github.com/Achuan-2/siyuan-plugin-mark-hide

🤔 背景

在学习过程中，我们经常会遇到一些需要填空的题目，为了方便记忆，我们可以使用高亮挖空的方式来标记这些题目，这样我们在复习的时候就可以快速找到需要填写的内容。

‍

其实 Tsundoku 主题很早是支持高亮挖空的，但是后面由于思源笔记有了插件，就被我砍掉了，一直期待有大佬写一个高亮挖空插件，但是好像一直没看到。

​​

最近要准备博士研究生的英语课程考试，需要背 stock phase，闪卡适合有规律的复习，如果我想随时复习就不是那么方便，于是就迅速写了这样一个高亮挖空插件来帮助我复习。

✨ 功能

支持点击顶部按钮隐藏/显示高亮文字

​​

‍

开发笔记

添加 icon

​​

// 添加icon
this.addIcons(`<symbol id="iconMarkHide"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<path d="M134,100v34H26v-34h-12v46h132v-46h-12Z" style="fill: #212121;"/>
<path d="M62,89h36l8,21h14L87,30h-14l-33,80h14s8-21,8-21ZM80,43l14,36h-28l14-36Z" style="fill: #212121;"/>
</symbol>`);

添加顶部按钮

学习

• 发现 this.addTopBar 可以返回一个 topBarElement​，然后 click​函数里是可以直接对 topBarElement​进行样式修改的！
• 为了点击按钮，就隐藏高亮文字，直接给 body 添加一个属性 custom-highlight-hidden​，css 只对有 custom-highlight-hidden​的 body 进行作用，这样就不用 js 来 querySelectorAll​了！

// 添加顶部栏按钮
const topBarElement = this.addTopBar({
    icon: "iconMarkHide",
    title: this.i18n.hide,
    position: "right",
    callback: () => {
        if (topBarElement.style.backgroundColor === 'transparent' || !topBarElement.style.backgroundColor) {
            topBarElement.style.backgroundColor = "var(--b3-toolbar-hover)";
            document.body.classList.add('custom-highlight-hidden');
            topBarElement.setAttribute('aria-label', this.i18n.show);
        } else {
            topBarElement.style.backgroundColor = 'transparent';
            document.body.classList.remove('custom-highlight-hidden');
            topBarElement.setAttribute('aria-label', this.i18n.hide);
        }
    }
});

❤ 用爱发电

穷苦研究生在读ing，如果喜欢我的插件，欢迎给 GitHub 仓库点 star 和捐赠，这会激励我继续完善此插件和开发新插件。

​​