layui代码行号：显示行号与代码折叠-优快云博客

layui代码行号：显示行号与代码折叠

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

还在为代码阅读体验不佳而烦恼吗？layui的code组件提供了强大的代码行号显示和代码折叠功能，让技术文档和博客的代码展示更加专业和易读。本文将深入解析layui代码行号功能的实现原理、配置方法和最佳实践。

为什么需要代码行号？

在技术文档、教程和代码分享场景中，代码行号具有重要作用：

精准定位：便于讨论和引用特定代码行
错误排查：快速定位编译错误或运行时异常
教学指导：在教程中精确指示操作位置
代码评审：便于团队协作和代码审查

基础行号显示配置

layui的code组件默认开启行号显示功能，只需简单配置即可使用：

<!-- 引入layui -->
<link href="https://cdn.jsdelivr.net/npm/layui@2.9.21/dist/css/layui.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/layui@2.9.21/dist/layui.js"></script>

<!-- 基础代码块示例 -->
<pre class="layui-code">
function helloWorld() {
  console.log("Hello, World!");
  return "Success";
}
</pre>

<script>
layui.use('code', function(){
  // 初始化代码组件
  layui.code({
    elem: '.layui-code',
    ln: true  // 默认就是true，可省略
  });
});
</script>

行号配置参数详解

参数名	类型	默认值	描述
`ln`	boolean	`true`	是否显示行号
`wordWrap`	boolean	`true`	是否自动换行
`lang`	string	`'text'`	代码语言类型
`langMarker`	boolean	`false`	是否显示语言标记

高级行号功能

1. 自定义行号样式

通过CSS可以自定义行号的显示样式：

/* 自定义行号样式 */
.layui-code-line-number {
  color: #666;
  background-color: #f8f8f8;
  border-right: 1px solid #e8e8e8;
  padding: 0 8px;
  text-align: right;
  user-select: none;
}

/* 深色主题行号样式 */
.layui-code-theme-dark .layui-code-line-number {
  color: #888;
  background-color: #2d2d2d;
  border-right-color: #444;
}

2. 动态行号宽度调整

layui自动处理多行代码的行号宽度适应：

layui.code({
  elem: '.layui-code',
  ln: true,
  // 当代码超过100行时自动调整行号宽度
  done: function(obj) {
    console.log('代码渲染完成，行号已自适应');
  }
});

3. 行号与语法高亮结合

结合第三方语法高亮库，实现更专业的代码展示：

<!-- 引入highlight.js -->
<link href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/github.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/highlight.min.js"></script>

<pre class="layui-code" lay-options="{lang: 'javascript', highlighter: 'hljs'}">
function calculateSum(a, b) {
  // 这是一个简单的加法函数
  const result = a + b;
  return result;
}
</pre>

<script>
layui.use('code', function(){
  layui.code({
    elem: '.layui-code',
    ln: true,
    highlighter: "hljs",
    codeRender: function(code, opts) {
      return hljs.highlight(code, {language: opts.lang}).value;
    }
  });
});
</script>

代码折叠功能实现

虽然layui code组件本身不直接提供代码折叠功能，但我们可以通过扩展实现：

方案一：使用原生JavaScript实现折叠

// 代码折叠功能实现
function setupCodeFolding() {
  const codeBlocks = document.querySelectorAll('.layui-code');
  
  codeBlocks.forEach(block => {
    const header = document.createElement('div');
    header.className = 'code-fold-header';
    header.innerHTML = `
      <span class="fold-icon">▶</span>
      <span class="fold-text">折叠代码</span>
    `;
    
    header.addEventListener('click', function() {
      const content = block.querySelector('.layui-code-wrap');
      const icon = this.querySelector('.fold-icon');
      
      if (content.style.display === 'none') {
        content.style.display = 'block';
        icon.textContent = '▶';
        this.querySelector('.fold-text').textContent = '折叠代码';
      } else {
        content.style.display = 'none';
        icon.textContent = '▼';
        this.querySelector('.fold-text').textContent = '展开代码';
      }
    });
    
    block.insertBefore(header, block.firstChild);
  });
}

// 初始化折叠功能
document.addEventListener('DOMContentLoaded', setupCodeFolding);

方案二：集成第三方折叠库

<!-- 引入第三方折叠库 -->
<script src="https://cdn.jsdelivr.net/npm/foldcode@1.2.0/dist/foldcode.min.js"></script>

<pre class="layui-code foldable">
// 可折叠的代码块
function complexFunction() {
  // 第一部分逻辑
  const data = fetchData();
  
  // 第二部分逻辑
  const processed = processData(data);
  
  // 第三部分逻辑
  return formatResult(processed);
}
</pre>

<script>
layui.use('code', function(){
  layui.code({
    elem: '.layui-code',
    ln: true,
    done: function() {
      // 初始化折叠功能
      FoldCode.init('.foldable', {
        foldText: '折叠',
        unfoldText: '展开',
        foldIcon: '▼',
        unfoldIcon: '▶'
      });
    }
  });
});
</script>

实战案例：技术文档代码展示

案例1：API文档代码示例

<pre class="layui-code" lay-options="{ln: true, lang: 'javascript', header: true}">
/**
 * 用户服务类
 * @class UserService
 */
class UserService {
  /**
   * 创建用户
   * @param {Object} userData - 用户数据
   * @returns {Promise<User>}
   */
  async createUser(userData) {
    try {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
      });
      
      if (!response.ok) {
        throw new Error('创建用户失败');
      }
      
      return await response.json();
    } catch (error) {
      console.error('Error creating user:', error);
      throw error;
    }
  }
  
  /**
   * 获取用户列表
   * @param {number} page - 页码
   * @param {number} limit - 每页数量
   * @returns {Promise<User[]>}
   */
  async getUsers(page = 1, limit = 10) {
    // 实现代码...
  }
}
</pre>

案例2：配置示例代码

<pre class="layui-code" lay-options="{ln: true, lang: 'json', theme: 'dark'}">
{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "lib": ["es2020", "dom"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}
</pre>

性能优化建议

1. 大量代码行的优化

当处理超过1000行代码时，建议启用虚拟滚动：

layui.code({
  elem: '.large-code-block',
  ln: true,
  codeStyle: 'height: 500px; overflow: auto;',
  done: function(obj) {
    // 添加虚拟滚动优化
    setupVirtualScroll(obj.container);
  }
});

function setupVirtualScroll(container) {
  // 虚拟滚动实现逻辑
  const visibleLines = 50;
  const lineHeight = 20;
  
  container.addEventListener('scroll', function() {
    const scrollTop = this.scrollTop;
    const startLine = Math.floor(scrollTop / lineHeight);
    const endLine = startLine + visibleLines;
    
    // 只渲染可见区域的代码行
    renderVisibleLines(startLine, endLine);
  });
}

2. 内存管理

对于非常大的代码文件，建议分块加载：

// 分块加载大文件代码
async function loadLargeCode(fileUrl, codeElement) {
  const response = await fetch(fileUrl);
  const reader = response.body.getReader();
  let receivedLength = 0;
  let chunks = [];
  
  while(true) {
    const {done, value} = await reader.read();
    
    if (done) break;
    
    chunks.push(value);
    receivedLength += value.length;
    
    // 每接收1MB数据渲染一次
    if (receivedLength > 1024 * 1024) {
      renderPartialCode(chunks, codeElement);
      chunks = [];
      receivedLength = 0;
    }
  }
  
  // 渲染剩余数据
  if (chunks.length > 0) {
    renderPartialCode(chunks, codeElement);
  }
}

常见问题解答

Q1: 行号显示不准确怎么办？

A: 检查代码中的空行和缩进，确保代码格式正确。layui会自动处理行号计数。

Q2: 如何自定义行号起始值？

A: 目前layui不支持直接修改行号起始值，但可以通过CSS计数器实现：

.layui-code-wrap {
  counter-reset: line-number 5; /* 从第6行开始计数 */
}

.layui-code-line-number::before {
  counter-increment: line-number;
  content: counter(line-number) ".";
}

Q3: 行号点击事件如何监听？

A: 可以通过事件委托监听行号点击：

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('layui-code-line-number')) {
    const lineNumber = e.target.textContent.replace('.', '');
    console.log('点击了第', lineNumber, '行');
    // 执行相应的行操作
  }
});

最佳实践总结

适度使用行号：对于短代码可以省略行号，长代码建议显示
结合语法高亮：使用highlight.js或Prism.js提升代码可读性
响应式设计：确保行号在不同设备上都能正常显示
性能考虑：对于超大文件实现虚拟滚动或分块加载
无障碍访问：为行号添加适当的ARIA属性

通过合理配置layui的code组件，你可以创建出既美观又实用的代码展示界面，极大提升技术文档的用户体验。

下一步学习建议：

探索layui其他组件的使用技巧
学习如何自定义代码主题风格
了解代码复制、导出等扩展功能

记得点赞收藏，方便后续查阅更多layui使用技巧！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考