предварительный просмотр HTML-кода на HTML-странице

Question

Я хочу просмотреть HTML-код на HTML-странице. но когда я делаю это, браузер обрабатывает его как фактический HTML, а не просто просматривает его (например, включая его теги). Как я могу предотвратить это?
Вы можете рассматривать эту страницу как учебник по HTML, который хочет представить ученикам несколько примеров HTML.

Answer 1

Поверните знаки < на <, а знаки > на >.

htmlspecialchars() сделает это за вас в PHP.

Answer 2

Вот модуль JavaScript, который я написал для написания отчета. Пользователь может ввести HTML или Markdown в текстовой области, а затем увидеть готовый результат и переключаться между ними.

function Report (id) {
  this.div = gel(id);
  this.div.style.height = '100%';
  this.trip;
}



//initializes the Report object and renders the HTML of the report to this.div
Report.prototype.init = function(trip) {
  this.report = {'author':trip.owner, 
         'time_created':trip.time_created, 
         'title':trip.title,
         'text':trip.summary,
         'url':trip.url,
         'category':trip.category,
         'id':trip.id}
  this.div.appendChild(this.renderHTML());
}

//show the edit form when the user clicks the edit link    
Report.prototype.editForm = function() {
  var r = this.report;
  var form = dec('form');
  form.action = '/trips/submit_link';
  form.method = 'POST';
  var t = dec('table');
  t.style.width ='95%';
  t.style.paddingBottom ='10px';
  var tr = dec('tr');
  t.appendChild(tr);
  var td = dec('td');
  td.style.width = '15%';
  var strong = dec('strong');
  strong.appendChild(dct('Title'));
  td.appendChild(strong);
  tr.appendChild(td);
  td = dec('td');
  td.style.width = '100%';
  var input = dec('input');
  input.type = 'text';
  input.style.width = '100%';
  input.className = "required" 
  input.name = 'reportTitle';
  input.value = r.title;
  td.appendChild(input); 
  tr.appendChild(td);
  tr = dec('tr');
  t.appendChild(tr);
  td = dec('td');
  var input = dec('input');
  var strong = dec('strong');
  strong.appendChild(dct('URL '));
  td.appendChild(strong);
  tr.appendChild(td);
  td = dec('td');
  input.type = 'text';
  input.name = 'reportURL';
  //input.className = "validate-url" 
  input.value = r.url;
  input.style.width = '100%';
  td.appendChild(input);
  tr.appendChild(td); 
  form.appendChild(t);
  var strong = dec('strong');
  strong.appendChild(dct('Summary or Report '));
  form.appendChild(strong);
  var input = dec('textarea');
  input.style.width = '96%';
  input.style.height = '350px';
  input.name = 'reportBody';
  var converter = new Showdown.converter();
  input.innerHTML = converter.makeHtml(r.text);
  input.style.marginTop = "5px";
  input.style.marginBottom = "5px";
  form.appendChild(input);
  var strong = dec('strong');
  strong.appendChild(dct('Category'));
  strong.style.marginRight = '10px';
  form.appendChild(strong);
  var input = dec('input');
  input.type = 'text';
  input.name = 'category';
  input.style.width = '75%';
  input.value = r.category;
  form.appendChild(input);
  form.appendChild(dec('br'));
  form.appendChild(dec('br'));
  input = dec('input');
  input.type = 'submit';
  input.value = 'Save';
  input.style.cssFloat = 'left';
  input.style.styleFloat = 'left';
  input.style.fontWeight = 'bold';
  form.appendChild(input); 
  input = dec('input');
  input.type = 'button';
  input.value = 'Cancel';
  input.style.color = '#cc5500';
  input.style.fontWeight = 'bold';
  input.style.cssFloat = 'right';
  input.style.styleFloat = 'right';
  var self = this;
  input.onclick = function() {
    rac(self.div);
    self.div.appendChild(self.renderHTML());
  }
  form.appendChild(input);
  input = dec('input');
  input.type = 'hidden';
  input.name = 'tripID';
  input.value = tripID;
  form.appendChild(input);
  return form;
}

//renders the HTML of the report to this.div
Report.prototype.renderHTML = function() {  
  var report = this.report
  var rDiv = dec('div');
  rDiv.style.height = '100%';
  var h1 = dec ('h1')
  if (report.url) {
    var a = dec('a')
    a.href = report.url;
    a.target = '_blank';
    a.appendChild(dct(report.title));
    h1.appendChild(a);
    var img = dec('img');
    img.src = '/site_media/images/external_link.gif';
    img.style.marginLeft = '5px';
    h1.appendChild(img);
  } else {
    h1.appendChild(dct(report.title));
  }
  if (report.author == user) {
    var a = dec('a');
    var self = this;
    a.onclick = function() { 
      rac(self.div);
      self.div.appendChild(self.editForm());
      attachToForms();
    }
    a.className = 'jLink';
    a.appendChild(dct('(edit)'));
    h1.appendChild(dct(' '));
    h1.appendChild(a);
  }
  rDiv.appendChild(h1);
  rDiv.appendChild(dct('Posted on '));
  rDiv.appendChild(dct(report.time_created));
  rDiv.appendChild(dct(' by '));
  var a = dec('a');
  a.href = '/user/' + report.author;
  a.appendChild(dct(report.author));
  rDiv.appendChild(a);
  if (report.url) {
    var div = dec('div');
    div.style.color = 'green';
    div.style.fontSize = '.8em';
    div.appendChild(dct(report.url));
    rDiv.appendChild(div);
  }
  rDiv.appendChild(dec('hr'));
  var div = dec('div');
  div.style.height = '75%';
  div.style.overflowY = 'auto';
  if (report.text) {
    var converter = new Showdown.converter();
    div.innerHTML = converter.makeHtml(report.text);
  }
  rDiv.appendChild(div)
  rac(this.div)
  this.div.appendChild(rDiv)
  return rDiv; 
}

Answer 3

Поместите код HTML между тегами <xmp></xmp>.

Answer 4

Я не уверен, что вы подразумеваете под «предварительным просмотром» html-кода, поскольку вы видите его, когда набираете его в текстовом редакторе. Возможно, вы ищете опцию «Просмотр источника» в веб-браузере при посещении страницы?

Если вы хотите, чтобы браузер не «съел» ваш html-код и не интерпретировал его, и заинтересованы в том, чтобы увидеть код, а не отображать его, вы можете использовать htmlspecialchars () .