The recommended way for implementing a resizable PrismJS editor

[lzoran]

Many thanks for the PrismJS!

So far, I've used it to highlight the code snippets, and it works great!

Now, I would like to extend it and make highlighted code snippets editable (web-based code editor like Prism live).
On the Prism live site, I haven't found any example with the resizable editor (no scrollbars).

Adjusting CSS to make the editor resizable (mostly adding white-space: pre-wrap; and overflow: hidden), I've encountered the issue attached below. It seems that the solution with layered textarea and pre elements has some drawbacks (probably something with differently breaking text in textarea and highlighted content under pre element).

To get back to the problem 😄, is there any recommended way that Prism live plans to adopt to support resizable code editors in browsers?

TIA

[marcimat]

I think you should see #15 also.

[lzoran]

Hi @marcimat,

I've checked the proposed solution, but it does not solve my problem :/.

Also, I've created an additional question on the StackOverflow.
I hope someone managed to solve this problem as I wouldn't want to add an extra library just for that...

[cyfung1031]

Hi @marcimat,

I've checked the proposed solution, but it does not solve my problem :/.

Also, I've created an additional question on the StackOverflow.
I hope someone managed to solve this problem as I wouldn't want to add an extra library just for that...

Perhaps you can use my modificated version - PrismJS Live Lite (Demo here)

The wrapping is much better but there are still some problems with that.

Perhaps using textarea on top of the content is not a good idea.