How to style lists in Markdown

Originally published: 9 January 2024

How to style lists in Markdown

projects

Styling Lists in Markdown

Lists are a fundamental part of structuring content in Markdown. Whether you’re creating an ordered list or an unordered list, adding some style to your lists can make your content more visually appealing and organized. In this post, we’ll explore how to style both ordered and unordered lists using Markdown.

Styling Ordered Lists

Ordered lists are typically used when you need to represent a sequence of items in a specific order. To style ordered lists, you can use CSS styles to change the list’s appearance. Let’s take a look at an example CSS style for ordered lists:

ol {
    list-style-type: decimal;
    margin-left: 2rem;
    margin-bottom: 10px;
}

In this style, we set the list-style-type property to ‘decimal’, which results in numbered lists. The margin-left property adds some indentation, and margin-bottom creates space between the list items.

Now, you can apply this style to your ordered list in Markdown:

   1. Have easy, simple code that almost anybody can use
   2. Be in control of my own data - and by extension anyone who uses my templates can control their own data too
   3. Have fast, responsive websites and web apps
   4. Learn new things

This Markdown will render as a styled ordered list with numbers:

  1. Have easy, simple code that almost anybody can use
  2. Be in control of my own data - and by extension anyone who uses my templates can control their own data too
  3. Have fast, responsive websites and web apps
  4. Learn new things

Styling Unordered Lists

Unordered lists are used for items that don’t require a specific order. By default, Markdown uses bullet points for unordered lists, but this may depend on your app / global styling. By default it seems Astro/MDX has no styling for unordered lists. To style unordered lists, you can use CSS styles. Here’s an example CSS style for unordered lists:

ul {
    list-style-type: disc;
    margin-left: 2rem;
}

In this style, we set the list-style-type property to ‘disc’, which results in filled circles as bullet points.

Now, you can apply this style to your unordered list in Markdown:

    - Switch over to `Astro.js` for the site    
    - Continue blogging my projects and issues I come across
    - Make template available for purchase

This Markdown will render as a styled unordered list with filled circles:

Styling Specific Unordered Lists

In some cases, you may want to style specific unordered lists differently. For instance, you might have a task list and want to remove the default bullet points. You can use a specific class to target and style that list. Here’s an example CSS style for a task list with the class contains-task-list:

ul.contains-task-list {
    list-style: none;
}

Now, you can apply this style to your task list in Markdown:

   - [x] Switch over to `Astro.js` for the site
   - [x] Continue blogging my projects and issues I come across
   - [ ] Make template available for purchase

With this style, your task list will have no bullet points:

In conclusion, Markdown provides a simple way to structure and style your lists. By using CSS styles, you can customize the appearance of both ordered and unordered lists, making your content more visually appealing and user-friendly, but you may need to edit your global CSS file.

Read Count: 0

⬅️ Previous Post

My projects

Next Post ➡️

Sharp vs Squoosh: which to pick?