Using Google Prettify to display HTML and CSS code. Do I have to replace every < > with html name?

Google Prettify wasn't displaying HTML properly for me until I found on stackoverflow that I should replace all the < with < and all the > with >.

Is this really necessary? Is there an easier way to accomplish this?

I want to display simple code like the following:

<h1>Header</h1>

<开发者_Go百科p>This is a paragraph tag. Here is a <a href="#">LINK</a></p>

Is there something I can use that will detect everything as code between the <pre> tags? For example, as I type code in at stackoverflow, I'm not required to replace the < and >.

You could create a form with PHP to take the inputted HTML and replace the HTML tags using the PHP function htmlentities() OR you could use this URL I stumbled upon looking for a solution for you. http://www.boallen.com/htmlentities.html You input your code and it will output your code with htmlentities applied.

Not sure what your knowledge of PHP is but you can read how the function works here: http://us3.php.net/manual/en/function.htmlentities.php

Google needs it like that. you can use a preproccessor language such as php to replace the necessary characters. Im sure you can do it in javascript also.

Edit: Removed my earlier comment as it was supposed to be a reply to a different prettify thread :)

However, here is a local js solution to normalize HTML strings if it helps:

// HTML escape code repurposed from http://www.htmlescape.net/htmlescape_tool.html
function htmlEscapeString(unescaped_str)
{
  var escaped="";

  for(i=0; i<unescaped_str.length; i++)
  {
    escaped += escapeBR(escapeTags(escapeCharx(unescaped_str.charAt(i))));
  }

  return escaped;
}

function escapeBR(original)
{
  var thechar=original.charCodeAt(0);

  switch(thechar) {
    case 10: return "";
    case '\r': return ""; 
  }
  return original;  
}

function escapeNBSP(original)
{
  var thechar=original.charCodeAt(0);
  switch(thechar) {
    case 32: return "&nbsp;";
  }
  return original;  
}

function escapeTags(original)
{
  var thechar=original.charCodeAt(0);
  switch(thechar) {
    case 60:return "&lt;";  //<
    case 62:return "&gt;";  //>
    case 34:return "&quot;"; //"
  }
  return original;
}

function escapeCharx(original)
{
  var c = original.charCodeAt(0);
  switch(c) {
    case 38:return "&amp;";
    case 198:return "&AElig;";
    case 193:return "&Aacute;";
    case 194:return "&Acirc;"; 
    case 192:return "&Agrave;"; 
    case 197:return "&Aring;"; 
    case 195:return "&Atilde;"; 
    case 196:return "&Auml;"; 
    case 199:return "&Ccedil;"; 
    case 208:return "&ETH;";
    case 201:return "&Eacute;"; 
    case 202:return "&Ecirc;"; 
    case 200:return "&Egrave;"; 
    case 203:return "&Euml;";
    case 205:return "&Iacute;";
    case 206:return "&Icirc;"; 
    case 204:return "&Igrave;"; 
    case 207:return "&Iuml;";
    case 209:return "&Ntilde;"; 
    case 211:return "&Oacute;";
    case 212:return "&Ocirc;"; 
    case 210:return "&Ograve;"; 
    case 216:return "&Oslash;"; 
    case 213:return "&Otilde;"; 
    case 214:return "&Ouml;";
    case 222:return "&THORN;"; 
    case 218:return "&Uacute;"; 
    case 219:return "&Ucirc;"; 
    case 217:return "&Ugrave;"; 
    case 220:return "&Uuml;"; 
    case 221:return "&Yacute;";
    case 225:return "&aacute;"; 
    case 226:return "&acirc;"; 
    case 230:return "&aelig;"; 
    case 224:return "&agrave;"; 
    case 229:return "&aring;"; 
    case 227:return "&atilde;"; 
    case 228:return "&auml;"; 
    case 231:return "&ccedil;"; 
    case 233:return "&eacute;";
    case 234:return "&ecirc;"; 
    case 232:return "&egrave;"; 
    case 240:return "&eth;"; 
    case 235:return "&euml;"; 
    case 237:return "&iacute;"; 
    case 238:return "&icirc;"; 
    case 236:return "&igrave;"; 
    case 239:return "&iuml;"; 
    case 241:return "&ntilde;"; 
    case 243:return "&oacute;";
    case 244:return "&ocirc;"; 
    case 242:return "&ograve;"; 
    case 248:return "&oslash;"; 
    case 245:return "&otilde;";
    case 246:return "&ouml;"; 
    case 223:return "&szlig;"; 
    case 254:return "&thorn;"; 
    case 250:return "&uacute;"; 
    case 251:return "&ucirc;"; 
    case 249:return "&ugrave;"; 
    case 252:return "&uuml;"; 
    case 253:return "&yacute;"; 
    case 255:return "&yuml;";
    case 162:return "&cent;"; 
    default: break;
  }

  if( c <= 127 ) 
    return original;

  var a4=c%16;
  c = Math.floor(c/16); 
  var a3=c%16;
  c = Math.floor(c/16);
  var a2=c%16;
  c = Math.floor(c/16);
  var a1=c%16;
  return "&#x"+hex[a1]+hex[a2]+hex[a3]+hex[a4]+";";     

}