将HTML语法高亮显示到textarea中以编写代码

Question

I have a problem that seems simple but I fear that it is too complicated for just myself to implement. I'm trying to implement a textarea into a webpage where a user can write html code, press a button, and the interpreted html page shows up in a div next to the code. Very similar to w3schools "try it" sections.

So far, I have everything implemented, and it works almost as intended, the code renders properly in the right place when you press a button. The next step is to implement syntax highlighting in the textarea such that it will recolor the text based on what tag or attribute is typed. Basically, I'd like the behavior to be exactly like 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 what's in the textarea word by word, test against all possible tag and attribute names, and repopulate the textarea with colored text. From what I've seen, I don't think this is possible with a traditional textarea, and I might have to implement a specialized applet in place of the textarea. Does anyone know what the least painful way of accomplishing this would be? I'm a computer science major just about to complete my degree, but my knowledge of web programming is very limited and I've only started delving into jquery and jsp, though I have a good amount of experience with HTML/CSS/Javascript.

Answer 1

I had a similar requirement in the past. I found an awesome Javascript-based code editor that you can embed in your web-application.

Click here to view the demo: Code Mirror HTML editor demo

Click here to download Code Mirror: Code Mirror home/download

User Manual: Code Mirror user-manual

The editor supports syntax-highlighting, automatic indentation, intellisence auto suggestion, etc.

Using it is as simple as importing the script:

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

And replacing the text-area with the code-mirror editor:

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

If you are using JQuery, you can do it like this:

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