search

PrismJS / live

Prism Live: Lightweight, extensible editable code editors. A work in progress, try it out at your own risk (and report bugs!) :)
https://live.prismjs.com
MIT License
105 stars 28 forks source link

The recommended way for implementing a resizable PrismJS editor #16

Open lzoran opened 3 years ago

lzoran commented 3 years ago

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

prism-live-resize-issue

marcimat commented 3 years ago

I think you should see #15 also.

lzoran commented 3 years ago

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 commented 3 years ago

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.