前置说明

用了一个 css 样式，让标题显示数字层级。
习惯文件标题用一级标题，也就是文章内容的标题默认是二级标题。

需求

想要清晰地看清文章结构（大纲视图）。
希望左侧大纲保持展开。

问题点

大纲模式只认标题。且不认列表内的标题。
用标题模式来写（即上半部份的写法）。
- 因为各级标题的大小区分并不明显，不易区分各级标题。虽然可以用 css 去指定颜色区别，但感觉也不够明显。希望有整个标题下属内容，一起缩进的显示。类似代码编辑器括号内{}的效果。子内容缩进个四格。
- 另一个问题是标题模式下，调整层级不便。比如一个三级标题下有若干个四级标题，我如果想把三级升二级去掉一个#就可以了，但下属的所有四级标题也都要改一遍。如果是列表模式，只要一起框选去掉一级缩进就好了。
- 标题模式还有一个问题是层级有限制。
用列表模式（下半部分）
- 有缩进层级。但无法在大纲视图显示。如果内文内容量大，还是需要大纲视图。
跟思维导图软件的互通
- xmind 之类的大部分用的都是标题模式来划分层级。幕布用的好像是列表模式。

请问

有什么 app 能更好地满足编辑同时查看大纲的需求。
如果还是用 typora，那么为了大纲，还是考虑用标题模式。那么标题模式下 css 有没有可能实现下属内容的分级缩进？因为列表本身是嵌套的，css 比较好写。标题模式没想好怎么写。
编辑时左侧大纲有时会自动缩起来（ mac 版），有办法让它保持展开嘛？

JCZ2MkKb5S8ZX9pq

2021-01-31 23:34:18 +08:00

@old9 大佬麻烦看一眼这个。

简单写了一个缩进，但是遇到点问题。

h2 {
margin-left: 0rem !important
}
h2~* {
margin-left: 0rem;
}

h3 {
margin-left: 1rem !important
}
h3~* {
margin-left: 1rem;
}

h4 {
margin-left: 2rem !important
}
h4~* {
margin-left: 2rem;
}

h5 {
margin-left: 3rem !important
}
h5~* {
margin-left: 3rem;
}

h6 {
margin-left: 4rem !important
}
h6~* {
margin-left: 4rem;
}

----------

这样大致上可用，如果文章结构正常按层级来问题不大。
但遇到的问题是，有些情况下缩进错误。效果见图

https://s3.ax1x.com/2021/01/31/yVuRkq.png

比如：

## 2. 二级标题
### 2.1 四级标题
## 3. 二级标题
正文

在这样的结构下，期望是 [3. 二级标题] 后面的正文跟随
h2~* {
margin-left: 0rem;
}
这个属性。但是会被后面
h3~* {
margin-left: 1rem;
}
这个属性给覆盖掉。
极端情况下，比如上面如果出现一个 h6，那后面不管 h 几下面就都缩进 4rem 了。
请问有没有什么好的方法。

另外 typora 自动计数这个也是第一次看到，不知道有否有类似的原理可以利用。打断一下继承啥的
https://support.typora.io/Auto-Numbering/

关于 typora 的显示优化问题

前置说明

需求

问题点

请问