Customize List Styles

Published
ยท
Author
ยท
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.