obsidian 折腾记录 - 列表转树状表格 obsidian 版

一、前情提要

啊，很多用过思源的都知道，思源的列表在很多主题中，是可以显示为树状表格的,就像这样：

用来做一些树状分类的内容的时候还挺好用的，而实际上它还是一个列表，怎么弄的我就不说了，反正这回说的是 obsidian 嘛。。。。。

obsidian 也有很多表格插件，不过玩法不嫌多，弄一个纯 css 的列表表格算了。

二、原理

1、用 border 和 outline 模拟表格线

我这里要的其实只是视觉上看起来像表格，所以就需要一个东西用来显示表格线。

那什么东西能在 css 里面显示表格线呢？

显然最方便的就是 border 和 outline 了。

所以就用他们来搞这个吧。

2、用 callout 来限定转化范围

其实之前我弄思源的列表表格的时候就想给 obsidian 也弄个差不多的，不过因为 obsidian 没有办法很好的限定范围就算了。

但是最近版本的 obsidian 多了一个 callout，说白了其实就是把有特殊标记的引用块渲染成其他样式。

欸，那用这个不就可以限定范围了嘛~~~。

之后要实现用 css 干点啥其它的的时候我多半也会用 callout 了。

三、实现

代码其实很简单的，就是描边描边，至于颜色啥的就自己试试吧，反正我自己是看到不对劲就改改，没有就不改。。。。。。

/*使用一个选择器选择列表*/
/*用一个callout类型限定范围*/
/*然后就是描边描边描边*/

.markdown-preview-sizer .callout[data-callout="listtable"] ，
.markdown-preview-sizer .callout[data-callout="listtable"] ul ,
.markdown-preview-sizer  .callout[data-callout="listtable"] li ul{
    border-style: solid;
    border-width: 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: 0px !important;
    width: 100%;
    height: inherit !important;
    display: table-column-group;
    outline: solid rgb(255, 255, 255) 1px;
    overflow-block: hidden;
}
.markdown-preview-sizer .callout[data-callout="listtable"]  li{
    font-size: large !important;
    border-style: solid;
    border-width: 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: 0px !important;
    width: 100% !important; 
    min-height: 36px;
    display: -webkit-flex;
    outline: solid rgb(255, 255, 255) 1px;
    overflow-x: auto;
}

.markdown-preview-sizer .callout[data-callout="listtable"] .p {
    width: min-content;
    min-width: 200px;
    margin-right: 0px;
    margin-left: 0px;
    display: table-cell;
}

.markdown-preview-sizer .callout[data-callout="listtable"]  li::first-line *{
    width: 100% !important;
}

.markdown-rendered .callout[data-callout="listtable"] .list-bullet{
    float: none;
    margin-left: -0;
    display: none;
}

.callout[data-callout="listtable"] ul{
    padding-left: 0% !important;
    border: solid rgb(255, 255, 255) 1px;

}
.callout[data-callout="listtable"] li{
    margin: 0 !important;
    padding: 0% !important;
}
.callout[data-callout="listtable"] li:only-of-type{
    min-height: 100% !important;
}
.callout[data-callout="listtable"] .list-collapse-indicator{
    display: none
}
.callout[data-callout="listtable"]  .has-list-bullet::before{
    display: none !important;
}

昨天晚上跟 obsidian 群的老哥聊天的时候说到表格又正好无聊就临时实现了一下，应该有些代码是冗余的，自己试试去掉吧。

效果嘛，就像这样：

单元格宽度好像需要调整一下，算了先不管了，反正又不是不能用。

啊对了，其实最开头那个表格也是 obsidian 的列表转的，不知道有人看出来没。。。。