网站CSS；在 Github Pages Jekyll 页面上制作 Kramdown markdown 解析器，在复选框旁边呈现数字

Question

此次降价：

1. [x] Boot into Windows 11, which comes on the computer, and log in with your Microsoft account. Set it up as you wish.
1. [x] Run speed test in Windows. Here are my results: 
1. [ ] Install new RAM and SSD
1. [ ] Back up Bitlocker recovery key
1. [ ] configure BIOS
    1. [ ] Change from RAID to AHCI; this uses 3x less power when sleeping in Linux
    1. [ ] Disable Secure Boot

产生此输出：

您可以在我的个人网站上看到它：https://gabrielstaples.com/dell_xps15_9530_setup/#gsc.tab=0

我不喜欢缺少编号的子弹。我需要他们。这是我正在编写的分步教程。我希望它在所有内容旁边显示项目符号数字，就像这样，当然除了复选框之外。哎呀，我什至更喜欢在数字旁边显示

[x]

的输出，而不是有漂亮的复选框但没有数字：

---开始我想如何查看带项目符号的数字---

1. [x] 启动计算机附带的 Windows 11，并使用您的 Microsoft 帐户登录。按照您的意愿进行设置。
2. [x] 在 Windows 中运行速度测试。这是我的结果：
3. [ ] 安装新的 RAM 和 SSD
4. [ ] 备份 Bitlocker 恢复密钥
5. [ ] 配置 BIOS
   1. [ ] 从 RAID 更改为 AHCI；在 Linux 中睡眠时，这会减少 3 倍的电量
   2. [ ] 禁用安全启动

--- 我想看到的项目符号数字结束了 ---

有什么方法可以做到这一点（在我的 GitHub 页面上显示数字）？

再次，我的

_config.yml

文件有这样的设置：

markdown: kramdown

我am愿意更改降价解析器（如果有帮助的话），只要它们也能正确呈现我的目录。最后我检查了一下，

GFM

（Github Flavored Markdown）渲染器没有渲染目录（不过我应该再次检查）。

您可以在我的配置文件中看到：https://github.com/ElectricRCAircraftGuy/ElectricRCAircraftGuy.github.io/blob/main/_config.yml#L316-L324:

markdown: kramdown
# GS: use Github Flavored Markdown instead! Among other things, kramdown won't automatically turn a
# regular, pasted link into a clickable link, but GFM will! HOWEVER, kramdown DOES produce
# tables of contents with `toc: true`, but GFM will NOT! :(
# - Solution: just look for a Sublime Text plugin instead? This has the advantage of working on my
# regular GitHub readmes too, and NOT just on my GitHub pages site! See what you can find!
# UPDATE: see my answer here!:
# https://stackoverflow.com/questions/11948245/markdown-to-create-pages-and-table-of-contents/64656967#64656967
# markdown: GFM

更新：我在这里找到了官方 Kramdown 存储库：https://github.com/gettalong/kramdown。我也应该在那里开一个问题。

相关，但不重复，因为它询问的是 GFM，而不是 Kramdown：GitHub Flavored Markdown 的TaskList 不支持有序列表

Answer 1

将以下 CSS 添加到您的网站：

li.task-list-item {
  list-style-type: decimal;
}

Answer 2

这是我的最终解决方案：

.task-list {
  li {
    // Inherit from `ol` and `ul` lists, respectively: ordered lists are
    // numbered; unordered lists are bulleted; other options are `none`,
    // `decimal`, `initial`, etc. See here:
    // https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
    list-style-type: inherit;
  }

  .task-list-item-checkbox {
    margin-right: 0.5em; // This adds a small gap to the right of each 
                         // checkbox.
    opacity: 1;          // This makes the checkbox's grey color more visible 
                         // (darker), by being fully opaque.
  }
}

我还必须注释掉一些填充和干扰正确对齐的东西。 在这里查看我的完整提交。

请注意，如果您希望对所有任务列表（带有复选框的列表）进行编号，那么您应该使用

list-style-type: decimal;

而不是

list-style-type: inherit;

。这甚至会使无序的任务列表编号，但这不是我想要的。

为了清楚定义，这里有一个无序列表：

- Item 1
    - Item 2

这是一个有序列表：

1. Item 1
    1. Item 2

这是一个有序任务列表：

1. [ ] unchecked checkbox
    1. [x] checked checkbox

这是一个无序任务列表：

- [ ] unchecked checkbox
    - [x] checked checkbox

在我的永久测试页面上查看我的最终结果：https://gabrielstaples.com/test-markup-syntax-highlighting/#gsc.tab=0

截图：

该页面的 markdown 源代码：https://github.com/ElectricRCAircraftGuy/ElectricRCAircraftGuy.github.io/blob/main/_posts/1900-01-01-test-markup-syntax-highlighting.md

参考文献

1. 巨大感谢@mb21的回答，让我走上了正确的道路并且几乎实现了。我已经对这个答案投了赞成票。

2. 我在哪里找到了

   list-style-type: inherit;

   选项：https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type：

   /* Global values */
   list-style-type: inherit;   // <====
   list-style-type: initial;
   list-style-type: revert;
   list-style-type: revert-layer;
   list-style-type: unset;
   

3. 我与 GitHub Copilot AI 进行了多次聊天，帮助我了解 SCSS 语法和格式的详细信息及其工作原理。这非常有帮助。不过，这个答案都是我自己的话和内容。