学习目标

  1. 掌握使用Tailwind CSS实现GitHub代码查看页的整体布局
  2. 学习如何构建代码查看界面，包括语法高亮和行号显示
  3. 实现文件头部信息区域，包括文件路径和操作按钮
  4. 理解如何使用Tailwind创建交互式代码行号和行高亮功能
  5. 学习实现响应式设计，确保页面在不同设备上的良好表现

页面分析

GitHub代码查看页是开发者浏览和查看仓库代码的核心界面，它包含以下主要区域：

  1. 顶部导航栏 - 与仓库详情页相同，包含GitHub logo、搜索框和用户菜单
  2. 仓库信息头部 - 显示仓库名称和基本信息
  3. 仓库导航菜单 - 提供Code、Issues、PR等功能入口
  4. 文件路径导航 - 显示当前文件的目录路径
  5. 文件操作栏 - 包含各种文件操作按钮（查看原始文件、编辑、删除等）
  6. 代码查看区 - 显示代码内容，包括行号和语法高亮
  7. 文件底部 - 可能包含提交信息或其他元数据

在本节中，我们将重点关注文件路径导航、文件操作栏以及代码查看区域的实现，因为这些部分是代码查看页面的核心特色。

实现步骤

第1步：准备HTML骨架与Tailwind配置

首先创建一个基础HTML文件，并引入Tailwind CSS和必要的配置：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>GitHub 代码查看页 - Tailwind CSS 复刻</title>
  7.   <!-- 引入Tailwind CSS -->
  8.   <script src="https://cdn.tailwindcss.com"></script>
  9.   <!-- 配置Tailwind为GitHub风格 -->
  10.   <script>
  11.     tailwind.config = {
  12.       theme: {
  13.         extend: {
  14.           colors: {
  15.             'github-blue': '#0969da',
  16.             'github-green': '#2da44e',
  17.             'github-red': '#cf222e',
  18.             'github-yellow': '#bf8700',
  19.             'github-purple': '#8250df',
  20.             'github-bg': '#f6f8fa',
  21.             'github-border': '#d0d7de',
  22.             'github-text': '#24292f',
  23.             'github-text-secondary': '#57606a',
  24.             'github-line-selected': '#fff8c5',
  25.             'github-line-highlight': '#fffbdd',
  26.             'github-diff-add': '#e6ffec',
  27.             'github-diff-delete': '#ffebe9',
  28.           },
  29.           spacing: {
  30.             '4.5': '1.125rem',
  31.           }
  32.         },
  33.       },
  34.     }
  35.   </script>
  36.   <!-- 添加Prism.js用于代码高亮 -->
  37.   <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" rel="stylesheet" />
  38.   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
  39.   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-javascript.min.js"></script>
  40.   <style>
  41.     /* 自定义样式以匹配GitHub的代码高亮 */
  42.     .token.comment { color: #6e7781; }
  43.     .token.keyword { color: #cf222e; }
  44.     .token.string { color: #0a3069; }
  45.     .token.function { color: #8250df; }
  46.     .token.number { color: #0550ae; }
  47.     .token.operator { color: #24292f; }
  48.     .token.class-name { color: #953800; }
  49.     pre[class*="language-"] {
  50.       margin: 0;
  51.       padding: 0;
  52.       background: transparent;
  53.     }
  54.     code[class*="language-"] {
  55.       background: transparent;
  56.       padding: 0;
  57.       border-radius: 0;
  58.       white-space: pre;
  59.       word-break: normal;
  60.       font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  61.     }
  62.     /* 隐藏Prism行号，我们将自己实现 */
  63.     .line-numbers .line-numbers-rows {
  64.       display: none;
  65.     }
  66.   </style>
  67. </head>
  68. <body class="bg-white text-github-text">
  69.   <!-- 页面内容将在这里构建 -->
  70. </body>
  71. </html>

我们增加了与代码高亮相关的颜色配置，并引入了Prism.js库来帮助我们实现语法高亮。同时添加了自定义CSS来匹配GitHub的代码高亮风格。

注意：通常在实际项目中，我们会通过配置Tailwind来实现自定义样式，但为了简化演示，这里直接使用了内联样式。

第2步：实现文件路径导航

文件路径导航显示当前文件在仓库中的位置：

  1. <!-- 文件路径导航 -->
  2. <div class="bg-white border-b border-github-border">
  3.   <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3">
  4.     <div class="flex flex-wrap items-center text-sm">
  5.       <div class="flex items-center">
  6.         <a href="#" class="text-github-blue hover:underline">repository-name</a>
  7.         <span class="mx-1 text-github-text-secondary">/</span>
  8.       </div>
  10.       <!-- 中间目录 -->
  11.       <div class="flex items-center">
  12.         <a href="#" class="text-github-blue hover:underline">src</a>
  13.         <span class="mx-1 text-github-text-secondary">/</span>
  14.       </div>
  16.       <div class="flex items-center">
  17.         <a href="#" class="text-github-blue hover:underline">components</a>
  18.         <span class="mx-1 text-github-text-secondary">/</span>
  19.       </div>
  21.       <!-- 当前文件 -->
  22.       <div class="flex items-center font-semibold">
  23.         <span>Button.js</span>
  24.       </div>
  25.     </div>
  26.   </div>
  27. </div>

这个路径导航设计得非常简洁直观，使用斜杠分隔每个目录层级，并将当前文件加粗显示。

第3步：实现文件操作栏

文件操作栏包含各种文件操作按钮和文件信息：

  1. <!-- 文件操作栏 -->
  2. <div class="bg-github-bg border-b border-github-border">
  3.   <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-2">
  4.     <div class="flex flex-col lg:flex-row lg:items-center justify-between">
  5.       <!-- 左侧：文件信息和操作按钮 -->
  6.       <div class="flex items-center flex-wrap mb-2 lg:mb-0">
  7.         <!-- 行数和大小信息 -->
  8.         <div class="flex items-center text-sm text-github-text-secondary mr-4">
  9.           <span>78 lines (64 sloc)</span>
  10.           <span class="mx-1">·</span>
  11.           <span>2.3 KB</span>
  12.         </div>
  14.         <!-- 操作按钮组 -->
  15.         <div class="flex items-center space-x-2">
  16.           <!-- 编辑按钮 -->
  17.           <button class="flex items-center text-xs bg-github-bg border border-github-border rounded-md px-2 py-1 hover:bg-gray-100">
  18.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  19.               <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
  20.             </svg>
  21.             Edit
  22.           </button>
  24.           <!-- 原始文件按钮 -->
  25.           <button class="flex items-center text-xs bg-github-bg border border-github-border rounded-md px-2 py-1 hover:bg-gray-100">
  26.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  27.               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
  28.             </svg>
  29.             Raw
  30.           </button>
  32.           <!-- 复制按钮 -->
  33.           <button class="flex items-center text-xs bg-github-bg border border-github-border rounded-md px-2 py-1 hover:bg-gray-100">
  34.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  35.               <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
  36.             </svg>
  37.             Copy
  38.           </button>
  39.         </div>
  40.       </div>
  42.       <!-- 右侧：Git信息和更多操作 -->
  43.       <div class="flex items-center flex-wrap">
  44.         <!-- Git信息 -->
  45.         <div class="flex items-center text-xs mr-4">
  46.           <a href="#" class="flex items-center text-github-text-secondary hover:text-github-blue">
  47.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  48.               <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
  49.             </svg>
  50.             <span>Latest commit</span>
  51.             <span class="ml-1 font-mono text-github-blue">a2b9c8d</span>
  52.             <span class="ml-1">on</span>
  53.             <span class="ml-1 text-github-blue">Mar 15, 2023</span>
  54.           </a>
  55.         </div>
  57.         <!-- 历史按钮 -->
  58.         <a href="#" class="flex items-center text-xs text-github-text-secondary hover:text-github-blue mr-4">
  59.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  60.             <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
  61.           </svg>
  62.           <span>History</span>
  63.         </a>
  65.         <!-- 责任按钮 -->
  66.         <a href="#" class="flex items-center text-xs text-github-text-secondary hover:text-github-blue">
  67.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  68.             <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
  69.           </svg>
  70.           <span>Blame</span>
  71.         </a>
  72.       </div>
  73.     </div>
  74.   </div>
  75. </div>

文件操作栏分为左右两部分：左侧显示文件基本信息和常用操作按钮，右侧显示Git相关信息和其他操作链接。在移动设备上，它们会垂直堆叠以提供更好的可读性。

第4步：实现代码查看区

代码查看区是本页面的核心部分，包括行号和语法高亮的代码内容：

  1. <!-- 代码查看区 -->
  2. <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
  3.   <div class="border border-github-border rounded-md overflow-hidden">
  4.     <!-- 文件语言栏 -->
  5.     <div class="bg-github-bg border-b border-github-border px-4 py-2 flex justify-between items-center">
  6.       <div class="text-sm font-medium">
  7.         JavaScript
  8.       </div>
  9.       <div>
  10.         <button class="text-github-text-secondary hover:text-github-text">
  11.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  12.             <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
  13.           </svg>
  14.         </button>
  15.       </div>
  16.     </div>
  18.     <!-- 代码内容 -->
  19.     <div class="overflow-x-auto">
  20.       <table class="w-full border-collapse">
  21.         <tbody>
  22.           <!-- 代码行 -->
  23.           <tr>
  24.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L1">
  25.               <a href="#L1" class="block py-1">1</a>
  26.             </td>
  27.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  28.               <div class="py-1">
  29.                 <code class="language-javascript">import React from 'react';</code>
  30.               </div>
  31.             </td>
  32.           </tr>
  34.           <tr>
  35.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L2">
  36.               <a href="#L2" class="block py-1">2</a>
  37.             </td>
  38.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  39.               <div class="py-1">
  40.                 <code class="language-javascript">import PropTypes from 'prop-types';</code>
  41.               </div>
  42.             </td>
  43.           </tr>
  45.           <tr>
  46.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L3">
  47.               <a href="#L3" class="block py-1">3</a>
  48.             </td>
  49.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  50.               <div class="py-1">
  51.                 <code class="language-javascript"></code>
  52.               </div>
  53.             </td>
  54.           </tr>
  56.           <tr class="bg-github-line-highlight">
  57.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-github-line-highlight border-r border-github-border" id="L4">
  58.               <a href="#L4" class="block py-1">4</a>
  59.             </td>
  60.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  61.               <div class="py-1">
  62.                 <code class="language-javascript">/**</code>
  63.               </div>
  64.             </td>
  65.           </tr>
  67.           <tr>
  68.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L5">
  69.               <a href="#L5" class="block py-1">5</a>
  70.             </td>
  71.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  72.               <div class="py-1">
  73.                 <code class="language-javascript"> * Button component for primary actions in forms and dialogs.</code>
  74.               </div>
  75.             </td>
  76.           </tr>
  78.           <tr>
  79.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L6">
  80.               <a href="#L6" class="block py-1">6</a>
  81.             </td>
  82.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  83.               <div class="py-1">
  84.                 <code class="language-javascript"> */</code>
  85.               </div>
  86.             </td>
  87.           </tr>
  89.           <tr>
  90.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L7">
  91.               <a href="#L7" class="block py-1">7</a>
  92.             </td>
  93.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  94.               <div class="py-1">
  95.                 <code class="language-javascript">const Button = ({ children, variant, size, disabled, onClick }) => {</code>
  96.               </div>
  97.             </td>
  98.           </tr>
  100.           <tr>
  101.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L8">
  102.               <a href="#L8" class="block py-1">8</a>
  103.             </td>
  104.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  105.               <div class="py-1">
  106.                 <code class="language-javascript">  // Base classes always applied</code>
  107.               </div>
  108.             </td>
  109.           </tr>
  111.           <tr>
  112.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L9">
  113.               <a href="#L9" class="block py-1">9</a>
  114.             </td>
  115.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  116.               <div class="py-1">
  117.                 <code class="language-javascript">  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';</code>
  118.               </div>
  119.             </td>
  120.           </tr>
  122.           <tr>
  123.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L10">
  124.               <a href="#L10" class="block py-1">10</a>
  125.             </td>
  126.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  127.               <div class="py-1">
  128.                 <code class="language-javascript"></code>
  129.               </div>
  130.             </td>
  131.           </tr>
  133.           <tr>
  134.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L11">
  135.               <a href="#L11" class="block py-1">11</a>
  136.             </td>
  137.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  138.               <div class="py-1">
  139.                 <code class="language-javascript">  // Variant specific classes</code>
  140.               </div>
  141.             </td>
  142.           </tr>
  144.           <tr>
  145.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L12">
  146.               <a href="#L12" class="block py-1">12</a>
  147.             </td>
  148.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  149.               <div class="py-1">
  150.                 <code class="language-javascript">  const variantClasses = {</code>
  151.               </div>
  152.             </td>
  153.           </tr>
  155.           <tr>
  156.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L13">
  157.               <a href="#L13" class="block py-1">13</a>
  158.             </td>
  159.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  160.               <div class="py-1">
  161.                 <code class="language-javascript">    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',</code>
  162.               </div>
  163.             </td>
  164.           </tr>
  166.           <tr>
  167.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L14">
  168.               <a href="#L14" class="block py-1">14</a>
  169.             </td>
  170.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  171.               <div class="py-1">
  172.                 <code class="language-javascript">    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',</code>
  173.               </div>
  174.             </td>
  175.           </tr>
  177.           <tr>
  178.             <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L15">
  179.               <a href="#L15" class="block py-1">15</a>
  180.             </td>
  181.             <td class="py-0 pl-4 pr-4 whitespace-pre">
  182.               <div class="py-1">
  183.                 <code class="language-javascript">    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',</code>
  184.               </div>
  185.             </td>
  186.           </tr>
  187.           <!-- 更多代码行... -->
  188.         </tbody>
  189.       </table>
  190.     </div>
  191.   </div>
  192. </div>

代码查看区使用了表格布局，左侧是行号，右侧是代码内容。表格的每一行代表代码的一行，并使用Prism.js进行语法高亮。

为了展示行高亮功能，我们对第4行添加了高亮背景色。在实际应用中，通常会根据URL中的锚点来确定哪一行需要高亮显示。

第5步：添加更多代码行和文件底部信息

为了更完整地展示代码文件，我们添加更多代码行，并在底部添加文件信息：

  1. <!-- 更多代码行... -->
  2. <tr>
  3.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L16">
  4.     <a href="#L16" class="block py-1">16</a>
  5.   </td>
  6.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  7.     <div class="py-1">
  8.       <code class="language-javascript">  };</code>
  9.     </div>
  10.   </td>
  11. </tr>
  13. <tr>
  14.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L17">
  15.     <a href="#L17" class="block py-1">17</a>
  16.   </td>
  17.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  18.     <div class="py-1">
  19.       <code class="language-javascript"></code>
  20.     </div>
  21.   </td>
  22. </tr>
  24. <tr>
  25.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L16">
  26.     <a href="#L16" class="block py-1">16</a>
  27.   </td>
  28.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  29.     <div class="py-1">
  30.       <code class="language-javascript">  };</code>
  31.     </div>
  32.   </td>
  33. </tr>
  35. <tr>
  36.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L17">
  37.     <a href="#L17" class="block py-1">17</a>
  38.   </td>
  39.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  40.     <div class="py-1">
  41.       <code class="language-javascript"></code>
  42.     </div>
  43.   </td>
  44. </tr>
  46. <tr>
  47.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L18">
  48.     <a href="#L18" class="block py-1">18</a>
  49.   </td>
  50.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  51.     <div class="py-1">
  52.       <code class="language-javascript">  // Size specific classes</code>
  53.     </div>
  54.   </td>
  55. </tr>
  57. <tr>
  58.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L19">
  59.     <a href="#L19" class="block py-1">19</a>
  60.   </td>
  61.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  62.     <div class="py-1">
  63.       <code class="language-javascript">  const sizeClasses = {</code>
  64.     </div>
  65.   </td>
  66. </tr>
  68. <tr>
  69.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L20">
  70.     <a href="#L20" class="block py-1">20</a>
  71.   </td>
  72.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  73.     <div class="py-1">
  74.       <code class="language-javascript">    small: 'px-3 py-1.5 text-sm',</code>
  75.     </div>
  76.   </td>
  77. </tr>
  79. <tr>
  80.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L21">
  81.     <a href="#L21" class="block py-1">21</a>
  82.   </td>
  83.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  84.     <div class="py-1">
  85.       <code class="language-javascript">    medium: 'px-4 py-2 text-base',</code>
  86.     </div>
  87.   </td>
  88. </tr>
  90. <tr>
  91.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L22">
  92.     <a href="#L22" class="block py-1">22</a>
  93.   </td>
  94.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  95.     <div class="py-1">
  96.       <code class="language-javascript">    large: 'px-5 py-2.5 text-lg',</code>
  97.     </div>
  98.   </td>
  99. </tr>
  101. <tr>
  102.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L23">
  103.     <a href="#L23" class="block py-1">23</a>
  104.   </td>
  105.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  106.     <div class="py-1">
  107.       <code class="language-javascript">  };</code>
  108.     </div>
  109.   </td>
  110. </tr>
  112. <tr>
  113.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L24">
  114.     <a href="#L24" class="block py-1">24</a>
  115.   </td>
  116.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  117.     <div class="py-1">
  118.       <code class="language-javascript"></code>
  119.     </div>
  120.   </td>
  121. </tr>
  123. <tr>
  124.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L25">
  125.     <a href="#L25" class="block py-1">25</a>
  126.   </td>
  127.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  128.     <div class="py-1">
  129.       <code class="language-javascript">  // Combine all classes</code>
  130.     </div>
  131.   </td>
  132. </tr>
  134. <tr>
  135.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L26">
  136.     <a href="#L26" class="block py-1">26</a>
  137.   </td>
  138.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  139.     <div class="py-1">
  140.       <code class="language-javascript">  const classes = [</code>
  141.     </div>
  142.   </td>
  143. </tr>
  145. <tr>
  146.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L27">
  147.     <a href="#L27" class="block py-1">27</a>
  148.   </td>
  149.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  150.     <div class="py-1">
  151.       <code class="language-javascript">    baseClasses,</code>
  152.     </div>
  153.   </td>
  154. </tr>
  156. <tr>
  157.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L28">
  158.     <a href="#L28" class="block py-1">28</a>
  159.   </td>
  160.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  161.     <div class="py-1">
  162.       <code class="language-javascript">    variantClasses[variant],</code>
  163.     </div>
  164.   </td>
  165. </tr>
  167. <tr>
  168.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L29">
  169.     <a href="#L29" class="block py-1">29</a>
  170.   </td>
  171.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  172.     <div class="py-1">
  173.       <code class="language-javascript">    sizeClasses[size],</code>
  174.     </div>
  175.   </td>
  176. </tr>
  178. <tr>
  179.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L30">
  180.     <a href="#L30" class="block py-1">30</a>
  181.   </td>
  182.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  183.     <div class="py-1">
  184.       <code class="language-javascript">    disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',</code>
  185.     </div>
  186.   </td>
  187. </tr>
  189. <tr>
  190.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L31">
  191.     <a href="#L31" class="block py-1">31</a>
  192.   </td>
  193.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  194.     <div class="py-1">
  195.       <code class="language-javascript">  ].join(' ');</code>
  196.     </div>
  197.   </td>
  198. </tr>
  200. <tr>
  201.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L32">
  202.     <a href="#L32" class="block py-1">32</a>
  203.   </td>
  204.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  205.     <div class="py-1">
  206.       <code class="language-javascript"></code>
  207.     </div>
  208.   </td>
  209. </tr>
  211. <tr>
  212.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L33">
  213.     <a href="#L33" class="block py-1">33</a>
  214.   </td>
  215.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  216.     <div class="py-1">
  217.       <code class="language-javascript">  return (</code>
  218.     </div>
  219.   </td>
  220. </tr>
  222. <tr>
  223.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L34">
  224.     <a href="#L34" class="block py-1">34</a>
  225.   </td>
  226.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  227.     <div class="py-1">
  228.       <code class="language-javascript">    <button</code>
  229.     </div>
  230.   </td>
  231. </tr>
  233. <tr>
  234.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L35">
  235.     <a href="#L35" class="block py-1">35</a>
  236.   </td>
  237.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  238.     <div class="py-1">
  239.       <code class="language-javascript">      className={classes}</code>
  240.     </div>
  241.   </td>
  242. </tr>
  244. <tr>
  245.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L36">
  246.     <a href="#L36" class="block py-1">36</a>
  247.   </td>
  248.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  249.     <div class="py-1">
  250.       <code class="language-javascript">      disabled={disabled}</code>
  251.     </div>
  252.   </td>
  253. </tr>
  255. <tr>
  256.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L37">
  257.     <a href="#L37" class="block py-1">37</a>
  258.   </td>
  259.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  260.     <div class="py-1">
  261.       <code class="language-javascript">      onClick={onClick}</code>
  262.     </div>
  263.   </td>
  264. </tr>
  266. <tr>
  267.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L38">
  268.     <a href="#L38" class="block py-1">38</a>
  269.   </td>
  270.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  271.     <div class="py-1">
  272.       <code class="language-javascript">    ></code>
  273.     </div>
  274.   </td>
  275. </tr>
  277. <tr>
  278.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L39">
  279.     <a href="#L39" class="block py-1">39</a>
  280.   </td>
  281.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  282.     <div class="py-1">
  283.       <code class="language-javascript">      {children}</code>
  284.     </div>
  285.   </td>
  286. </tr>
  288. <tr>
  289.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L40">
  290.     <a href="#L40" class="block py-1">40</a>
  291.   </td>
  292.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  293.     <div class="py-1">
  294.       <code class="language-javascript">    </button></code>
  295.     </div>
  296.   </td>
  297. </tr>
  299. <tr>
  300.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L41">
  301.     <a href="#L41" class="block py-1">41</a>
  302.   </td>
  303.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  304.     <div class="py-1">
  305.       <code class="language-javascript">  );</code>
  306.     </div>
  307.   </td>
  308. </tr>
  310. <tr>
  311.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L42">
  312.     <a href="#L42" class="block py-1">42</a>
  313.   </td>
  314.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  315.     <div class="py-1">
  316.       <code class="language-javascript">};</code>
  317.     </div>
  318.   </td>
  319. </tr>
  321. <tr>
  322.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L43">
  323.     <a href="#L43" class="block py-1">43</a>
  324.   </td>
  325.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  326.     <div class="py-1">
  327.       <code class="language-javascript"></code>
  328.     </div>
  329.   </td>
  330. </tr>
  332. <tr>
  333.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L44">
  334.     <a href="#L44" class="block py-1">44</a>
  335.   </td>
  336.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  337.     <div class="py-1">
  338.       <code class="language-javascript">// Default props</code>
  339.     </div>
  340.   </td>
  341. </tr>
  343. <tr>
  344.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L45">
  345.     <a href="#L45" class="block py-1">45</a>
  346.   </td>
  347.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  348.     <div class="py-1">
  349.       <code class="language-javascript">Button.defaultProps = {</code>
  350.     </div>
  351.   </td>
  352. </tr>
  354. <tr>
  355.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L46">
  356.     <a href="#L46" class="block py-1">46</a>
  357.   </td>
  358.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  359.     <div class="py-1">
  360.       <code class="language-javascript">  variant: 'primary',</code>
  361.     </div>
  362.   </td>
  363. </tr>
  365. <tr>
  366.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L47">
  367.     <a href="#L47" class="block py-1">47</a>
  368.   </td>
  369.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  370.     <div class="py-1">
  371.       <code class="language-javascript">  size: 'medium',</code>
  372.     </div>
  373.   </td>
  374. </tr>
  376. <tr>
  377.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L48">
  378.     <a href="#L48" class="block py-1">48</a>
  379.   </td>
  380.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  381.     <div class="py-1">
  382.       <code class="language-javascript">  disabled: false,</code>
  383.     </div>
  384.   </td>
  385. </tr>
  387. <tr>
  388.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L49">
  389.     <a href="#L49" class="block py-1">49</a>
  390.   </td>
  391.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  392.     <div class="py-1">
  393.       <code class="language-javascript">  onClick: () => {},</code>
  394.     </div>
  395.   </td>
  396. </tr>
  398. <tr>
  399.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L50">
  400.     <a href="#L50" class="block py-1">50</a>
  401.   </td>
  402.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  403.     <div class="py-1">
  404.       <code class="language-javascript">};</code>
  405.     </div>
  406.   </td>
  407. </tr>
  409. <tr>
  410.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L51">
  411.     <a href="#L51" class="block py-1">51</a>
  412.   </td>
  413.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  414.     <div class="py-1">
  415.       <code class="language-javascript"></code>
  416.     </div>
  417.   </td>
  418. </tr>
  420. <tr>
  421.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L52">
  422.     <a href="#L52" class="block py-1">52</a>
  423.   </td>
  424.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  425.     <div class="py-1">
  426.       <code class="language-javascript">// PropTypes</code>
  427.     </div>
  428.   </td>
  429. </tr>
  431. <tr>
  432.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L53">
  433.     <a href="#L53" class="block py-1">53</a>
  434.   </td>
  435.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  436.     <div class="py-1">
  437.       <code class="language-javascript">Button.propTypes = {</code>
  438.     </div>
  439.   </td>
  440. </tr>
  442. <tr>
  443.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L54">
  444.     <a href="#L54" class="block py-1">54</a>
  445.   </td>
  446.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  447.     <div class="py-1">
  448.       <code class="language-javascript">  children: PropTypes.node.isRequired,</code>
  449.     </div>
  450.   </td>
  451. </tr>
  453. <tr>
  454.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L55">
  455.     <a href="#L55" class="block py-1">55</a>
  456.   </td>
  457.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  458.     <div class="py-1">
  459.       <code class="language-javascript">  variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),</code>
  460.     </div>
  461.   </td>
  462. </tr>
  464. <tr>
  465.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L56">
  466.     <a href="#L56" class="block py-1">56</a>
  467.   </td>
  468.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  469.     <div class="py-1">
  470.       <code class="language-javascript">  size: PropTypes.oneOf(['small', 'medium', 'large']),</code>
  471.     </div>
  472.   </td>
  473. </tr>
  475. <tr>
  476.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L57">
  477.     <a href="#L57" class="block py-1">57</a>
  478.   </td>
  479.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  480.     <div class="py-1">
  481.       <code class="language-javascript">  disabled: PropTypes.bool,</code>
  482.     </div>
  483.   </td>
  484. </tr>
  486. <tr>
  487.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L58">
  488.     <a href="#L58" class="block py-1">58</a>
  489.   </td>
  490.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  491.     <div class="py-1">
  492.       <code class="language-javascript">  onClick: PropTypes.func,</code>
  493.     </div>
  494.   </td>
  495. </tr>
  497. <tr>
  498.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L59">
  499.     <a href="#L59" class="block py-1">59</a>
  500.   </td>
  501.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  502.     <div class="py-1">
  503.       <code class="language-javascript">};</code>
  504.     </div>
  505.   </td>
  506. </tr>
  508. <tr>
  509.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L60">
  510.     <a href="#L60" class="block py-1">60</a>
  511.   </td>
  512.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  513.     <div class="py-1">
  514.       <code class="language-javascript"></code>
  515.     </div>
  516.   </td>
  517. </tr>
  519. <tr>
  520.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L61">
  521.     <a href="#L61" class="block py-1">61</a>
  522.   </td>
  523.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  524.     <div class="py-1">
  525.       <code class="language-javascript">export default Button;</code>
  526.     </div>
  527.   </td>
  528. </tr>

第6步：实现文件底部信息

最后，添加文件底部信息：

  1. <!-- 文件底部信息 -->
  2. <div class="border-t border-github-border py-2 px-4 text-center text-xs text-github-text-secondary">
  3.   <p>You can't perform that action at this time.</p>
  4.   <p>You signed in with another tab or window. Reload to refresh your session.</p>
  5. </div>

这个底部信息通常会出现在一些页面状态下，比如用户会话过期或没有权限执行某些操作时。

关键样式技术点解析

1. 代码行与行号的实现

GitHub代码查看页面最核心的部分是代码行与行号的实现，我们使用表格布局来确保行号和代码内容能够保持对齐：

  1. <table class="w-full border-collapse">
  2.   <tbody>
  3.     <tr>
  4.       <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-white border-r border-github-border" id="L1">
  5.         <a href="#L1" class="block py-1">1</a>
  6.       </td>
  7.       <td class="py-0 pl-4 pr-4 whitespace-pre">
  8.         <div class="py-1">
  9.           <code class="language-javascript">import React from 'react';</code>
  10.         </div>
  11.       </td>
  12.     </tr>
  13.   </tbody>
  14. </table>

关键样式类解析：

  • border-collapse: 确保表格边框合并，创建一个连续的视觉效果
  • py-0 pr-2 pl-4: 精确控制每个单元格的内边距
  • text-right select-none: 使行号右对齐且不可选
  • text-github-text-secondary text-xs: 行号使用次要文本颜色和小号字体
  • w-10: 给行号列一个固定宽度
  • border-r border-github-border: 添加右边框分隔行号和代码
  • whitespace-pre: 保留代码中的空格和换行
  • py-1: 为代码行内容提供适当的垂直间距

2. 行高亮实现

GitHub代码查看页支持行高亮功能，当用户点击行号或通过URL锚点导航时：

  1. <tr class="bg-github-line-highlight">
  2.   <td class="py-0 pr-2 pl-4 text-right select-none text-github-text-secondary text-xs w-10 bg-github-line-highlight border-r border-github-border" id="L4">
  3.     <a href="#L4" class="block py-1">4</a>
  4.   </td>
  5.   <td class="py-0 pl-4 pr-4 whitespace-pre">
  6.     <div class="py-1">
  7.       <code class="language-javascript">/**</code>
  8.     </div>
  9.   </td>
  10. </tr>

关键样式类：

  • bg-github-line-highlight: 为整行添加高亮背景色
  • 同样的颜色应用于行号单元格 bg-github-line-highlight，保持视觉一致性

3. 语法高亮集成

我们使用Prism.js实现代码语法高亮，并自定义样式以匹配GitHub的风格：

  1. /* 自定义样式以匹配GitHub的代码高亮 */
  2. .token.comment { color: #6e7781; }
  3. .token.keyword { color: #cf222e; }
  4. .token.string { color: #0a3069; }
  5. .token.function { color: #8250df; }
  6. .token.number { color: #0550ae; }
  7. .token.operator { color: #24292f; }
  8. .token.class-name { color: #953800; }

每种代码元素（注释、关键字、字符串等）都有特定的颜色，精确匹配GitHub的代码高亮风格。

4. 响应式导航与操作按钮

文件操作栏在不同屏幕尺寸下有不同的布局：

  1. <div class="flex flex-col lg:flex-row lg:items-center justify-between">
  2.   <!-- 左侧内容 -->
  3.   <div class="flex items-center flex-wrap mb-2 lg:mb-0">
  4.     <!-- 内容 -->
  5.   </div>
  7.   <!-- 右侧内容 -->
  8.   <div class="flex items-center flex-wrap">
  9.     <!-- 内容 -->
  10.   </div>
  11. </div>

关键样式类：

  • flex flex-col lg:flex-row: 在移动设备上垂直堆叠，在大屏幕上水平排列
  • flex-wrap: 允许按钮在空间不足时自动换行
  • mb-2 lg:mb-0: 在移动设备上添加底部边距，在大屏幕上移除

5. 按钮组与链接样式

GitHub代码查看页面有多种按钮和链接样式：

  1. <button class="flex items-center text-xs bg-github-bg border border-github-border rounded-md px-2 py-1 hover:bg-gray-100">
  2.   <svg class="w-4 h-4 mr-1"><!-- ... --></svg>
  3.   Edit
  4. </button>
  6. <a href="#" class="flex items-center text-xs text-github-text-secondary hover:text-github-blue">
  7.   <svg class="w-4 h-4 mr-1"><!-- ... --></svg>
  8.   <span>History</span>
  9. </a>

按钮样式：

  • 浅灰背景 (bg-github-bg)
  • 细边框 (border border-github-border)
  • 圆角 (rounded-md)
  • 小字体 (text-xs)
  • 图标+文本组合 (flex items-center)
  • 悬停效果 (hover:bg-gray-100)

链接样式：

  • 次要文本颜色 (text-github-text-secondary)
  • 悬停时变为蓝色 (hover:text-github-blue)
  • 无背景和边框
  • 同样的图标+文本布局

常见问题与解决方案

  1. 问题: 如何保持代码格式和空格不变
    解决方案: 使用 whitespace-pre 类保留代码中的所有空格和换行，而不是默认的文本换行行为。

  2. 问题: 行号与代码内容对齐
    解决方案: 使用表格布局确保行号与代码内容垂直对齐，即使在代码内容高度变化时也能保持一致。

  3. 问题: 如何实现行高亮功能
    解决方案: 为整个表格行添加背景色类 bg-github-line-highlight，并确保行号单元格也使用相同的背景色。

  4. 问题: 代码超出视口宽度时的处理
    解决方案: 使用 overflow-x-auto 类允许代码区域水平滚动，而不破坏页面整体布局。

  5. 问题: 语法高亮与GitHub样式不匹配
    解决方案: 使用自定义CSS覆盖Prism.js的默认样式，精确匹配GitHub的代码高亮颜色。

扩展与练习建议

练习1：实现代码行选择功能

扩展代码，使用JavaScript实现多行选择功能，当用户点击行号并按住Shift键点击另一行时，高亮显示所选范围内的所有行。

练习2：添加代码注释功能

在特定代码行右侧添加注释图标按钮，点击后弹出注释输入框。

练习3：实现代码折叠功能

为代码添加折叠功能，可以折叠/展开特定的代码块（如函数、类定义等）。

练习4：实现”复制到剪贴板”功能

使用JavaScript实现”复制”按钮的功能，点击后将代码复制到剪贴板，并显示成功提示。

练习5：添加行内代码建议功能

实现类似GitHub Copilot的简单版本，在特定代码行下方显示建议的下一行代码。

总结

在本节中，我们成功实现了GitHub代码查看页的核心界面元素，重点关注代码显示、语法高亮和行号实现。关键实现点包括：

  1. 使用表格布局实现代码行与行号的精确对齐
  2. 通过Prism.js实现语法高亮，并自定义样式匹配GitHub的风格
  3. 实现行高亮功能，支持通过URL锚点定位到特定代码行
  4. 创建响应式文件操作栏，包含编辑、原始查看和复制等功能
  5. 精确还原GitHub的交互元素，如按钮、链接和图标组合

通过这些实现，我们不仅展示了Tailwind CSS在复杂UI组件中的应用，也深入理解了GitHub代码查看界面的设计原则。代码查看页面的设计重点在于提供清晰的代码可读性、便捷的导航和实用的代码操作功能。

在下一节中，我们将探讨Commit历史页面的实现，学习如何创建时间线和变更记录视图。