Geek Answers Handbook

Embed HTML syntax in a text box for writing code

I have a problem that seems simple, but I'm afraid that it is too difficult for myself. I am trying to implement textarea on a web page where the user can write html code, click a button, and the interpreted html page will appear in the div next to the code. Very similar to the w3schools "try" sections.

So far, everything has been implemented for me, and it works almost as expected, the code is displayed correctly in the right place when you click the button. The next step is to implement syntax highlighting in the text field so that it repaints the text based on which tag or attribute is typed. Basically, I would like the behavior to be the same as what Notepad ++ does when you write html code. text turns blue, attribute = "" text turns red, etc.

My thinking is that I need to somehow read that word for word in the text area, test all possible tag and attribute names and re-fill the text box with colored text. From what I saw, I do not think that this is possible with a traditional text field, and I may have to implement a specialized applet instead of a text field. Does anyone know what would be the least painful way to achieve this? I am an IT specialist, ready to complete my degree, but my knowledge in the field of web programming is very limited, and I just started to delve into jquery and jsp, although I have a lot of experience with HTML / CSS / Javascript.

+4
source share
1

. Javascript, -.

, : - Mirror HTML

, : home/download

: Mirror

, , intellisence ..

, script:

<script src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">

-:

var myCodeMirror = CodeMirror(function(elt) {
  myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});

JQuery, :

var myCodeMirror = CodeMirror(function(elt) {
    $('#my-code-input').replaceWith(elt);
}, {value: $('#my-code-input').val()});
+4

More articles:


All Articles