Codemirror关闭标签不是样式答案

【问题标题】：Codemirror Closing tags not stylingCodemirror关闭标签不是样式
【发布时间】：2021-06-07 11:10:27
【问题描述】：

我正在尝试使用一个代码编辑器来显示单击按钮的结果。我已经适应了How to output result of codemirror in iframe?，但我遇到了示例代码上的结束标签没有被样式化的问题。

请参阅下面的屏幕截图和代码。

如果有人能看一看并指出正确的方向，我将不胜感激（我对 JS 不太擅长）。

<!DOCTYPE html>
<html>

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"/> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/theme/neo.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.js"></script>   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>  
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/fold/indent-fold.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/edit/matchbrackets.min.js"></script>
   
  <style>
  body {
    background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
  </head>

  <body>  
      <div id="codeeditor"></div>
      <iframe>Example</iframe>
      <button>RUN</button>
    <script>
       var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "<html>\n<body class=\"fdf\">\n<h1>Hello world</h1>\n<button type=\"button\" disabled>Click Me!</button>\n</body>\n</html>",
    theme: "neo",
    lineNumbers: true,
    matchBrackets: true
});

$("button").click(function(){     
  $("iframe").contents().find("body").html(editor.getValue());
})
    </script>
  </body>

</html>

【问题讨论】：

标签： codemirror

【解决方案1】：

我修好了。它没有正确配置。还将代码放在单独的 html 文件中并导入它有助于所有格式设置。

您需要以下文件（加上任何主题 css 文件）：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/xml/xml.min.js"></script>

这是新的脚本配置：

  var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "{{ range $matches }}{{ .Content }}{{ end }}",
    theme: "neo",
    mode: "htmlmixed",
    htmlMode: true,
    lineNumbers: true,
    matchBrackets: true,
    smartIndent: true,
  });

【讨论】：