How can I make a syntax highlighting contenteditable div element with js??? | SoloLearn: Learn to code for FREE!

+11

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

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

8/2/2020 4:04:16 PM

Rishabh

16 Answers

New Answer

+10

Prettify.js Example : https://code.sololearn.com/W0D8Wm1tt7ll/?ref=app W3codecolor.js Example : https://code.sololearn.com/WuqWE96q6oM6/?ref=app

+8

i use prettify from Google. https://code.sololearn.com/WdwNh8RVZiXb/?ref=app

+8

David Carroll he has unlimited amount of time :D

+6

lionel sisso syntax highlighting in a textarea using js

+6

Rishabhツ Using JavaScript you can do. Refer this w3school link https://www.w3schools.com/howto/howto_syntax_highlight.asp

+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.

+5

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.

+5

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

+3

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";

+3

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

+3

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

+2

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.

+1

I don't understand ..🤔🤔

+1

can you explain your problem better..🤔

+1

Expliquez plus

+1

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