Custom Styles in Markdown

23 March 2021

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):