css 新手,尽量让 obsidian 看起来像 typora GitHub 主题
代码保存成 css 文件,然后在 obsidian 的 Appearance / CSS snippets 中设置
quiet-outline 那部分是给 quiet-outline 这个插件用的,可以删掉,或者装一下这个插件
我用的 Windows Obdidian 最新版看起来不错
目前 typora 剩下的优势就是表格可以拖动行列,编辑方便了,还有可以打开任意路径的文件
body {
/* list 相关样式 */
--list-spacing: 0.3rem;
--list-marker-color: #545955;
/* 表格颜色交替 */
--table-row-alt-background: #f8f8f8;
/* 代码块颜色 */
--code-normal: var(--text-nornal);
--code-background: #f8f8f8;
/* 链接颜色 */
--link-external-color: #4183c4;
/* 导航栏字体 */
--nav-item-color: black;
--nav-item-weight: 500;
--nav-item-size: 97%;
/* 引用 */
--blockquote-border-thickness: 4px;
--blockquote-border-color: rgb(223, 226, 229);
}
/* quiet-outline */
.quiet-outline .n-tree-node-content {
font-weight: 500;
}
/* inline 代码块 */
span.cm-inline-code {
background-color: #f3f4f4 !important;
}
/* 标题 */
.HyperMD-header {
padding-bottom: 0.4rem !important;
border-bottom: 1px solid #eee;
}
/* 引用 */
.HyperMD-quote {
color: #777777;
}
/* 隐藏链接图片 */
.external-link {
padding-right: 0;
background-size: 0;
}
/* 代码块缩进 */
.HyperMD-codeblock {
tab-size: 4;
}
/* list 行首添加空白 */
.HyperMD-list-line > .cm-formatting-list:after {
content: ' ';
}
/* list 相关样式 */
/* https://forum.obsidian.md/t/style-bullets-in-lists-by-level/46152 */
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after {
/* Bullet */
height: 5.5px;
width: 5.5px;
border-radius: 50%;
background-color: var(--list-marker-color);
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after {
/* Hollow Bullet */
height: 4px;
width: 4px;
background-color: Transparent;
border-color: var(--list-marker-color);
border-style: solid;
border-radius: 50%;
border-width: 1.5px;
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet:after {
/* Solid Square */
height: 5.5px;
width: 5.5px;
border-radius: 0%;
background-color: var(--list-marker-color);
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet:after {
/* Hollow Square */
height: 4px;
width: 4px;
background-color: Transparent;
border-color: var(--list-marker-color);
border-style: solid;
border-radius: 0%;
border-width: 1.5px;
}
可以参考下,自己改看效果,从英文应该大致能猜出来意思。也欢迎提供更好的改法。