使用 Google Prettify 显示 HTML 和 CSS 代码。我必须用 html 名称替换每个 < > 吗？

Question

直到我在 stackoverflow 上发现我应该将所有 < 替换为 < 并将所有 > 替换为 > 之前，Google Prettify 并没有为我正确显示 HTML。

这真的有必要吗？有没有更简单的方法来做到这一点？

我想显示如下简单代码：

<h1>Header</h1>

<p>This is a paragraph tag. Here is a <a href="#">LINK</a></p>

我可以使用什么东西来检测<pre>标签之间的所有代码吗？例如，当我在 stackoverflow 中输入代码时，我不需要替换 < 和 >。

Answer 1

您可以使用 PHP 创建一个表单来获取输入的 HTML 并使用 PHP 函数 htmlentities() 替换 HTML 标记，或者您可以使用我偶然发现的这个 URL 为您寻找解决方案。 http://www.boallen.com/htmlentities.html 你输入你的代码，它会输出你的代码并应用 htmlentities。

不确定您对 PHP 的了解程度，但您可以在此处阅读该函数的工作原理：http://us3.php.net/manual/en/function.htmlentities.php

Answer 2

Google 需要它。您可以使用预处理语言（例如 php）来替换必要的字符。我相信你也可以在 javascript 中做到这一点。

Answer 3

编辑：删除了我之前的评论，因为它应该是对另一个美化主题的回复:)

但是，如果有帮助，这里有一个规范化 HTML 字符串的本地 js 解决方案：

// 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]+";";     

}