highlight-within-textarea | jQuery plugin for highlighting bits | Data Manipulation library
kandi X-RAY | highlight-within-textarea Summary
kandi X-RAY | highlight-within-textarea Summary
It's not actually possible to style text in a textarea, because any markup within a textarea is treated as literal text. This plugin aims to fake it, allowing you to highlight pieces of text inside a textarea. A native textarea element is used and familiar behavior (auto-correct, scrolling, resizing, etc.) works as expected.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of highlight-within-textarea
highlight-within-textarea Key Features
highlight-within-textarea Examples and Code Snippets
Community Discussions
Trending Discussions on highlight-within-textarea
QUESTION
I was writing my own text editor in Electron using React and I tried to do some basic syntax highlighting. The user writes their code inside a textarea, but there is no way to insert markup inside a textarea so I can't color text that way.
I found this jquery plugin which adds a backdrop behind the textarea so we can put a background color in certain places however I wanted the text themselves to be colored (which can't be done as the textarea is in front of the backdrop).
Any ideas about how other IDEs like Visual Studio Code (also written in electron) pulled this off?
...ANSWER
Answered 2021-Feb-06 at 01:57There are multiple approaches that can work here.
One way could be using a div with a contenteditable="true" attribute instead of a textarea. This way you can both write text inside the element and style its contents. Of course this creates its own issues that would have to be dealt with - when to parse the code, how to reposition the caret and more. Depending on the approach, MutationObserver could come in handy.
Another way would be to not use any built-in writing functionalities at all and implement your own. Listen to keyboard events and programatically insert characters. In that case you would also need to implement your own caret, selection etc., which is not easy.
VS Code is open source, so you can actually take a look under the hood and see how the editor is made. They use a completely bespoke editor called Monaco but its source code is in the VS Code repo. This file is a good start.
QUESTION
Hey all I am trying to have a simple way of adding multiple item names to a regex list:
...ANSWER
Answered 2020-Jan-07 at 17:06The difference is you're creating it as a string vs as a regex. Instead of adding on gi at the end, use new RegExp and pass your string in and then your flags:
QUESTION
I am trying to mimic some of the behavior of the Highlight Within Textarea plugin without actually using it.
I have pretty much figured out the highlighting part, however, when the input text exceeds the visible area of the textarea input, the highlighting is not displayed properly.
The problem is that the textarea can be scrolled down, while the highlighting container does not seem to be scrollable. I tried to link the scrollbars of both the textarea and the highlighting container following this approach, but somehow it is not working.
...ANSWER
Answered 2020-Jan-03 at 12:14Since you want the highlights to follow the content of the scrolled textarea, all you need is to move .hwt-highlights accordingly. This can be done by simply giving it a transform: translateY(px), where is simply the negative value of the current scrollTop value of the textarea:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install highlight-within-textarea
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
