在html页面中显示html代码

Question

我有一个contentEditable div，我想显示这个div内容的html脚本。 我正在使用bootbox警报显示我的代码，使用Rainbow插件来突出显示语法。

这是我正在使用的代码：

bootbox.alert('<pre><code data-language="html">'+ document.getElementById('editor').innerHTML + '</code></pre>'); 

我还使用了xmp标记和这个脚本：

<pre><![CDATA[
This is a demo, tags like <p> will
appear literally.
]]></pre>

如本文所示：How to display raw html code in PRE or something like it but without escaping it，但没有一个有效。

这就是我得到的：

我该如何解决这个问题？

Answer 1

使用实体，例如

var encodeHtmlEntity = function(str) {
  var buf = [];
  for (var i=str.length-1;i>=0;i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }
  return buf.join('');
};
bootbox.alert('<pre><code data-language="html">'+ encodeHtmlEntity(document.getElementById('editor').innerHTML)) + '</code></pre>');