关于 typora 的显示优化问题

[JCZ2MkKb5S8ZX9pq]

前置说明

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

需求

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

问题点

• 大纲模式只认标题。且不认列表内的标题。

• 用标题模式来写（即上半部份的写法）。

  • 因为各级标题的大小区分并不明显，不易区分各级标题。虽然可以用 css 去指定颜色区别，但感觉也不够明显。希望有整个标题下属内容，一起缩进的显示。类似代码编辑器括号内{}的效果。子内容缩进个四格。
  • 另一个问题是标题模式下，调整层级不便。比如一个三级标题下有若干个四级标题，我如果想把三级升二级去掉一个#就可以了，但下属的所有四级标题也都要改一遍。如果是列表模式，只要一起框选去掉一级缩进就好了。
  • 标题模式还有一个问题是层级有限制。

• 用列表模式（下半部分）

  • 有缩进层级。但无法在大纲视图显示。如果内文内容量大，还是需要大纲视图。

• 跟思维导图软件的互通

  • xmind 之类的大部分用的都是标题模式来划分层级。幕布用的好像是列表模式。

请问

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

[JCZ2MkKb5S8ZX9pq]

@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/

[JCZ2MkKb5S8ZX9pq]

比如有没有写法是
h2~*:not(h3,h4,h5,h6)
h3~*:not(h2,h4,h5,h6)
......

类似这种效果的？请问有这种的嘛？ @old9

[old9]

就是扁平的 HTML 结构，然后希望 CSS 写出嵌套的缩进效果是吧？这个好像没什么好方法……或者上 JS

[JCZ2MkKb5S8ZX9pq]

@old9 嗯，是没想到啥好方法。
它 css 是作为 theme 载入的，对 js 没啥太好的支持。