如何在 ace 编辑器中显示 html 站点的代码

How to display code of html site in ace editor

本文关键字：html 站点 代码 显示 ace 编辑器      更新时间：2023-09-26

我想在我的ace编辑器中显示整个html dom，就像在ace编辑器站点的"嵌入指南"上一样。

问题是我的编辑器显示完整的行数，但只显示javascript部分。

这是我的王牌代码：

<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>

唯一显示的是：

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

我做错了什么？

现在，编辑器div 中的代码被解析为 HTML(其中大部分在此上下文中无效(，因此仅显示文本部分。为了防止这种情况，您必须转义所有 HTML 保留字符。您可以使用像这样的在线编码器，这将生成如下所示的代码，然后您可以将其复制粘贴到编辑器div 中：

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

如果你看一下 Ace 嵌入指南的源代码(提示：搜索单词 DOCTYPE 的第二次出现(，你会看到同样的事情。

相关文章：