Ordered List Styles

[dmccreary]

First of all, thanks for this great project. I have been using mkdocs-material for many years and it has worked great for building websites for my team's Python projects as well as for building course websites for K-12 STEM programs. I also write material on how to use mkdocs-material to build "intelligent textbooks".

I have a friend who is building quizzes with many mutiple-choice questions. The possible responses need to be ordered using upper-case letters like this:

A. Response 1
B. Response 2
C. Response 3
D. Response 4

I made several attempts to use "superfences" including the <div/> wrapper custom superfence, but without any luck. Finally, I did discover that by using the markdown format that I can apply a complex set of CSS rules to re-format the code elements as an ordered list. This does work but does not seem elegant, requires a lot of extra CSS and has bad side-effects.

I can also use pure HTML with a single line of CSS, but that seems much harder for my users to maintain.

I put about a dozen "experiments" on a simple stripped down website here:

Dan's Superfences Test Site for Upper Alpha Ordered Lists

My one challenge is that I can't get this to work with sites that turn on line-numbers by default. When I add the linenums="0" the superfence stops parsing the markdown correctly. There is an example of this here:

Example of inability to turn of line numbering in a superfence

If anyone has any suggestions, please let me know.

Thank you in advance.

[kamilkrzyskow]

Hello @dmccreary,
I'm a bit lost on your explanation, as to why is there the requirement to use SuperFences / Code blocks to achieve the result?
Also on the linked pages, some examples are rendered and some aren't, and you're using a ::: syntax, which isn't provided by SuperFences afaik, so perhaps I'm just missing something.

What is wrong with such setup?

<style>
  .md-content__inner > ol {
      list-style-type: upper-alpha;
  }
</style>

Some description 1

1. Answer 1
2. Answer 2
3. Answer 3
4. Answer 4

Some description 2

1. Answer 5
2. Answer 6
3. Answer 7
4. Answer 8

The issue with my solution is that the <style> applies the style globally. This could be mitigated with a "feature flag" that would enable it only on certain pages via templates. I've done something similar in the mkdocs-nype theme:

• npe.cm front-matter
• logic to add the css to the website
• applied css

Still if you want to limit it in certain cases, then I've seen that you've tried to wrap the Markdown list using a <div> tag. For that to work you need to use the md_in_html extension and mark the div with the markdown attribute.

.upper-alpha ol {
    list-style-type: upper-alpha;
}

<div class="upper-alpha" markdown>
1. First item
2. Second item
3. Third item
4. Fourth item
</div>

[facelessuser]

@kamilkrzyskow's approach is super simple, but if you want to use an alphabetical list directly, you can also use https://facelessuser.github.io/pymdown-extensions/extensions/fancylists/, enabling inject_style to ensure the style is picked up over Material's.

[dmccreary]

@kamilkrzyskow - that worked PERFECTLY!

1. Only one line to add to the mkdocs.yml
2. Only one new CSS rule
3. Very intuitive semantic addition to the markdown

Thank you VERY much! The superfences was a LOT more complicated!

Here is my test case - which I will document in a bit:

https://dmccreary.github.io/superfences/md-in-html/

Thanks once again - I had hoped there would be a simple solution and there was!