Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区

样式效果

通过修改 Html 语法中的 <details>评论区</details> 语法的样式来使它更像一个评论信息。

注意事项

如何实现渲染

如果 <details> 在一个段落中可以渲染包括图片甚至是嵌入文档的渲染：

源码模式：

阅读模式：

如何快捷输入

注释选中的文本 by QuickAdd

效果

配置

配置 QuickAdd 的 Capture：

=={{selected}}==<details>#Details<br>{{mvalue}}</details>

配置高级输入框 (可添加标签) by QuickAdd + ModalForm

效果

配置

配合 QuickAdd + ModalForm 这 2 个插件使用，ModalForm 的只需安装即可，QuickAdd 配置 Capture：

```js quickadd
let selection = window.getSelection();
selection = selection.toString();
const modalForm = app.plugins.plugins.modalforms.api;
const values = {
    Details: selection,
    Tags: ["Details"]
};
const result = await modalForm.openForm({
    title: "输入Details注释",
    fields: [
        {
            name: "Details",
            description: selection,
            label: "输入注释",
            input: {
                type: "textarea"
            }
        },
        {
            name: "Tags",
            description: "添加标签到开头",
            input: { type: "tag" }
        },
    ]
}, {
    values: values
});
let detailsText = result.getValue('Details').value;
let tags = result.getValue('Tags').value;
const tagsStr = "#" + tags.join(" #");

let output;
if (selection) {
    output = `==${selection}==<details>${tagsStr}<br>${detailsText}</details>`;
} else {
    output = `<details>${tagsStr}<br>${detailsText}</details>`;
}
return output;
```

CSS 代码

/* ! details 样式修改 */
/* 2023-12-13 details样式修改 */
.theme-light .markdown-preview-view details {
  background-color: rgba(252, 255, 203, 0.9);
}
.theme-dark .markdown-preview-view details {
  background-color: rgba(56, 55, 56, 0.9);
}

.markdown-source-view.mod-cm6 details {
  display: none;
}

/* 在better-search-views中正常显示 */
.markdown-preview-view:not(.better-search-views-file-match.markdown-rendered)
  details {
  position: absolute;
  font-weight: lighter;
  font-size: smaller;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  padding: 2px 3px 2px 3px;
  display: block;
  transform: translateY(-3rem);
  z-index: 1;
  border-inline-start: 5px solid;
  white-space: pre-wrap;
}

.markdown-preview-view:not(.better-search-views-file-match.markdown-rendered)
  details[open] {
  max-width: 500px;
  max-height: 400px;
  overflow: auto;
  z-index: 2;
}

details:not(details[open]) {
  right: 1rem;
  min-width: 20px;
}

:not(.callout-content)details[open] {
  max-width: 400px;
  z-index: 2;
}

details[open],
.popover.hover-editor details,
:not(.callout-conten) details {
  right: 1rem;
}

/* 在callout中不生效 */
.callout-content details[open] {
  transform: translateX(1rem) !important;
  position: relative !important;
  max-width: unset !important;
}

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。