想问下大家,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;
}

好像最新的ZH编辑插件有这个功能。

差不多这样子,我把 ==高亮改成了你要的效果,背景色什么也可以自己定义。

:is(.markdown-preview-view, .markdown-rendered) mark {
  color: transparent !important;
  background-color: hsla(
    var(--text-highlight-bg-h-dark),
    var(--text-highlight-bg-s-dark),
    var(--text-highlight-bg-l-dark),
    var(--text-highlight-bg-a-dark)
  ) !important;
}

:is(.markdown-preview-view, .markdown-rendered) mark:hover {
  color: var(--text-highlight) !important;
}


4 个赞

想再问您一下,把这个复制成css片段再加载上是不是就可以了呀