New list type: Steps

[ofek]

Context

https://squidfunk.github.io/mkdocs-material/reference/lists/

Description

It would be nice to have a dedicated way to display list items that represent steps the user must follow to achieve a particular task.

Related links

• https://mintlify.com/docs/content/components/steps
• https://starlight.astro.build/components/steps/

Use Cases

A user must follow directions to achieve a desired outcome like the installation of a program.

Visuals

Before submitting

• I have read and followed the change request guidelines.
• I have verified that my idea is a change request and not a bug report.
• I have ensured that, to the best of my knowledge, my idea will benefit the entire community.
• I have included relevant links to the documentation, related issues, and discussions to underline the need for my idea.

[squidfunk]

Thanks for suggesting! We already have this on our list, and we'll revisit this once we got our current efforts sorted out ☺️

[A3Bagged]

I've actually came up with a markdown extension for this.
i was looking for the same thing.

I don't know python well so code could be improved but i've done my best and it works.
I've included it on my ci.yml with pip install stepslist so that i can use it online.

Link to repo

I've tried making it with <steps> & </steps> tags but after 2 days of tinkering i found out that markdown or mkdocs closes any open html tags so it would actually output as:

<p><steps></steps></p>
<ol>
<li>

etc..

for further info take a look at #7775

Changing to using --steps-- & --!steps-- has allowed me to do this.

These can then be styled with css using the class name .md-steps and ::before ::after pseudo elements to have something like your example.

Mine currently look like this

[squidfunk]

Looks great, thanks for sharing!