Possible to style multi-line code blocks

[zeroSteiner]

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.

.cm-comment {
  background: inherit !important;
}

Thanks a lot for your work on this and any guidance you may be able to provide!

[stephencmorton]

Agreed. This would be very useful.

[danielnetop]

@Ionaru do you think this is possible with css only or is there any need for custom code?

[Ionaru]

It may be possible to connect the lines using line-height, but a square/block around the code would need custom code.

[danielnetop]

Yeah, probably with a custom class on code blocks that we can then fully style the entire of the code mirror line right?

[danielnetop]

With the following css we're able to make the style across the entire editor, however if if have any break lines inside the code block that won't change it's color (the class doesn't exist there)

<style>
  .CodeMirror .CodeMirror-code .cm-comment:only-child {
    display: block;
}
</style>