Website CSS; make Kramdown markdown parser on Github Pages Jekyll page render numbers next to checkboxes

This markdown:

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

Produces this output:

You can see it live on my personal website here: https://gabrielstaples.com/dell_xps15_9530_setup/#gsc.tab=0

I'm not a fan of the numbered bullets missing. I need them. This is a step-by-step tutorial I'm writing. I'd like it to show the bulleted numbers next to everything, like this, except with the checkboxes too of course. Heck, I'd even prefer this output with [x] shown next to numbers over having pretty checkboxes but no numbers:

--- start of how I want to see the bulleted numbers ---

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

--- end of how I want to see the bulleted numbers ---

Any way to do that (show the numbers on my GitHub page)?

Again, my _config.yml file has this set:

markdown: kramdown

I am willing to change markdown parsers if that helps, so long as they also render my Table of Contents okay. Last I checked, the GFM (Github Flavored Markdown) renderer does not render the Table of Contents (I should check again though).

You can see that in my config file here: 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

Update: I found the official Kramdown repo here: https://github.com/gettalong/kramdown. I should open an issue there too.

Related, but not a duplicate, since it's asking about GFM, not Kramdown: TaskList of GitHub Flavored Markdown doesnt support ordered lists

Here's my final solution for CSS formatting in my .scss file:

.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.
  }
}

I also had to comment out some padding and things that were interfering with proper alignment. See my full commit here.

Note that if you want all task lists (lists with checkboxes) to be numbered, then you should use list-style-type: decimal; instead of list-style-type: inherit;. This will make even unordered task lists numbered, but that's not what I want.

For clarity on definitions, here's an unordered list:

- Item 1
    - Item 2

Here's an ordered list:

1. Item 1
    1. Item 2

Here's an ordered task list:

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

Here's an unordered task list:

- [ ] unchecked checkbox
    - [x] checked checkbox

See my final result on my permanent test page here: https://gabrielstaples.com/test-markup-syntax-highlighting/#gsc.tab=0

Screenshot:

Source code in markdown for that page: https://github.com/ElectricRCAircraftGuy/ElectricRCAircraftGuy.github.io/blob/main/_posts/1900-01-01-test-markup-syntax-highlighting.md

References

1. Huge thanks to @mb21 for the answer that got me on the right track and almost there. I've upvoted that answer.

2. Where I found the list-style-type: inherit; option: 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. I had lots of chats with the GitHub Copilot AI to help me work out the details of SCSS syntax and formatting, and how it worked. It was very helpful. This answer is all my own words and content, however.