在html頁面中顯示html代碼

Question

我有一個contentEditable div，並且我想顯示該div的內容的html腳本。 我正在使用bootbox提醒顯示我的代碼，並使用Rainbow插件突出顯示語法。

的是我使用的代碼：我還使用了xmp標籤

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

與此腳本：

<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>');