HTMLページでHTMLコードをプレビューする

Question

HTMLページでいくつかのHTMLコードをプレビューします。しかし、私がこれを行うと、ブラウザは実際のHTMLとして扱います（例えばタグを含む）。これを防ぐ方法を教えてください。
このページは、いくつかのHTMLの例を学習者に提示したいHTMLのチュートリアルと考えることができます。

Answer 1

<の標識を<に、>の標識を>に変えてください。

htmlspecialchars()は、PHPでこれを行います。

Answer 2

HTMLコードを「プレビュー」するのは、テキストエディタに入力するときに表示されるため、どういう意味なのか分かりません。おそらく、ページを訪問しているときに、Webブラウザで「ソースの表示」オプションを探していますか？

ブラウザがHTMLコードを摂取して解釈することを防ぎ、レンダリングではなくコードを表示することに興味がある場合は、htmlspecialchars（）を使用できます。

Answer 3

<xmp></xmp>タグの間にHTMLコードを挿入します。

Answer 4

ここには、レポートを書くために書いた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; 
}