如何在静态GitHub Pages中嵌入无需Node.js的代码编辑器？

先解决你用Ace.js遇到的问题 #

你之前碰到的Uncaught ReferenceError: require is not defined，是因为误用了Node.js环境的模块化写法——Ace.js本身完全支持纯静态浏览器环境，根本不需要Node.js。换用预编译的浏览器版本就行：

• 第一步：引入CDN上的Ace脚本

  <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.32.0/src-min-noconflict/ace.js"></script>
  

• 第二步：添加编辑器容器

  <div id="editor" style="width: 500px; height: 300px;"></div>
  

• 第三步：初始化编辑器

  <script>
    const editor = ace.edit("editor");
    // 设置代码语言，比如JavaScript
    editor.session.setMode("ace/mode/javascript");
    // 选个主题
    editor.setTheme("ace/theme/monokai");
    // 填充初始代码
    editor.setValue("console.log('Hello from Ace in GitHub Pages!');");
    // 光标移到开头
    editor.navigateFileStart();
  </script>
  

  直接把这些代码放进你的静态HTML里，就能在GitHub Pages上正常运行，完全不用Node.js。

其他无依赖的备选编辑器 #

如果不想用Ace.js，这些纯前端工具也能满足需求：

• CodeMirror 6：轻量功能全，支持多种语言，同样CDN引入即可使用：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@6.0.1/lib/codemirror.css">
  <script src="https://cdn.jsdelivr.net/npm/codemirror@6.0.1/lib/codemirror.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@6.0.1/mode/javascript/javascript.js"></script>
  <textarea id="editor"></textarea>
  <script>
    const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
      lineNumbers: true,
      mode: "javascript",
      theme: "monokai"
    });
  </script>
  

• SimpleMDE：专为Markdown设计的编辑器，纯静态实现，适合需要Markdown编辑的场景。

所有这些工具都不需要npm安装或Node.js环境，完美适配GitHub Pages的静态环境。

内容的提问来源于stack exchange，提问作者WooHooASDF