How to display code of html site in ace editor

Question

I want to display the whole html dom in my ace editor like on the "Embedding Guide" on the ace editor site.

The problem is that my editor displays the full number of lines but only the javascript section.

this is my ace code:

<div id="editor">
<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="mostslider/themes/default/default.css">

    </head>
    <body>

        <div class="silder-wrapper default">
            <div id="slider">
                <img src="photo1.jpg" />
                <img src="photo1.jpg" />
                <img src="photo1.jpg" />
            </div>
        </div>

        <script src="js/vendor/jquery-1.10.1.min.js"></script>
        <script src="mostslider/slider.min.js"></script>

        <script>
            $(document).ready(function(){
                var slider = $("#slider").slider({
                   metrics: {
                       width: 800,
                       height: 600
                   } 
                });
            });
        </script>

    </body>
</html>
</div>

The only thing that gets displayed is:

$(document).ready(function(){
   var slider = $("#slider").slider({
         metrics: {
             width: 800,
             height: 600
         } 
    });
 });

What am I doing wrong?

You can't just chuck a whole <html> document inside a <div>... — Brian
– Brian, Commented Oct 10, 2013 at 21:12
Yep ok. But how did they get the whole document into the editor on the ace website? — jurihandl
– jurihandl, Commented Oct 10, 2013 at 21:30

Jacob Bundgaard · Accepted Answer · 2013-10-10 22:13:05Z

3

Right now, the code within the editor div is being parsed as HTML (most of it invalid in this context), and thus, only the text parts are being shown. To prevent this, you'll have to escape all the HTML reserved characters. You can use an online encoder like this one, which will result in code like the following, which you can then copy-paste into the editor div:

&lt;div id=&quot;editor&quot;&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
...

If you have a look at the source code for the Ace embedding guide (hint: search for the second occurrence of the word DOCTYPE), you'll see the same thing.

answered Oct 10, 2013 at 22:13

Jacob Bundgaard

1,10513 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display code of html site in ace editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related