在html页面中显示html代码(Display html code in html page)

在html页面中显示html代码(Display html code in html page)

我有一个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>

如本文所示： 如何在PRE或类似的东西中显示原始html代码，但没有转义它 ，但它们都没有工作。

这就是我得到的：

我怎么解决这个问题？

I've a contentEditable div, and I want to display the html script for the content of this div. I'm using a bootbox alert to display my code, and the Rainbow Plugin to highlight the syntax.

The is the code I'm using :

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

I also used the xmp tag and this script:

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

as shown in this article : How to display raw html code in PRE or something like it but without escaping it, but none of them has worked.

This is what I'm getting :

How can I solve this ?

最满意答案

使用实体，比如

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

Use entities, like

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