When I increase the font size of a rendered Markdown document with to-do list in IntelliJ IDEA, the size of the checkmarks remains small in the Preview section. Is there a built-in way or a plugin that would fix this issue?

Example document

## Topics

- [x] Variables
- [x] Conditions
- [x] Loops
- [ ] Functions
- [ ] Classes

Rendered content

I also tried add the following custom CSS:

input[type=checkbox] {
  width: 0;
  margin-right: 5rem;
  font-size: 4rem;
  line-height: 2rem;

  &:checked::after {
    content: '✔️';
  }
  &:not(:checked)::after {
    content: '⬜️';
  }
}

However, this code results in overlapping checkboxes.

After adding custom CSS

When I increase the font size of a rendered Markdown document with to-do list in IntelliJ IDEA, the size of the checkmarks remains small in the Preview section. Is there a built-in way or a plugin that would fix this issue?

Example document

## Topics

- [x] Variables
- [x] Conditions
- [x] Loops
- [ ] Functions
- [ ] Classes

Rendered content

I also tried add the following custom CSS:

input[type=checkbox] {
  width: 0;
  margin-right: 5rem;
  font-size: 4rem;
  line-height: 2rem;

  &:checked::after {
    content: '✔️';
  }
  &:not(:checked)::after {
    content: '⬜️';
  }
}

However, this code results in overlapping checkboxes.

After adding custom CSS

• intellij-idea
• markdown

1 Answer 1

You could style them, here's a starting place.

Settings -> Languages & Frameworks -> Markdown -> Custom CSS

input[type=checkbox] {
  width: 0;
  margin-right: 5rem;
  font-size: 4rem;
  line-height: 2rem;

  &:checked::after {
    content: '✔️';
  }
  &:not(:checked)::after {
    content: '⬜️';
  }
}