Wraped lines and textarea / pre

[marcimat]

Hello and thanks for this prism-live library !

I'd like to try prism-live to write some long text like articles in markdown or things like that, and so I want long lines to wrap.

It's almost working with some little corrections.

Force wrapping lines in the wanted language (sorry for ugly css — it's an example) :

.language-xxx {
    white-space: pre-wrap !important;
}

But. textarea and pre don't have the same padding-right, so sometimes a word comes in next line in the colored text, and not in the textarea. In fact a padding-right with --scrollbar-width is applied on the pre and not on the textarea.

One possible correction is to use the same padding (almost for right) as the pre. Like (again ugly) :

.prism-live textarea.prism-live,
.prism-live pre.prism-live
{
    --scrollbar-width: 17px;
    padding: 1em !important;
    padding-bottom: var(--scrollbar-width) !important;
    padding-right: var(--scrollbar-width) !important;
}

This corrects the most common problems I've seen.
Although we need to use a coloration that don't change the size or weight of the font.

[rastapopougros]

Although we need to use a coloration that don't change the size or weight of the font.

Precision on this point:

• it's not so frequent to change size, but very frequent in lightweight syntax like MD, and… Prism provide MD, no just coding languages :)
• even for just coding languages, it's frequent to use bold, italic, etc, for some important keywords, but for now, even bold text de-synchronize the pre and the textarea