Need to color the tags in an xml, displayed in a textarea

I need to color the tags in an XML string, which is displayed in the textarea of an html page.

say for example, im having an xml string stored in a variable 'xmldata'.

the textarea tag in html is as below

<textarea id="xmlfile" cols="20" rows="30"></textarea>

using the below javascript statement, im displaying the xml string in the textarea

document.getElementById("xmlfile").value=xmldata;

But the xml string is displayed as a plain text in the textarea.

Is there any javascript function to color the tags in xml ?

I don't want any external javascript and css code work like "google-code-prettify"

All i need is a simple javascript function that colors the tags in an xml string which is displayed in the textarea.

Please help me with a solution.

-Dinesh

Since the contents of your text area are not separate DOM elements I don't believe you'll be able to individually set their attributes (since they don't have individual attributes). You might find some variation on a rich text editor that you can plug in. This may or may not violate your stipulation that you don't want external javascript libraries.

As replied here have a look at a self contained prettifier that works for most cases does nice indenting for long lines and colorizes the output if needed. Nevertheless I guess it might not help if you need it inside a textarea.

function formatXml(xml,colorize,indent) { 
  function esc(s){return s.replace(/[-\/&<> ]/g,function(c){         // Escape special chars
    return c==' '?'&nbsp;':'&#'+c.charCodeAt(0)+';';});}            
  var se='<p class="xel">',tb='<div class="xtb">',d=0,i,re='',ib,
      sd='<p class="xdt">',tc='<div class="xtc">',ob,at,sz='</p>',
      sa='<p class="xat">',tz='</div>',ind=esc(indent||'  ');
  if (!colorize) se=sd=sa=sz='';   
  xml.match(/(?<=<).*(?=>)|$/s)[0].split(/>\s*</).forEach(function(nd){
    ob=nd.match(/^([!?\/]?)(.*?)([?\/]?)$/s);                         // Split outer brackets
    ib=ob[2].match(/^(.*?)>(.*)<\/(.*)$/s)||['',ob[2],''];            // Split inner brackets 
    at=ib[1].match(/^--.*--$|=|('|").*?\1|[^\t\n\f \/>"'=]+/g)||['']; // Split attributes
    if (ob[1]=='/') d--;                                              // Decrease indent
    re+=tb+tc+ind.repeat(d)+tz+tc+esc('<'+ob[1])+se+esc(at[0])+sz;
    for (i=1;i<at.length;i+=3) re+=esc(' ')+sa+esc(at[i])+sz+"="+sd+esc(at[i+2])+sz;
    re+=ib[2]?esc('>')+sd+esc(ib[2])+sz+esc('</')+se+ib[3]+sz:'';
    re+=esc(ob[3]+'>')+tz+tz;
    if (ob[1]+ob[3]+ib[2]=='') d++;                                   // Increase indent    
  });
  return re;
}

For demo see https://jsfiddle.net/dkb0La16/