Skip to content

Instantly share code, notes, and snippets.

@bertobox
Created August 28, 2012 20:31
Show Gist options
  • Save bertobox/3503850 to your computer and use it in GitHub Desktop.
Save bertobox/3503850 to your computer and use it in GitHub Desktop.
Easy list style types for Markdown
.lower_roman+ol, .lower_roman+ul {list-style-type: lower-roman;}
.upper_roman+ol, .upper_roman+ul {list-style-type: upper-roman;}
.lower_alpha+ol, .lower_alpha+ul {list-style-type: lower-alpha;}
.upper_alpha+ol, .upper_alpha+ul {list-style-type: upper-alpha;}
.lower_greek+ol, .lower_greek+ul {list-style-type: lower-greek;}
.lower_latin+ol, .lower_latin+ul {list-style-type: lower-latin;}
.upper_latin+ol, .upper_latin+ul {list-style-type: upper-latin;}
.none+ol, .none+ul {list-style-type:none;}
.disc+ol, .disc+ul {list-style-type:disc;}
.circle+ol, .circle+ul {list-style-type:circle;}
.square+ol, .square+ul {list-style-type:square;}
.decimal+ol, .decimal+ul {list-style-type:decimal;}
.decimal_leading_zero+ol, .decimal_leading_zero+ul {list-style-type:decimal-leading-zero;}
@KyleMit
Copy link

KyleMit commented Apr 17, 2014

What a great idea!

For those curious about the implementation, the + sign is the adjacent sibling selector, so it will style the next element it comes across, so you just have to put this class right before the markdown list.

In markdown it would look like this:

<div class="lower_alpha"></div>
1. List Item 1
2. List Item 2

Which will produce this:

<div class="lower_roman"></div>
<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ol>

Which will look like this:

   i. List Item 1
  ii. List Item 2

@chriscdn
Copy link

chriscdn commented Apr 8, 2015

This is great and very useful! It also works with sub-lists.

@monecchi
Copy link

Thank you, this is great!

@SzieberthAdam
Copy link

Great idea, thanks!

@Bizarrus
Copy link

How that works? Where i put the stylesheet?

@Lastor-Chen
Copy link

Thanks, it's cool idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment