Custom Styles in Markdown

23 March 2021

Updated: 03 September 2023

When working with markdown it can often be useful to be able to style elements using custom CSS

We can accomplish this by including a style tag. An example to illustrate this is changing the way a table renders in a specific document by changing the style of table rows to be striped, you would include the following CSS:

1
<style>
2
tr:nth-child(even) {
3
  background-color: #b2b2b2;
4
  color: #f4f4f4;
5
}
6
</style>

If the platform you’re displaying the HTML in already has the styles included then you may need to add !important to override in the CSS:

1
<style>
2
tr:nth-child(even) {
3
  background-color: #b2b2b2!important;
4
  color: #f4f4f4!important;
5
}
6
</style>

my-sample-doc.md

1
# Custom CSS in Markdown Example
2

3
This is a document where tables are rendered with every second table row with a specific background and foreground colour
4

5
<style>
6
tr:nth-child(even) {
7
  background-color: #b2b2b2!important;
8
  color: #f4f4f4!important;
9
}
10
</style>
11

12
The above CSS will lead to the following table being rendered with alternating row colours:
13

14
| Col 1 | Col 2 | Col 3 |
15
| ----- | ----- | ----- |
16
| A     | B     | C     |
17
| 1     | 2     | 3     |
18
| A1    | B2    | C3    |

Note that depending on your markdown renderer the embeded style tags may be removed, you’ll have to look at your specific renderer/converter/platform to see whether this works for you

With the converter I’m using, showdown.js, this is how the table above looks (with !important included to override my current table styles):