【前端】【微项目】【简易代码编辑器】打造一个简洁优雅的在线代码编辑器模板（附行号 + 跟随滚动功能）-CSDN博客

本文链接：https://blog.csdn.net/qq_59344127/article/details/149639615

✨打造一个简洁优雅的在线代码编辑器模板（附行号 + 跟随滚动功能）

在开发 AI 编程工具、在线代码平台或者教育平台时，一个简洁但实用的代码编辑器界面是必不可少的。虽然像 Monaco、CodeMirror、Ace 等专业编辑器功能强大，但如果只是想快速实现一个轻量编辑器，没必要引入这些复杂库。

今天，我们用 原生 HTML + TailwindCSS + 少量 JS，来实现一个可编辑的代码区域 + 自动行号 + 滚动联动效果的代码编辑器界面。

效果

web端

在这里插入图片描述

移动端

在这里插入图片描述

🧩 主要功能

✅ 支持代码编辑（contentEditable）
✅ 自动生成行号（JS 动态渲染）
✅ 行号滚动与代码同步
✅ 响应式设计，移动端适配
✅ 状态栏展示文件信息、光标行列数等
✅ TailwindCSS 实现高颜值 UI

🏗️ 关键实现结构

1. 行号 + 代码区结构

<div class="flex h-[70vh] relative bg-editor-bg rounded-lg">
  <!-- 行号 -->
  <div id="line-numbers-container" class="w-14 text-right text-line-number">
    <div id="line-numbers"></div>
  </div>

  <!-- 代码区域 -->
  <div id="code-scroll-container" class="flex-1 overflow-auto">
    <pre id="code-area" contenteditable="true" class="whitespace-pre-wrap">
def fibonacci(n):
    ...
    </pre>
  </div>
</div>

使用 pre 标签保持换行格式；
通过 contentEditable 启用编辑；
行号与代码区并排放置，布局用 flex 控制。

2. 行号同步核心逻辑（JavaScript）

function updateLineNumbers() {
  const codeArea = document.getElementById("code-area");
  const lineNumbers = document.getElementById("line-numbers");

  const lineCount = (codeArea.innerText.match(/\n/g) || []).length + 1;
  let html = "";
  for (let i = 1; i <= lineCount; i++) {
    html += `<div>${i}</div>`;
  }
  lineNumbers.innerHTML = html;
}

滚动同步代码：

codeScrollContainer.addEventListener("scroll", function () {
  lineNumbers.style.transform = `translateY(-${this.scrollTop}px)`;
});

🎯 核心原理就是使用 scrollTop 控制行号 translateY 偏移。

🎨 UI 美化亮点

使用 TailwindCSS 配色和 utility class 实现：

黑色代码背景：bg-editor-bg
浅灰滚动条：自定义 scrollbar-thin
状态栏：flex 布局，图标 + 文本组合
行号字体：font-code text-xs text-line-number

💡 扩展建议

基于这个模板进一步拓展：

✅ 语法高亮（可接入 Prism.js）
✅ 快捷键支持（如 Ctrl+S 保存）
✅ 文件切换 / 多文件页签
✅ 光标行列追踪（监听 keyup 事件）

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>代码编辑器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#165DFF",
              secondary: "#00B42A",
              danger: "#F53F3F",
              warning: "#FF7D00",
              dark: "#1D2129",
              "dark-light": "#4E5969",
              "light-bg": "#F2F3F5",
              "editor-bg": "#1E1E1E",
              "line-number": "#858585",
            },
            fontFamily: {
              code: ["Consolas", "Monaco", "Courier New", "monospace"],
            },
          },
        },
      };
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .scrollbar-thin {
          scrollbar-width: thin;
        }
        .scrollbar-thin::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        .scrollbar-thin::-webkit-scrollbar-thumb {
          background-color: rgba(156, 163, 175, 0.5);
          border-radius: 3px;
        }
        .editor-shadow {
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .glass-effect {
          backdrop-filter: blur(8px);
          background-color: rgba(255, 255, 255, 0.7);
        }
        .line-height-inherit {
          line-height: inherit;
        }
      }
    </style>
  </head>
  <body class="bg-gray-50 font-sans text-dark">
    <!-- 顶部导航栏 -->
    <header
      class="glass-effect border-b border-gray-200 fixed top-0 left-0 right-0 z-50"
    >
      <div
        class="container mx-auto px-4 py-3 flex items-center justify-between"
      >
        <div class="flex items-center space-x-2">
          <i class="fa fa-code text-primary text-xl"></i>
          <h1 class="text-xl font-bold text-dark">CodeWriter</h1>
        </div>

        <div class="hidden md:flex items-center space-x-4">
          <button
            class="px-3 py-1.5 text-sm rounded-md hover:bg-gray-100 transition-colors"
          >
            <i class="fa fa-file-o mr-1"></i> New
          </button>
          <button
            class="px-3 py-1.5 text-sm rounded-md hover:bg-gray-100 transition-colors"
          >
            <i class="fa fa-folder-open-o mr-1"></i> Open
          </button>
          <button
            class="px-3 py-1.5 text-sm rounded-md hover:bg-gray-100 transition-colors"
          >
            <i class="fa fa-save mr-1"></i> Save
          </button>
          <div class="h-6 w-px bg-gray-300"></div>
          <button
            class="px-3 py-1.5 text-sm rounded-md bg-primary text-white hover:bg-primary/90 transition-colors"
          >
            <i class="fa fa-play mr-1"></i> Run
          </button>
        </div>

        <div class="flex items-center space-x-3">
          <button
            class="p-1.5 rounded-full hover:bg-gray-100 transition-colors md:hidden"
          >
            <i class="fa fa-bars"></i>
          </button>
          <div class="relative">
            <img
              src="https://picsum.photos/id/64/200/200"
              alt="User avatar"
              class="w-8 h-8 rounded-full object-cover border-2 border-primary"
            />
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto pt-20 pb-10 px-4">
      <!-- 文件信息栏 -->
      <div
        class="bg-white rounded-t-lg border border-gray-200 border-b-0 flex items-center px-4 py-2"
      >
        <div class="flex items-center space-x-2">
          <div class="w-3 h-3 rounded-full bg-danger"></div>
          <div class="w-3 h-3 rounded-full bg-warning"></div>
          <div class="w-3 h-3 rounded-full bg-secondary"></div>
        </div>
        <div class="ml-4 flex items-center text-sm text-dark-light">
          <div
            class="px-3 py-1 rounded-t-md bg-editor-bg text-white font-medium"
          >
            main.py
          </div>
          <div class="ml-2 flex items-center">
            <i class="fa fa-globe mr-1"></i> Python
          </div>
        </div>
      </div>

      <!-- 编辑器区域 -->
      <div
        class="bg-editor-bg rounded-b-lg editor-shadow overflow-hidden flex h-[70vh] relative"
      >
        <!-- 行号区域 -->
        <div
          id="line-numbers-container"
          class="bg-[#252526] text-line-number font-code text-sm px-4 py-2 text-right w-14 border-r border-[#333] overflow-hidden"
        >
          <div id="line-numbers" class="text-xs">
            <!-- 行号将通过JS动态生成 -->
          </div>
        </div>

        <!-- 代码编辑区域 -->
        <div
          class="flex-1 overflow-auto scrollbar-thin"
          id="code-scroll-container"
        >
          <pre
            id="code-area"
            class="font-code text-gray-200 px-4 py-2 text-sm whitespace-pre-wrap"
          >
def fibonacci(n):
    """生成斐波那契数列的前n项"""
    sequence = []
    a, b = 0, 1
    for _ in range(n):
        sequence.append(a)
        a, b = b, a + b
    return sequence

# 打印前10个斐波那契数
print("斐波那契数列前10项:")
for i, num in enumerate(fibonacci(10)):
    print(f"第{i+1}项: {num}")

def factorial(n):
    """计算n的阶乘"""
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)

# 计算5的阶乘
print("\n5的阶乘是:", factorial(5))

class Calculator:
    """简单的计算器类"""
    def __init__(self):
        self.memory = 0
    
    def add(self, a, b=None):
        """加法运算"""
        if b is None:
            self.memory += a
            return self.memory
        else:
            return a + b
    
    def subtract(self, a, b=None):
        """减法运算"""
        if b is None:
            self.memory -= a
            return self.memory
        else:
            return a - b</pre
          >
        </div>
      </div>

      <!-- 状态栏 -->
      <div
        class="mt-3 flex flex-wrap items-center justify-between bg-white rounded-lg border border-gray-200 p-3 text-sm text-dark-light"
      >
        <div class="flex items-center space-x-4 mb-2 sm:mb-0">
          <div class="flex items-center">
            <i class="fa fa-git mr-1"></i> master
          </div>
          <div class="flex items-center">
            <i class="fa fa-check-circle mr-1 text-secondary"></i> 无错误
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="flex items-center">
            <i class="fa fa-file-text-o mr-1"></i> 128 行
          </div>
          <div class="flex items-center">
            <i class="fa fa-tachometer mr-1"></i> UTF-8
          </div>
          <div class="flex items-center">
            <i class="fa fa-indent mr-1"></i> 空格: 4
          </div>
          <div class="flex items-center">
            <i class="fa fa-cursor mr-1"></i> 第 1 行, 第 1 列
          </div>
        </div>
      </div>
    </main>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const codeScrollContainer = document.getElementById(
          "code-scroll-container"
        );
        const codeArea = document.getElementById("code-area");
        const lineNumbers = document.getElementById("line-numbers");
        const lineNumbersContainer = document.getElementById(
          "line-numbers-container"
        );

        // 初始化行号
        updateLineNumbers();

        // 监听滚动事件，使行号区域跟随滚动
        codeScrollContainer.addEventListener("scroll", function () {
          lineNumbers.style.transform = `translateY(-${this.scrollTop}px)`;
        });

        // 监听代码区域变化，更新行号
        const observer = new MutationObserver(updateLineNumbers);
        observer.observe(codeArea, {
          childList: true,
          characterData: true,
          subtree: true,
        });

        // 监听窗口大小变化，更新行号
        window.addEventListener("resize", updateLineNumbers);

        // 使代码区域可编辑
        codeArea.contentEditable = true;

        // 更新行号
        function updateLineNumbers() {
          // 获取代码区域的行高
          const lineHeight = parseInt(getComputedStyle(codeArea).lineHeight);

          // 设置行号容器的行高与代码区域一致
          lineNumbers.style.lineHeight = `${lineHeight}px`;

          // 计算行数
          const lineCount = (codeArea.innerText.match(/\n/g) || []).length + 1;
          let lineHTML = "";

          for (let i = 1; i <= lineCount; i++) {
            lineHTML += `<div>${i}</div>`;
          }

          lineNumbers.innerHTML = lineHTML;

        }

      });
    </script>
  </body>
</html>