Ionaru / Ionaru/easy-markdown-editor

Possible to style multi-line code blocks

Open
#270 5 comments 0 reactions 0 assignees View on GitHub
Question
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?

![Screenshot from 2020-11-25 19-23-03](https://user-images.githubusercontent.com/2058303/100294524-0787d480-2f55-11eb-89fe-2272adca2ba8.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.