diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidain\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\346\226\207\344\273\266\345\244\271\345\233\276\346\240\207.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidain\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\346\226\207\344\273\266\345\244\271\345\233\276\346\240\207.md" index d8acf2981..9112ca8e3 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidain\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\346\226\207\344\273\266\345\244\271\345\233\276\346\240\207.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidain\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\346\226\207\344\273\266\345\244\271\345\233\276\346\240\207.md" @@ -15,7 +15,7 @@ modified: 20230905153454 ## 引言 自定义优化文件管理器中的文件夹样式图标 - +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 实践 ![cover](https://cdn.pkmer.cn/images/image-20230718005419020.png!pkmer) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Calendar\346\217\222\344\273\266\347\232\204\346\240\267\345\274\217\344\277\256\346\224\271.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Calendar\346\217\222\344\273\266\347\232\204\346\240\267\345\274\217\344\277\256\346\224\271.md" index 31899854b..4b5020bba 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Calendar\346\217\222\344\273\266\347\232\204\346\240\267\345\274\217\344\277\256\346\224\271.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Calendar\346\217\222\344\273\266\347\232\204\346\240\267\345\274\217\344\277\256\346\224\271.md" @@ -17,7 +17,7 @@ modified: 20230905152858 - 根据笔记 yaml 区域的 tag 内容，在日历展示不同的图标，比如把 tags 中的 emoji 符号展示在日历中。 - tags 值包含 flagged 显示星标 - 周末背景色加深 - +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 实现效果 ![image.png](https://cdn.pkmer.cn/images/202305042319386.png!pkmer) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Callout\346\240\267\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Callout\346\240\267\345\274\217.md" index 933a8bd01..ec1fa5c30 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Callout\346\240\267\345\274\217.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Callout\346\240\267\345\274\217.md" @@ -15,7 +15,7 @@ modified: 20230610160256 ## 概述 Obsidian 的 callout 因为可以自定义 class 所以配合 css 可以实现各种样式，属于 DIY 比较丰富的。下面举几个 callout 的改造例子，抛砖引玉。 - +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 样式举例 ### 更改图标 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Canvas\346\240\267\345\274\217\347\232\204\344\277\256\346\224\271\345\217\212\345\242\236\345\274\272\345\215\241\347\211\207\347\232\204\346\230\276\347\244\272\346\225\210\346\236\234.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Canvas\346\240\267\345\274\217\347\232\204\344\277\256\346\224\271\345\217\212\345\242\236\345\274\272\345\215\241\347\211\207\347\232\204\346\230\276\347\244\272\346\225\210\346\236\234.md" index 0acba5adb..22e540e07 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Canvas\346\240\267\345\274\217\347\232\204\344\277\256\346\224\271\345\217\212\345\242\236\345\274\272\345\215\241\347\211\207\347\232\204\346\230\276\347\244\272\346\225\210\346\236\234.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Canvas\346\240\267\345\274\217\347\232\204\344\277\256\346\224\271\345\217\212\345\242\236\345\274\272\345\215\241\347\211\207\347\232\204\346\230\276\347\244\272\346\225\210\346\236\234.md" @@ -14,8 +14,9 @@ modified: 20230723164619 **Canvas 样式的修改及增强卡片的显示效果**： -![Pasted image 20230722052842](https://cdn.pkmer.cn/images/Pasted%20image%2020230722052842.png!pkmer) +![Obsidian样式-Canvas样式的修改及增强卡片的显示效果|1000](https://cdn.pkmer.cn/images/Pasted%20image%2020230722052842.png!pkmer) +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## Canvas 卡片局部 CSS 设置 ### 卡片的 label 的 CSS 设置 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-canvas\347\231\275\346\235\277\345\215\241\347\211\207\344\270\255\346\226\207\345\255\227\345\261\205\344\270\255.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-canvas\347\231\275\346\235\277\345\215\241\347\211\207\344\270\255\346\226\207\345\255\227\345\261\205\344\270\255.md" index 3846e4c21..9cd5098d7 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-canvas\347\231\275\346\235\277\345\215\241\347\211\207\344\270\255\346\226\207\345\255\227\345\261\205\344\270\255.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-canvas\347\231\275\346\235\277\345\215\241\347\211\207\344\270\255\346\226\207\345\255\227\345\261\205\344\270\255.md" @@ -16,6 +16,7 @@ modified: 20230623102841 Obsidian 白板是去年末出来的新特性，凭借着极简的操作和易用的特性，受到了很多人喜爱。但是做为刚诞生的不久的功能，那么肯定会有一些“差强人意”的地方，比如没有各种自定义外观的设置。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 样式设置 下面的方法可以帮助你调整白板中卡片的文字对齐情况，比如使用居中对齐方式 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\344\277\256\346\224\271\345\206\205\351\223\276\347\232\204\351\223\276\346\216\245\351\242\234\350\211\262.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\344\277\256\346\224\271\345\206\205\351\223\276\347\232\204\351\223\276\346\216\245\351\242\234\350\211\262.md" index 90c157efc..d64619ac8 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\344\277\256\346\224\271\345\206\205\351\223\276\347\232\204\351\223\276\346\216\245\351\242\234\350\211\262.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\344\277\256\346\224\271\345\206\205\351\223\276\347\232\204\351\223\276\346\216\245\351\242\234\350\211\262.md" @@ -18,6 +18,7 @@ modified: 20230619201503 但是默认主题的样式可能让你觉得不够习惯，如何自定义内链的样式呢？ +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 方法 1. 利用 Obsidian 特性，在设置 - 外观 中，直接调整 主题色，来实现切换内链链接的目的 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\246\202\344\275\225\350\256\251\346\217\222\345\205\245\347\254\224\350\256\260\344\270\255\347\232\204\345\233\276\347\211\207\346\260\264\345\271\263\345\261\205\344\270\255.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\246\202\344\275\225\350\256\251\346\217\222\345\205\245\347\254\224\350\256\260\344\270\255\347\232\204\345\233\276\347\211\207\346\260\264\345\271\263\345\261\205\344\270\255.md" new file mode 100644 index 000000000..9bab4bd12 --- /dev/null +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\246\202\344\275\225\350\256\251\346\217\222\345\205\245\347\254\224\350\256\260\344\270\255\347\232\204\345\233\276\347\211\207\346\260\264\345\271\263\345\261\205\344\270\255.md" @@ -0,0 +1,27 @@ +--- +uid: 20240119105759 +title: Obsidian 样式：如何让插入笔记中的图片水平居中 +tags: [Obsidian, 排版, 图片] +description: Obsidian 样式：如何让插入笔记中的图片水平居中 +author: OS +type: other +draft: false +editable: false +modified: 20240119110532 +--- + +# Obsidian 样式：如何让插入笔记中的图片水平居中 + +## 概述 + +这是不少同学在 PKMer 交流群问到的问题，这种排版方式也很符合很多同学在日常办公或者网页浏览时候常见的布局结构。所以把这段 CSS 固化下来，大家自己使用。 + +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] + +```CSS +div.internal-embed.media-embed.image-embed{ + display: flex; + justify-content: center; + align-items: center; +} +``` \ No newline at end of file diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\273\272\347\253\213\344\271\246\347\261\215\347\224\265\345\275\261\347\232\204\345\215\241\347\211\207\345\214\226\350\247\206\345\233\276.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\273\272\347\253\213\344\271\246\347\261\215\347\224\265\345\275\261\347\232\204\345\215\241\347\211\207\345\214\226\350\247\206\345\233\276.md" index 8eba2aeb5..51f990c42 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\273\272\347\253\213\344\271\246\347\261\215\347\224\265\345\275\261\347\232\204\345\215\241\347\211\207\345\214\226\350\247\206\345\233\276.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\273\272\347\253\213\344\271\246\347\261\215\347\224\265\345\275\261\347\232\204\345\215\241\347\211\207\345\214\226\350\247\206\345\233\276.md" @@ -18,6 +18,7 @@ Obsidian 被很多人认为是“All in one”的绝佳选择，抛开主观感 但是很多人因为不太容易入门折腾，对别人效果心驰神往，又对高门槛望而却步。比如今天要介绍的，将书籍、电影生成卡片墙。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 使用 很多人有这样的需求，详细是看到 Minimal 和 Blue-Topaz 的一些示例库，其中好看的卡片墙。 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\276\205\345\212\236\345\256\214\346\210\220\346\240\267\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\276\205\345\212\236\345\256\214\346\210\220\346\240\267\345\274\217.md" index f0bb5087b..241d82dea 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\276\205\345\212\236\345\256\214\346\210\220\346\240\267\345\274\217.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\345\276\205\345\212\236\345\256\214\346\210\220\346\240\267\345\274\217.md" @@ -18,6 +18,7 @@ modified: 20230628210647 但是有些主题和样式总是不那么令人满意，下面内容就收集了相关的任务完成的想过效果信息 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 待办完成但是任务文字上没有删除线 这是一些主题，或者主题中某些特殊配置方案引起的。 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\346\240\267\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\346\240\267\345\274\217.md" index ebe450e36..e2e2999e0 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\346\240\267\345\274\217.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\346\240\267\345\274\217.md" @@ -16,6 +16,7 @@ modified: 20230703104612 Obsidian 自带的文件浏览器，样式单一，有很大的改造余地，通过 css 可以让文件夹变的更醒目更个性化。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 文件夹添加图标 根据自己的文件夹名称，把名称写到 css 中就可以自定义文件夹图标，其中文件夹图标使用的是 svg 格式，[iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/) 这里有很多图标可供选择。css 中 svg 图标需要转成 base64 格式才能正确解析，通过这个网页实现转换 [SVG to CSS converter | SVG Backgrounds](https://www.svgbackgrounds.com/tools/svg-to-css/) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\347\255\276\351\241\265Tab\346\240\267\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\347\255\276\351\241\265Tab\346\240\267\345\274\217.md" index b2c374db2..e950742d6 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\347\255\276\351\241\265Tab\346\240\267\345\274\217.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\347\255\276\351\241\265Tab\346\240\267\345\274\217.md" @@ -16,6 +16,7 @@ modified: 20230616143919 自从 Obsidian 实现了标签页后，美观度有一定的提升，标签页越来越像浏览器了，本文就是对标签页进行美化。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ### 按钮标签页样式 应用片段的效果如图，可以看到默认的标签页变成了按钮样式。 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\351\242\230\346\240\217\346\240\267\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\351\242\230\346\240\217\346\240\267\345\274\217.md" index b4fe5009f..7eb270cfe 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\351\242\230\346\240\217\346\240\267\345\274\217.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\351\242\230\346\240\217\346\240\267\345\274\217.md" @@ -16,6 +16,7 @@ modified: 20230616145408 Obsidian 默认的标题栏会占用一部分屏幕空间，对笔记本用户来说，希望标题栏保留功能的同时尽可能不占用空间。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ### 悬浮标题栏样式 (显示阅读图标) 应用片段的效果如图，可以看到默认的标题栏移到了左侧并处于悬浮状态。 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\211\271\346\256\212\346\240\207\347\255\276-\350\256\251Markdown\347\232\204\346\226\207\346\234\254\345\244\232\345\275\251\345\244\232\350\211\262.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\211\271\346\256\212\346\240\207\347\255\276-\350\256\251Markdown\347\232\204\346\226\207\346\234\254\345\244\232\345\275\251\345\244\232\350\211\262.md" index f407bfef8..06a5d5527 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\211\271\346\256\212\346\240\207\347\255\276-\350\256\251Markdown\347\232\204\346\226\207\346\234\254\345\244\232\345\275\251\345\244\232\350\211\262.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\211\271\346\256\212\346\240\207\347\255\276-\350\256\251Markdown\347\232\204\346\226\207\346\234\254\345\244\232\345\275\251\345\244\232\350\211\262.md" @@ -18,6 +18,7 @@ Obsidian 作为 md 文档编辑器，在编辑书写文本的时候，无法让 **“特殊标签”** ，这里是指类似 `#h/red` 这样的标签 [^1]。 直接给需要文字渲染预设的颜色，这样就省去了使用 html 的标签语法 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 效果 ![8c647c459bf32f92b2451ed69034c39.png](https://cdn.pkmer.cn/images/8c647c459bf32f92b2451ed69034c39.png!pkmer) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\270\213\345\275\223\345\211\215\350\241\214\351\253\230\344\272\256.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\270\213\345\275\223\345\211\215\350\241\214\351\253\230\344\272\256.md" index 18959cada..29f3f90a9 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\270\213\345\275\223\345\211\215\350\241\214\351\253\230\344\272\256.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\270\213\345\275\223\345\211\215\350\241\214\351\253\230\344\272\256.md" @@ -16,6 +16,7 @@ modified: 20230602191810 Obsidian 默认主题 在编辑模式下，没有当前行高亮功能，可以通过下面片段实现。为了达到更好的效果，可以在 Ob 中开启 `编辑器`-`显示行号` 设置项。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 样式效果 ![image.png](https://cdn.pkmer.cn/images/202305061135730.png!pkmer) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\273\243\347\240\201\345\235\227\346\230\276\347\244\272\350\241\214\345\217\267.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\273\243\347\240\201\345\235\227\346\230\276\347\244\272\350\241\214\345\217\267.md" index ae97e3034..3fb81d3ee 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\273\243\347\240\201\345\235\227\346\230\276\347\244\272\350\241\214\345\217\267.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\347\274\226\350\276\221\346\250\241\345\274\217\344\273\243\347\240\201\345\235\227\346\230\276\347\244\272\350\241\214\345\217\267.md" @@ -16,6 +16,7 @@ modified: 20230715010726 Obsidian 作为 md 文档编辑器，写代码块本来就不是强项，无法跟专业的代码编辑相比，比如代码块无法显示行号。本文通过 css 的方法实现在编辑模式下显示代码行号 ，但因为受限于 Obsidian 的渲染机制，如果代码长度超过一屏幕，代码行号会被重置，也算一个瑕疵。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 效果 ![image.png](https://cdn.pkmer.cn/images/202307141144679.png!pkmer) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\244\247\347\272\262\347\274\251\350\277\233\347\272\277\346\240\267\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\244\247\347\272\262\347\274\251\350\277\233\347\272\277\346\240\267\345\274\217.md" index 6b3c34efe..4d3f7355c 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\244\247\347\272\262\347\274\251\350\277\233\347\272\277\346\240\267\345\274\217.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\244\247\347\272\262\347\274\251\350\277\233\347\272\277\346\240\267\345\274\217.md" @@ -18,6 +18,7 @@ modified: 20230709151825 但是默认样式的大纲线略微有些纤细，在深色主题下可能不够明显，除了通过彩色大纲线进行优化外，还可以优化本身的粗细来实现。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 实践 - 可以选择一些带有大纲优化样式的主题 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\276\205\345\212\236\345\233\276\346\240\207.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\276\205\345\212\236\345\233\276\346\240\207.md" index 2c6396757..880180cd5 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\276\205\345\212\236\345\233\276\346\240\207.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211\345\276\205\345\212\236\345\233\276\346\240\207.md" @@ -16,6 +16,7 @@ modified: 20230709151216 `- [T] 示例待办样式` +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 效果 ![Pasted image 20230610160521](https://cdn.pkmer.cn/images/Pasted%20image%2020230610160521.png!pkmer) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\241\250\346\240\274\346\240\267\345\274\217\347\256\200\346\230\216\346\226\271\346\263\225.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\241\250\346\240\274\346\240\267\345\274\217\347\256\200\346\230\216\346\226\271\346\263\225.md" index 5300c5f58..f2b719e65 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\241\250\346\240\274\346\240\267\345\274\217\347\256\200\346\230\216\346\226\271\346\263\225.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\241\250\346\240\274\346\240\267\345\274\217\347\256\200\346\230\216\346\226\271\346\263\225.md" @@ -16,6 +16,7 @@ modified: 20230703133705 Markdown 的表格展示形式一般比较单一，有必要通过 CSS 实现加强 Markdown 的表格展示效果。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 样式举例 - 奇偶行背景色加深 diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\260\203\346\225\264\345\233\276\347\211\207\344\270\215\345\220\214\345\270\203\345\261\200\346\240\267\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\260\203\346\225\264\345\233\276\347\211\207\344\270\215\345\220\214\345\270\203\345\261\200\346\240\267\345\274\217.md" index 04ccdf071..d5c8c6664 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\260\203\346\225\264\345\233\276\347\211\207\344\270\215\345\220\214\345\270\203\345\261\200\346\240\267\345\274\217.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\260\203\346\225\264\345\233\276\347\211\207\344\270\215\345\220\214\345\270\203\345\261\200\346\240\267\345\274\217.md" @@ -1,18 +1,16 @@ --- uid: 20231202002300 -title: Obsidian 样式 - 调整图片不同布局样式 -tags: - - 图片 - - CSS自定义 -description: 将图片渲染为圆形或者控制图片在文本的左侧或者右侧，可组合。 +title: Obsidian 样式：调整图片不同布局样式 +tags: [图片, CSS自定义] +description: Obsidian 样式 - 调整图片不同布局样式，将图片渲染为圆形或者控制图片在文本的左侧或者右侧，可组合。 author: 余月鱼鸽 type: other draft: false editable: false -modified: 20231202002326 +modified: 20240119110622 --- -# Obsidian 样式 - 调整图片不同布局样式 +# Obsidian 样式：调整图片不同布局样式 ## 1.css 来源 @@ -50,7 +48,6 @@ modified: 20231202002326 > [!note] 3.两种效果混合使用 > 例：插入图片后，在图片名后面添加 `#O` 设置图片为圆形后，后面添加 `L` 可控制图片出现在左侧；后面添加 `R` 可控制图片出现在右侧；格式为：`![[DSC04693.jpg#OL|200x200]]` -> **具体效果如下**： diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\266\205\351\225\277\346\226\207\344\273\266\345\220\215\346\215\242\350\241\214.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\266\205\351\225\277\346\226\207\344\273\266\345\220\215\346\215\242\350\241\214.md" index d6c215b49..47e16a3ae 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\266\205\351\225\277\346\226\207\344\273\266\345\220\215\346\215\242\350\241\214.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\350\266\205\351\225\277\346\226\207\344\273\266\345\220\215\346\215\242\350\241\214.md" @@ -13,6 +13,7 @@ modified: 20230809123145 # Obsidian 样式：超长文件名换行或多行显示 倘若笔记的命名一直简短那得多爽，但这是个不可能的事情，当我们的笔记命名过于长，又不想让左侧边栏占据整体画面空间太多，这时候就可以考虑到让文件名换行。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] 可以采用以下独立片段（snippets css）： diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\347\275\221\345\235\200\345\211\215\350\207\252\345\212\250\345\212\240\345\233\276\346\240\207.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\347\275\221\345\235\200\345\211\215\350\207\252\345\212\250\345\212\240\345\233\276\346\240\207.md" index 755d5bf07..c9ef4007f 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\347\275\221\345\235\200\345\211\215\350\207\252\345\212\250\345\212\240\345\233\276\346\240\207.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\347\275\221\345\235\200\345\211\215\350\207\252\345\212\250\345\212\240\345\233\276\346\240\207.md" @@ -16,6 +16,7 @@ modified: 20230602192456 这个片段可以在预览文档时对网址识别，并加上网站的 Logo，提高网址的识别度。 +- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]] ## 样式 ![image.png](https://cdn.pkmer.cn/images/202305061057186.png!pkmer) diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md" index 7810e65c9..c3022e643 100644 --- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md" +++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md" @@ -81,6 +81,7 @@ Obsidian 还支持一种外部样式代码引用的方式。 - [[Obsidian样式-图片点击长按放大]] - [[Obsidian样式-调整图片不同布局样式]] +- [[Obsidian样式-如何让插入笔记中的图片水平居中]] ### callout