在滚动框中显示代码

时间:2016-04-11 14:53:24

标签: html

我正在为我和班级建立一个简历网站。我有一些我为其他课程制作的网站,并希望将这些网站添加为我的投资组合。我想包含代码,但我不想要一堆代码的屏幕截图,所以我想把它放在一个滚动框中。问题是它在滚动框内显示一个网站而不仅仅是代码。有没有办法可以制作一个能够显示html标签并忽略其效果的滚动框?

1 个答案:

答案 0 :(得分:0)

您必须使用<code></code>标记或<pre></pre>标记。你还必须使用javascript来显示html标签。这是一个功能:

String.prototype.escapeHTML = function () {                                        
  return(                                                                 
    this.replace(/>/g,'&gt;').
         replace(/</g,'&lt;').
         replace(/"/g,'&quot;')
  );
};
var codeEl = document.getElementById('myelement');
if (codeEl) {
  codeEl.innerHTML = codeEl.innerHTML.escapeHTML();
}

这样的HTML。

<pre id="myelement">
<html>my html begins here</html>
</pre>