使用 Google Pretify 显示 HTML 和 CSS 代码。我是否必须更换每个 < >有html名称吗？

Question

Google Prettify 无法正确显示 HTML，直到我在 stackoverflow 上发现我应该将所有 < 替换为 < 以及所有 > 与 >。

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

我想显示如下简单的代码：

<h1>Header</h1>

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

是否可以使用某些东西将所有内容检测为

 标记之间的代码？例如，当我在 stackoverflow 中输入代码时，我不需要替换 < 和 >。

Answer 1

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

不确定您对 PHP 的了解是什么，但您可以在此处阅读该函数的工作原理： https://www.php.net/manual/en/function.htmlentities.php

Answer 2

谷歌需要这样的东西。您可以使用预处理语言（例如 php）来替换必要的字符。我确信你也可以用 javascript 做到这一点。

Answer 3

编辑：删除了我之前的评论，因为它应该是对不同美化线程的回复:)

但是，这里有一个本地 js 解决方案，可以标准化 HTML 字符串（如果有帮助的话）：

// 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 " ";
  }
  return original;  
}

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

function escapeCharx(original)
{
  var c = original.charCodeAt(0);
  switch(c) {
    case 38:return "&";
    case 198:return "Æ";
    case 193:return "Á";
    case 194:return "Â"; 
    case 192:return "À"; 
    case 197:return "Å"; 
    case 195:return "Ã"; 
    case 196:return "Ä"; 
    case 199:return "Ç"; 
    case 208:return "Ð";
    case 201:return "É"; 
    case 202:return "Ê"; 
    case 200:return "È"; 
    case 203:return "Ë";
    case 205:return "Í";
    case 206:return "Î"; 
    case 204:return "Ì"; 
    case 207:return "Ï";
    case 209:return "Ñ"; 
    case 211:return "Ó";
    case 212:return "Ô"; 
    case 210:return "Ò"; 
    case 216:return "Ø"; 
    case 213:return "Õ"; 
    case 214:return "Ö";
    case 222:return "Þ"; 
    case 218:return "Ú"; 
    case 219:return "Û"; 
    case 217:return "Ù"; 
    case 220:return "Ü"; 
    case 221:return "Ý";
    case 225:return "á"; 
    case 226:return "â"; 
    case 230:return "æ"; 
    case 224:return "à"; 
    case 229:return "å"; 
    case 227:return "ã"; 
    case 228:return "ä"; 
    case 231:return "ç"; 
    case 233:return "é";
    case 234:return "ê"; 
    case 232:return "è"; 
    case 240:return "ð"; 
    case 235:return "ë"; 
    case 237:return "í"; 
    case 238:return "î"; 
    case 236:return "ì"; 
    case 239:return "ï"; 
    case 241:return "ñ"; 
    case 243:return "ó";
    case 244:return "ô"; 
    case 242:return "ò"; 
    case 248:return "ø"; 
    case 245:return "õ";
    case 246:return "ö"; 
    case 223:return "ß"; 
    case 254:return "þ"; 
    case 250:return "ú"; 
    case 251:return "û"; 
    case 249:return "ù"; 
    case 252:return "ü"; 
    case 253:return "ý"; 
    case 255:return "ÿ";
    case 162:return "¢"; 
    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]+";";     

}