Obsidian各级标题CSS美化

最近用上了obsidian来汇总各类笔记、文章。之前一直用金山文档,因为看重word等office格式的通用性。但是最近发现金山云文档下载文件夹(批量下载)需要会员,真是上传容易下载难。它不是不让你下,而是你之前上传得文件夹有多爽快,现在要一个一个下载就要多狼狈。

思前想后,以后数据不能再交给各种各样的云了,一定需要可以提供本地存储的才行。

言归正传,obsidian是用上了,免不了各种插件主题一番弄。而主题也难免有各种不如意的地方,obsidian本质上是HTML,所以也是可以通过自定义css配合相应的主题来实现美化的。

操作方法

\.obsidian\snippets文件夹中新建css,而后在obsidian-设置-外观设置最下面启用你刚刚新建的css类。即可通过该文件对页面进行修改。以下为各级标题的css。

#标题
.cm-sizer .inline-title{
}
#正文
.cm-contentContainer{
}
#一级标题
.cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-1.cm-line, .markdown-rendered h1{
}
#二级标题
.cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-2.cm-line, .markdown-rendered h2{
}
#三级标题
.cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-3.cm-line, .markdown-rendered h3{
}
#四级标题
.cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-4.cm-line, .markdown-rendered h4{
}

在相应的位置上填入需要的css代码即可对页面进行自定义设置。如果你不了解css代码,可以通过chatgpt等用描述文字进行生成。

文章信息

作者:Byuc
来源:龙渊 - lrach.com
文章版权归作者所有,未经允许请勿转载。
点赞
  1. M.Talen说道:

    好文,用了这么久Obsidian了,才知道居然能改样式。 :rolleyes:
    但是这个是不是只在当前库生效,有办法让新建的库都采用自定义样式吗?

    1. Byuc说道:

      只要配置文件里面\.obsidian\snippets里面有你自定义的css,而且在外观设置上是打开的。就可以在新建的库中采用。这种方法一般是用于对主题还有不满意的地方,自己自定义修改。

      1. M.Talen说道:

        明白了。主题我并没有不满意,但看到你的文章我有一个想法。我的博客框架为hexo,文章的页面效果需要预览或者推送才能知道,所以我在想能不能通过修改ob的css与博客文章页面css一致来呈现页面效果,省了预览的麻烦。 :lol:

        1. Byuc说道:

          如果你Hexo博客上也是严格遵循md语法来写文章的话,的确ob和Hexo可以做到“差不多”一致的呈现效果。但是如果你是想通过修改ob的css与博客文章页面css来呈现,你还不如在本地搭一套hexo呢。毕竟ob的css类和网页的大有不同。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注