Obsidian 插件：Custom Classes
插件名片
概述
直接从您的笔记中为所选择的 Markdown 元素添加自己的 HTML 类。
原文出处
下面自述文件的来源于 Readme
Readme(翻译）
下面是 custom-classes 插件的自述翻译
Obsidian自定义类
一个简单的Obsidian插件，允许您直接从笔记中向选定的Markdown块添加自定义HTML类。
用法
您可以为以下内容添加自定义类：
整个块 (例如整个列表) → 在其前面的行上插入
`class: <customClass>`此Markdown
(编辑模式)将被渲染为
(实时预览/阅读模式)`class: fancy-list` - Lorem ipsum - Dolor - Amet consectetur<div class="fancy-list"> <ul> <li>Lorem ipsum</li> <li>Dolor sit</li> <li>Amet consectetur</li> </ul> </div>特定元素 (例如列表项) → 在其中插入
`class: <customClass>`此Markdown
(编辑模式)将被渲染为
(实时预览/阅读模式)- Lorem ipsum - Dolor sit `class: fancy-item` - Amet consectetur<div> <ul> <li>Lorem ipsum</li> <li class="fancy-item">Dolor sit</li> <li>Amet consectetur</li> </ul> </div>甚至两者都可以：
此Markdown
(编辑模式)将被渲染为
(实时预览/阅读模式)`class: fancy-list` - Lorem ipsum - Dolor `class: fancy-item` sit - Amet consectetur<div class="fancy-list"> <ul> <li>Lorem ipsum</li> <li class="fancy-item">Dolor sit</li> <li>Amet consectetur</li> </ul> </div>
ℹ️ 有关高级用法和/或信息，请参阅 常见问题解答 部分。
演示
以下是一些使用此插件的方法，可能会为您的工作流程提供灵感。
添加一个类到：
-
整个表格
此 markdown
(编辑模式)将被渲染
(实时预览/阅读模式)`class: mytable` | AAA | BBB | CCC | | --- | --- | --- | | 111 | 222 | 333 |<div class="mytable"> <table> <thead> <tr> <th>AAA</th> <th>BBB</th> <th>CCC</th> </tr> </thead> <tbody> <tr> <td>111</td> <td>222</td> <td>333</td> </tr> </tbody> </table> </div>
-
表格单元格
此 markdown
(编辑模式)将被渲染
(实时预览/阅读模式)| AAA | BBB | CCC | | --- | -------------------- | --- | | 111 | 222 `class: my-cell` | 333 |<div> <table> <thead> <tr> <th>AAA</th> <th>BBB</th> <th>CCC</th> </tr> </thead> <tbody> <tr> <td>111</td> <td class="my-cell">222</td> <td>333</td> </tr> </tbody> </table> </div>
-
Dataview 查询
此 markdown
(编辑模式)将被渲染
(实时预览/阅读模式)`class: my-dv-list` ```dataview LIST WHERE creation ```<div class="my-dv-list"> <div class="block-language-dataview"> <ul class="dataview list-view-ul"> // 您的查询结果 // <li>...</li> // ... </ul> </div> </div>
-
标题
此 markdown
(编辑模式)将被渲染
(实时预览/阅读模式)`class: important-title` ### 我的超级标题<div class="important-title"> <h3>我的超级标题</h3> </div>
-
一个引用块
这个 markdown
(编辑模式)将被渲染为
(实时预览/阅读模式)`class: interesting-quote` > Lorem ipsum dolor sit amet<div class="interesting-quote"> <blockquote> <p>Lorem ipsum dolor sit amet</p> </blockquote> </div>
-
内联格式化
这个 markdown
(编辑模式)将被渲染为
(实时预览/阅读模式)I'm a **bold text `class: big`** and _`.small` me an italic one_<p>I'm a <strong class="big">bold text</strong> and <em class="small">me an italic one</em></p>
展示 / 集成
该部分展示了一些人们如何将 Custom Classes 插件集成到他们的工作流中的示例。
请随时通过 开启一个问题 来分享你的示例。
Lila的前置元数据 :cherry_blossom:
在这里，Custom Classes 插件被用来将 Markdown 无序列表 (
ul) 渲染为一个干净的前置元数据块。→ 源码: https://forum.obsidian.md/t/a-frontmatter-that-finally-supports-links-lilas-frontmatter/53087
这个Markdown
(编辑模式)将被渲染为
(实时预览 / 阅读模式)`class:meta` - creation:: 2023-01-21T18:55:12 - author:: [[John Doe]] - parents:: [[Note]], [[Another note]] - status:: #MayBePartial主题 暗色 
亮色 
❔ 常见问题解答
为什么不使用 <div class="my-custom-class"> 代替？
在 Obsidian 中，将 Markdown 元素包装在
div中会破坏其在实时预览和阅读模式下的渲染，并阻止在编辑模式下点击链接。此外，将 HTML 写入笔记会使其不易阅读。借助 Custom Classes 插件，您可以在不破坏任何内容的情况下，以纯 Markdown 格式添加自定义类！ :tada:
它能在其他 Markdown 编辑器中使用吗？
由于此插件专属于 Obsidian，自定义类将不会在其他编辑器中应用。
但是，由于自定义类块（
`class: ...`）是简单的 Markdown 内联代码块，它们将在其他 Markdown 编辑器中正确呈现为代码块。
是否可以一次添加多个类？
是的，只需用逗号分隔每个类：
此 Markdown
(编辑模式)将被渲染为
(实时预览 / 阅读模式)
`class: first, second, third-one` 我是段落，你呢？
<div class="first second third-one"> <p>我是段落，你呢？</p> </div>
它在实时预览模式下工作吗？
是的，此插件完全支持实时预览模式。
顺便说一下，由 Custom Classes 块定位的元素在阅读模式和实时预览模式下以完全相同的方式呈现，使您能够编写在任何地方都有效的 CSS。
class: 前缀太长了，有没有简写版本？
是的，Custom Classes 插件还将以
cls:或.开头的内联代码块视为自定义类块。因此，
`cls: wow`和`.wow`等效于`class: wow`.
安装
- 进入 Obsidian 的设置页面的 Community Plugins 部分
- 点击 浏览 并搜索 “Custom classes”
- 选择 Custom Classes 插件并点击 安装
- 安装完成后，点击 启用
- 尽情使用！
灵感
这个插件最初是受到 Obsidian Stylist 插件的启发，但已经完全重写以：
- 专注于添加自定义的 HTML 类，
- 支持实时预览模式，
- 修复一些重大错误（例如，如果目标块被修改然后重新渲染，类没有被正确地附加）。
贡献
请参阅 CONTRIBUTING.md。
