Customize List Styles

by typora.io

You can add following custom CSS to customize the styles of lists.

Ordered List Styles

Type Output CSS
Numbers (default style) Screen Shot 2022-07-03 at 17.09.16 ol {list-style-type: decimal;}
Numbers (with leading 0) Screen Shot 2022-07-03 at 17.09.38 ol {list-style-type: decimal-leading-zero;}
Chinese Numbers Screen Shot 2022-07-03 at 17.10.23 ol {list-style-type: cjk-ideographic;}
Hiragana Screen Shot 2022-07-03 at 17.10.49 ol {list-style-type: hiragana;}
Katakana Screen Shot 2022-07-03 at 17.11.12 ol {list-style-type: katakana;}
Alphabet Screen Shot 2022-07-03 at 17.11.46 ol {list-style-type: lower-alpha;}
Alphabet (uppercase) Screen Shot 2022-07-03 at 17.12.01 ol {list-style-type: upper-alpha;}
Greek Screen Shot 2022-07-03 at 17.12.20 ol {list-style-type: lower-greek;}
Roman numerals (lowercase) Screen Shot 2022-07-03 at 17.12.34 ol {list-style-type: lower-roman;}
Roman numerals (uppercase) Screen Shot 2022-07-03 at 17.12.51 ol {list-style-type: upper-roman;}

Unordered List Styles

Type Output CSS
circle Screen Shot 2022-07-03 at 17.22.26 ul {list-style-type: circle;}
disc Screen Shot 2022-07-03 at 17.22.37 ul {list-style-type: disc;}
square Screen Shot 2022-07-03 at 17.22.50 ul {list-style-type: square;}
Custom Contents Screen Shot 2022-07-03 at 17.25.15 ul {list-style-type: "* ";}
Custom Contents Screen Shot 2022-07-03 at 17.25.27 ul {list-style-type: "😎 ";}

Nested Lists

You can also change styles for nested lists using CSS selector, for example:

ol {
  list-style-type: decimal;
}

ol ol {
 list-style-type: lower-alpha;
}

ol ol ol{
 list-style-type: lower-roman;
}

Which will render lists like this:

Screen Shot 2022-07-03 at 17.19.31

Task Lists

Please check document here

More Styles

You can find more listing styles at here.