-
Notifications
You must be signed in to change notification settings - Fork 323
fix: improve counter reset compatibility for headings and TOC #190
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
fix: improve counter reset compatibility for headings and TOC #190
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR enhances the counter reset logic for headings and the table of contents (TOC) to ensure proper numbering even when higher-level headings are missing, while retaining fallback support for older browsers.
- Added
counter-reset
declarations alongside existingcounter-set
in TOC styles for broader compatibility. - Mirrored these
counter-reset
changes in heading styles to reset lower-level counters at each heading level. - Preserved legacy
counter-set
rules as a fallback mechanism.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
File | Description |
---|---|
src/scss/toc.scss | Inserted counter-reset for toc-h2 –toc-h6 and kept counter-set for fallback support in TOC styles. |
src/scss/heading.scss | Added counter-reset alongside counter-set for heading-h2 –heading-h6 in global and per‐heading rules. |
Comments suppressed due to low confidence (1)
src/scss/heading.scss:57
- It would be valuable to add tests—such as automated stylelint rules or visual snapshot tests—to verify that the new
counter-reset
logic produces the correct numbering when parent headings are omitted.
counter-reset: heading-h2 heading-h3 heading-h4 heading-h5 heading-h6;
src/scss/toc.scss
Outdated
counter-reset: toc-h2 toc-h3 toc-h4 toc-h5 toc-h6; | ||
// 保留 counter-set 作为备用支持 | ||
counter-set: toc-h2 0 toc-h3 0 toc-h4 0 toc-h5 0 toc-h6 0; | ||
} | ||
.md-toc-h2 { | ||
// 确保 h2 重置 h3 及其后续计数器 | ||
counter-reset: toc-h3 toc-h4 toc-h5 toc-h6; | ||
counter-set: toc-h3 0 toc-h4 0 toc-h5 0 toc-h6 0; | ||
} | ||
.md-toc-h3 { | ||
counter-reset: toc-h4 toc-h5 toc-h6; | ||
counter-set: toc-h4 0 toc-h5 0 toc-h6 0; | ||
} | ||
.md-toc-h4 { | ||
counter-reset: toc-h5 toc-h6; | ||
counter-set: toc-h5 0 toc-h6 0; | ||
} | ||
.md-toc-h5 { | ||
counter-reset: toc-h6; | ||
counter-set: toc-h6 0; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nitpick] The repeated counter-reset
and counter-set
declarations across each heading level introduce duplication. Consider extracting these into an SCSS mixin or using a loop over heading levels to reduce repetition and simplify future updates.
counter-reset: toc-h2 toc-h3 toc-h4 toc-h5 toc-h6; | |
// 保留 counter-set 作为备用支持 | |
counter-set: toc-h2 0 toc-h3 0 toc-h4 0 toc-h5 0 toc-h6 0; | |
} | |
.md-toc-h2 { | |
// 确保 h2 重置 h3 及其后续计数器 | |
counter-reset: toc-h3 toc-h4 toc-h5 toc-h6; | |
counter-set: toc-h3 0 toc-h4 0 toc-h5 0 toc-h6 0; | |
} | |
.md-toc-h3 { | |
counter-reset: toc-h4 toc-h5 toc-h6; | |
counter-set: toc-h4 0 toc-h5 0 toc-h6 0; | |
} | |
.md-toc-h4 { | |
counter-reset: toc-h5 toc-h6; | |
counter-set: toc-h5 0 toc-h6 0; | |
} | |
.md-toc-h5 { | |
counter-reset: toc-h6; | |
counter-set: toc-h6 0; | |
} | |
@include reset-counters(toc-h2, toc-h3, toc-h4, toc-h5, toc-h6); | |
} | |
@for $i from 2 through 6 { | |
.md-toc-h#{$i} { | |
@include reset-counters( | |
#{'toc-h' + ($i + 1)}, | |
#{'toc-h' + ($i + 2)}, | |
#{'toc-h' + ($i + 3)}, | |
#{'toc-h' + ($i + 4)} | |
); | |
} | |
} |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@copilot 真是酷, 我都想不到这种SCSS写法。不过感觉为了简明易懂,还是不要循环了,直白写吧)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Keldos-Li 果然 llm 能够想到的解法更优,不过确实这样的话维护起来后面如果语法不熟读着可能就不好理解一些💡
我明确了一下注释。在新版的typora下这么写在我的mac上测试应该是可行的 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
感谢。
辛苦看下,是否把行末从 LF 改成 CRLF 了,导致 diff 里看起来所有行都改了。如果是这样,辛苦改回原样。
很有可能⊙∀⊙!晚一点我就去看一下,感谢指点🤩 |
感谢 @RalXYZ 指点,确实是我忽略了行尾符🫡,已经修改完毕! |
21ab441
to
e21d725
Compare
@returnToInnocence 我又做了些改动,辛苦看下现在在你的老版本的 typora 上,编号是否符合预期 |
对应 fix issue
PR 描述
优化标题和目录样式,增强计数器兼容性。更新标题和目录的计数器重置逻辑,确保在缺失上级标题时能够正确递增。保留备用支持以提高兼容性。
测试验证如下
目录测试

标题测试
