How to display code of html site in ace editor

StackOverflow https://stackoverflow.com/questions/19306024

  •  30-06-2022
  •  | 
  •  

Pregunta

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?

¿Fue útil?

Solución

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top