让 obsidian 看起来像 typora GitHub 主题的 css

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;
}

可以参考下,自己改看效果,从英文应该大致能猜出来意思。也欢迎提供更好的改法。

行距和字体变大了,降低了文字容量。

对,默认的看起来好挤,行距是调这个

--list-spacing