Ionaru / Ionaru/easy-markdown-editor
Possible to style multi-line code blocks
- Dominant language
- JavaScript
- Stars
- 3.1k
- Forks
- 363
- PR merge metrics
- No merged PRs in 30d
Description
Right now multi-line code blocks that use the triple backquote show up in the editor with their contents colored, but whitespace and spacing between lines is the default. It's particularly distracting when there is indentation in the code as the whitespace doesn't have the same background. Is it possible to style these types of blocks to be just a consistent square?

I'm not sure if this is possible strictly through CSS or if maybe a CodeMirror overlay could do the trick? I was really hoping there'd be a styleable CSS class added to each line that's part of the multi-line block. So far the best I've come up with is forcing the `.cm-comment` class to inherit it's background setting which removes it altogether.
```css
.cm-comment {
background: inherit !important;
}
```
Thanks a lot for your work on this and any guidance you may be able to provide!
Contributor guide
Research direction
Reproduce the multi-line triple-backquote block in the editor and inspect how its contents and whitespace receive the `.cm-comment` styling. Compare a CSS-only approach with the CodeMirror overlay idea mentioned in the issue. Done means the code block and its indentation have a consistent background without relying on the workaround shown.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100