javascript - Implement HTML syntax highlighting into a textarea for writing code - Stack Overflow

admin管理员组

文章数量:1312861

I have a problem that seems simple but I fear that it is too plicated 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 acplishing this would be? I'm a puter science major just about to plete 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.

I have a problem that seems simple but I fear that it is too plicated 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 acplishing this would be? I'm a puter science major just about to plete 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.

• javascript
• jquery
• html
• css
• jsp

Share Improve this question Follow edited Jan 22, 2015 at 6:20 user149341 asked Jan 22, 2015 at 6:15 VagrantCVagrantC 83733 gold badges1515 silver badges3737 bronze badges 3

• The term you're looking for is syntax highlighting. "Intellisense" is a brand name referring to context-aware code pletion in Microsoft Visual Studio. (I've corrected your post to match.) Now that you know what it's called, you should be able to find more information online about it… – user149341 Commented Jan 22, 2015 at 6:19
• lots of different syntax highlighters around, not difficult to implement either...just follow the docs – charlietfl Commented Jan 22, 2015 at 6:25
• Thank you, I wasn't aware of the different terms! – VagrantC Commented Jan 22, 2015 at 6:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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()});

本文标签： javascriptImplement HTML syntax highlighting into a textarea for writing codeStack Overflow