【CSS Snippet】预览时隐藏高亮

  • 文档添加 cssclasses: preview-hide-mark-underline 属性,则此文档内高亮内容在预览时会显示为:这里是一些用来演示的文字,而在编辑模式下正常显示为高亮。
  • 文档添加 cssclasses: preview-hide-mark-brackets 属性,则此文档内高亮内容在预览时会显示为:(这里是一些用来演示的文字),而在编辑模式下正常显示为高亮。

应该可以用来用来辅助背题啥的。

样式代码

将如下代码保存到 .obsidian/snippets/HideHighlightWhenPreview.css 文件中(自行创建文件),然后在 Obsidian 设置——外观——代码片段中开启。记得在需要的笔记中添加上述对应属性。

/**
 * @name: Hide Highlight When Preview
 * @id: obsidian-hide-highlight-when-preview
 * @author: 稻米鼠
 * @description: Hide highlighted content during preview to help with memorization and self-testing.
 * @created: 2024-08-09 15:06:53
 * @updated: 2024-08-09 15:06:53
 * @version: 0.0.1
 */

.markdown-rendered.preview-hide-mark-underline mark {
  color: transparent;
  background-color: transparent;
  text-decoration: underline solid var(--text-normal);
}
.markdown-rendered.preview-hide-mark-brackets mark {
  color: transparent;
  background-color: transparent;
  &::before,
  &::after {
    color: var(--text-normal);
  }
  &::before {
    content: "(";
  }
  &::after {
    content: ")";
  }
}

注意

  • 两种样式不能同时使用
  • 不能同时使用其他高亮样式
©2022~2024 稻米鼠. Last build at 2024-10-12 00:00:34