How can I make a syntax highlighting contenteditable div element with js???

Question

like < ,>,and other special characters should be displayed in different colours

Answer 1

Prettify.js

Example :

https://code.sololearn.com/W0D8Wm1tt7ll/?ref=app

W3codecolor.js

Example :

https://code.sololearn.com/WuqWE96q6oM6/?ref=app

Answer 2

i use prettify from Google.

https://code.sololearn.com/WdwNh8RVZiXb/?ref=app

Answer 3

David Carroll he has unlimited amount of time :D

Answer 4

lionel sisso syntax highlighting in a textarea using js

Answer 5

Rishabhツ Using JavaScript you can do. Refer this w3school link

https://www.w3schools.com/howto/howto_syntax_highlight.asp

Answer 6

You can't do that with a textarea but you'd likely be happy with an alternative.

I used CodeMirror in a previous project and it worked well:
https://codemirror.net/

CodeMirror creates a syntax-highlighted editor but through lots of non-textarea elements like spans.

Answer 7

Rishabhツ The answer from Josh Greig appears to be a solid solution if you are flexible to plug in a new editor. That library appears to support themes and autocompletion capabilities as well.

Answer 8

Use codemirror
https://code.sololearn.com/WZUfwGny9p9q/?ref=app

Answer 9

AJ #L1G3 Sir I want a syntax highlighting system which works when the text is being written inside the contenteditable div element

Answer 10

Use regex in js to find special character in an oninput function so that it check all character as they entered.it will return true if
special character found.
Then use a condition
If special character found (target the last character of div).style.color ="youfavcolor";

Answer 11

Calviղ You're pretty amazing for taking a moment to demo this. 😉👌

Answer 12

I don't understand ..🤔🤔

Answer 13

can you explain your problem better..🤔

Answer 14

I check AJ #L1G3 suggestion
They have use the same theme
I suggested.
I suggest you to try yourself and visit there if any problem or professional modification.

Answer 15

Expliquez plus

Answer 16

<script type="text/javascript">
// jQuery
$(document).ready(function() {
$('#area').focus(function() { .. } // focus I would imagine I need.
}
</script>
<div id="area" contentEditable="true"></div>