0

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 :

enter image description here

How can I solve this ?

Community
  • 1
  • 1
Renaud is Not Bill Gates
  • 1,684
  • 34
  • 105
  • 191

1 Answers1

0

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>');
Cilan
  • 13,101
  • 3
  • 34
  • 51
  • If you just concatenate the value of `createTextNode` you'll get `[object Text]`. You need to append the result to another element node. See this fiddle for working code: http://jsfiddle.net/4Mwxn/2/. – flitig Mar 01 '14 at 22:03