V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
JCZ2MkKb5S8ZX9pq
V2EX  ›  CSS

关于 typora 的显示优化问题

  •  
  •   JCZ2MkKb5S8ZX9pq · 2021-01-31 18:45:53 +08:00 · 1741 次点击
    这是一个创建于 1152 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前置说明

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

    需求

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

    问题点

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

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

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

      • 有缩进层级。但无法在大纲视图显示。如果内文内容量大,还是需要大纲视图。
    • 跟思维导图软件的互通

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

    请问

    • 有什么 app 能更好地满足编辑同时查看大纲的需求。
    • 如果还是用 typora,那么为了大纲,还是考虑用标题模式。那么标题模式下 css 有没有可能实现下属内容的分级缩进?因为列表本身是嵌套的,css 比较好写。标题模式没想好怎么写。
    • 编辑时左侧大纲有时会自动缩起来( mac 版),有办法让它保持展开嘛?
    4 条回复    2021-02-02 22:09:59 +08:00
    JCZ2MkKb5S8ZX9pq
        1
    JCZ2MkKb5S8ZX9pq  
    OP
       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/
    JCZ2MkKb5S8ZX9pq
        2
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-31 23:36:24 +08:00
    比如有没有写法是
    h2~*:not(h3,h4,h5,h6)
    h3~*:not(h2,h4,h5,h6)
    ......

    类似这种效果的?请问有这种的嘛? @old9
    old9
        3
    old9  
       2021-02-02 16:21:08 +08:00
    就是扁平的 HTML 结构,然后希望 CSS 写出嵌套的缩进效果是吧?这个好像没什么好方法……或者上 JS
    JCZ2MkKb5S8ZX9pq
        4
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-02-02 22:09:59 +08:00
    @old9 嗯,是没想到啥好方法。
    它 css 是作为 theme 载入的,对 js 没啥太好的支持。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5434 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 351ms · UTC 08:42 · PVG 16:42 · LAX 01:42 · JFK 04:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.