Блог

Google Prettify не отображал HTML должным образом для меня, пока я не обнаружил в stackoverflow, что я должен заменить все < на amp;< и все > на amp;> .

Это действительно необходимо? Есть ли более простой способ добиться этого?

Я хочу отобразить простой код, подобный следующему:

 <h1>Header</h1>

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

Могу ли я использовать что-нибудь, что будет определять все как код между <pre> тегами? Например, когда я набираю код в stackoverflow, мне не требуется заменять < и > .

Вы могли бы создать форму с помощью PHP, чтобы использовать введенный HTML и заменить HTML-теги с помощью PHP-функции htmlentities() ИЛИ вы могли бы использовать этот URL, на который я наткнулся в поисках решения для вас. http://www.boallen.com/htmlentities.html Вы вводите свой код, и он будет выводить ваш код с примененными свойствами htmlentities.

Не уверен, насколько вы разбираетесь в PHP, но вы можете прочитать, как работает функция здесь: http://us3.php.net/manual/en/function.htmlentities.php

Google нуждается в этом. вы можете использовать язык предварительной обработки, такой как php, для замены необходимых символов. Я уверен, что вы можете сделать это и в javascript.

Редактировать: удален мой предыдущий комментарий, поскольку он должен был быть ответом на другую тему prettify 🙂

Однако вот локальное решение 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 "amp;nbsp;";
  }
  return original;  
}

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

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

  if( c <= 127 ) 
    return original;

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

}