Skip to content

Better display of code blocks #305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jv-barsuk opened this issue Apr 22, 2019 · 6 comments · Fixed by #321
Closed

Better display of code blocks #305

jv-barsuk opened this issue Apr 22, 2019 · 6 comments · Fixed by #321
Labels
enhancement New feature or request feature: EasyMDE Realted to the integrated EasyMDE editor
Milestone

Comments

@jv-barsuk
Copy link

jv-barsuk commented Apr 22, 2019

Code blocks are not displayed correctly. The grey background just ends after the last character and there is some space between the lines. Giving the .CodeMirror .CodeMirror-code .cm-commentElement the attribute display: block;would enhance the way it shows.
Then newlines in between just would need to get the right css-class and the way it looks would be great.

Now: https://imgur.com/N0clBhZ
After: https://imgur.com/RNvaahl

@korelstar
Copy link
Member

You're right, but unfortunately, your fix breaks inline code formatting (i.e. text ``code`` text will be displayed as block, too). If you have a fix for this, I would be happy to include this in the next release!

@korelstar korelstar added feature: SimpleMDE Realted to the formerly integrated SimpleMDE editor markdown and removed feature: SimpleMDE Realted to the formerly integrated SimpleMDE editor labels Apr 23, 2019
@tnyeanderson
Copy link
Contributor

tnyeanderson commented Apr 24, 2019

.CodeMirror .CodeMirror-code .cm-comment:only-child {
    display: block;
}

Now just figure out the whitespace :)

EDIT: Specified selector to not need !important

@korelstar korelstar added this to the 3.0.0 milestone Apr 25, 2019
@korelstar korelstar added the enhancement New feature or request label Apr 25, 2019
@korelstar
Copy link
Member

Nice! Thank you very much, that's so cool! I will integrate this in the next release 🎉

@tnyeanderson
Copy link
Contributor

Do not include that code yet! It renders weird on my system unless I also have the following:

.CodeMirror-line > span {
    padding-right: 0 !important;
}

Any one else see this issue? If I don't have that, the line-height of the .CodeMirror-line goes out of whack and I get a lot of vertical whitespace. Unfortunately there's no way to select that span more specifically, and the !important is necessary because CodeMirror injects inline CSS. Not sure how this may affect other things, though I don't see problems yet.

Only bug I see is that if you select text within a line of the code block, that line becomes white again. I haven't figured out a way to solve this issue yet.

New lines within a code block will also still be white, as described by the OP. Haven't figured that out yet either... CodeMirror spits out some really unhelpful elements and styles into the page.

@tnyeanderson
Copy link
Contributor

There is a problem with the padding-right: 0 !important line. Lines that contain only a dash and space (implying a list item) will be invisible until text is added after it. It will have essentially 0 height, and makes editing lists confusing.

Anyone got a better workaround for the vertical spacing issue?

@korelstar korelstar added feature: EasyMDE Realted to the integrated EasyMDE editor and removed markdown labels May 24, 2019
@korelstar
Copy link
Member

Due to #290, we have huge changes in the editor. It looks to me, that the following code has no side-effects, any more:

.CodeMirror .CodeMirror-code .cm-comment:only-child {
    display: block;
}

Could you please test this again with the current code base, @tnyeanderson ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feature: EasyMDE Realted to the integrated EasyMDE editor
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants