request Disable word wrap in editor

[samuelcomeau6]

Can you please include a toggle to disable word wrapping while in editor preview. I have it in my appearance .css files, but when I install your plugin all of that breaks. I'd like to both use the plugin and have no wrap.

[mugiwara85]

Can you send me your css?

[samuelcomeau6]

/* Don't wrap codeblocks */
pre > code, code[class*="language-"] {
  white-space: pre !important;
}
.HyperMD-codeblock {
  white-space: nowrap;
  //overflow-x: scroll;
}

.markdown-preview-view code {
  white-space: nowrap !important;
}

[mugiwara85]

@samuelcomeau6 sorry for the late reply. Are you sure these are the correct CSS? I created a simple code block with a long line:

Applying the CSS you sent results in this:

As you can see the line overflows the code block.

Adding overflow-x: scroll does work, but only if the code block has only one line:

But if the code block contains multiple lines, then it is wrong, because multiple scrollbars are present:

I don't think this is possible, because in editor view a code block is not a code block as in reading view. It consists just from multiple lines, but these lines are not a child of a parent element element, which would identify one code block specifically.

Or maybe do you have other CSS applied which makes it work somehow?

[dimateos]

How do you disable wrapping in edit mode? Would love to be able to disable/enable it via button as in read mode

[mugiwara85]

How do you disable wrapping in edit mode? Would love to be able to disable/enable it via button as in read mode

You can't. In edit mode the lines are separate HTML elements, and the code blocks are not inside a parent container. In reading mode you can disable it, because the property must be set on the container, not on the lines. That's why it didn't work, as you can see above. But if you find a way, I am happy to implement that as well. The provided CSS resulted as shown above. each line had a separate scrollbar, which is obviously not nice.