前端代码编辑器

通过本文的方法可以将带有语法高亮的编辑器嵌入您的网站，将下面代码添加到网站模板适当位置即可。

<h3 class="question">Write a Program to calculate Two Number</h3>

    <div class="editor-container">
      <div id="editor">// Start Writing Codes Here</div>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.5.3/ace.js"></script>

<script>
let editor = document.querySelector("#editor");
ace.edit(editor, {
  theme: "ace/theme/cobalt",
  mode: "ace/mode/javascript",
});
</script>

<style>
  h3.question {
  font-family: system-ui;
  font-size: 24px;
  text-align: center;
  font-weight: 100;
}

.editor-container {
  width: 100%;
  height: 540px;
  margin: 20px auto;
  position: relative;
}

#editor {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  font-size: 20px;
}
</style>

上述代码选择的是 twilight 主题和 Javascript 语言，可通过下面的代码，选择其它主题和支持的语言。

theme: "ace/theme/twilight",
  mode: "ace/mode/javascript",

ace.js项目地址