Use different indexes for nested numbered list

[loffa]

Feature request

What problem does this feature solve?

Currently, vuepress does not number nested lists with other symbols. This can lead to a bit of confusion when creating step-by-step instructions. Consider the following block of Markdown

1. A numbered list
  1. A nested numbered list
  2. Which is numbered
2. Which is numbered

Both normal numbers are used to describe the list in a list and vuepress renders this correctly, restarting the numbering on the indented block.

Using GitHub-rendering here:

1. A numbered list
   1. A nested numbered list
   2. Which is numbered
2. Which is numbered

We can see that they use roman numbering for the inner list. I have not been able to do this using the built in render in vuepress. Currently testing with the default template.

Proposed changes

Nubered list indented from previous list should notate the list using other symbols or by appending the outer lists number as well (1.1, 1.2 etc).

Inner list can use letters (1.a 1.b), roman literals (i ii iii iv) or something else.

Are you willing to work on this yourself?

I am not proficient in the inner workings of this package and therefor I might struggle with the implementation.

[bencodezen]

Thanks for filing the issue @loffa! From just preliminary research, it sounds like the best solution to solve this would be for us to implement a markdown extension that detects alpha-ordered lists with roman numerals as well as letters.

For now though, I wanted to at least suggest that a temporary workaround for you (while we figure out our strategy as a team) is to use CSS to target sub-list items:

// Not my preferred way of writing CSS, but for a simple fix
li > ol > li {
  list-style: lower-roman;
}

In the meantime, we'll take your feedback into consideration as we plan out our roadmap. Thank you and let us know if you have any questions in the meantime!

[loffa]

Thanks for the reply! I can confirm that the workaround is working. I will use that and look forward to the feature update.

[erinaceous]

Came across the issue of ordered lists being styled the same as unordered lists (i.e., all bullet-points) whilst writing some docs which have lots of ordered lists where it would be desirable to show the numbers on the ordered lists -- I'm guessing that stems from the same issue?

A workaround which works for me is overriding the list style for the ordered lists and using content: counters - in .vuepress/styles/index.styl:

.vp-doc {
  ol {
    counter-reset: list-item

    > li {
      counter-increment: list-item;

      &:before {
        position: unset;
        content: counters(list-item, ".") ".";
        margin-left: -1.25rem;
        padding-right: 5px;
        left: 0;
        top: 0;
        border-radius: 0;
        background-color: unset;
        height: unset;
        width: auto;
        display: inline;
        clear: none;
        color: rgba(60, 60, 60, 0.66);
      }
    }
  }
}

.dark {
  .vp-doc {
    ol {
      > li {
        &:before {
          color: rgba(195, 195, 195, 0.66);
        }
      }
    }

    ul {
      > li {
        &:before {
          background-color: rgba(195, 195, 195, 0.33);
        }
      }
    }
  }
}

(Using the vuepress-theme-vt package, so setting specific colours is to do with that)

Caveat there is that it doesn't allow you to change the descendant numbering schemes e.g. to roman numerals. But using counters instead of counter at least helps to retain that heierarchy of numbering.

e.g. with above style, this markdown:

1. On the first **Installation Destination** screen, select **Custom** for
   **Storage Configuration**.
2. Click **Done** in the top left corner.
3. Now you are on the **Manual Partitioning** screen, ignore the prompts to
   create partitions automatically. Instead, you can create partitions using
   the **Add Button** (**`+`**) in the **bottom left corner**.
4. Create **four partitions** as follows:
   * Bullet point
   1. - Mount Point: `/boot/efi`
      - Desired Capacity: `512 MB`
   2. - Mount Point: `/boot`
      - Desired Capacity: `1 GB`
   3. - Mount Point: `swap`
      - Desired Capacity: Amount of RAM given to the VM, in GB, e.g. `24 GB`
   4. - Mount Point: `/`
      - Desired Capacity: (leave blank)
   5. - Nested numbered list:
        1. Testing
        2. And
        3. Stuff
           - And even more!
           - Bullet points!
             1. With numbers
             2. Below!
5. Make sure all partitions are listed as **Device Type**:
   **Standard Partition**.

Renders like this: