想问下大家,Obsidian 可以实现思源笔记的这个功能嘛




代码如下


/* ----------方法1如果希望取消挖空效果,请删除这段代码 Start---------------- */
/* 修改高亮为挖空效果,但是预览模式关闭(毕竟需要导出) */
.protyle-wysiwyg mark{
    color: transparent;
    transition: color 0.1s ease-in-out;
}
.protyle-wysiwyg [data-node-id] [spellcheck="false"] mark:hover{
    color: var(--b3-protyle-inline-mark-color);
    transition: color 0.2s ease-in-out;
}
/* -------------如果希望取消挖空效果,请删除这段代码 END----------------------------------- */

/* ------------------ 方法2自定义属性 ----------------------- */
.protyle-wysiwyg [data-node-id][custom-function="挖空"]{
    border: 2px dashed  rgba(92, 135, 138, 0.322);
    background-color: rgba(92, 135, 138, 0.322);
    background-image: -webkit-gradient(linear,
    0 0, 100% 100%,
    color-stop(.25, rgba(255, 255, 255, .2)),
    color-stop(.25, transparent),
    color-stop(.5, transparent),
    color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)),
    color-stop(.75, transparent),
    to(transparent));
    background-size: 10px 10px;
    border-radius: 0.5em;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    transform: rotateX(180deg); 
}

.protyle-wysiwyg [data-node-id][custom-function="挖空"] * {
    opacity: 0;
}


.protyle-wysiwyg [data-node-id][custom-function="挖空"]:focus-within {
    transform: rotateX(0deg); 
    color: var(--b3-theme-on-background);
    border-color: var(--b3-theme-on-background);
    background-color: transparent;
    background-image: none;
}

.protyle-wysiwyg [data-node-id][custom-function="挖空"]:focus-within * {
    opacity: 1;
}

.protyle-wysiwyg .protyle-wysiwyg__embed [data-node-id][custom-function="挖空"]:hover{
        animation: rotateHide 0.7s ease forwards;
}

.protyle-wysiwyg .protyle-wysiwyg__embed [data-node-id][custom-function="挖空"]:hover * {
    opacity: 1;
    transition: opacity 0.7s ease;
}