Skip to content

README-CSS-Enhancement.md

Latest commit

 

History

History
194 lines (144 loc) · 5.78 KB

README-CSS-Enhancement.md

File metadata and controls

194 lines (144 loc) · 5.78 KB

MIT 6.828 实验文档现代化增强

这是一套为MIT 6.828操作系统实验文档设计的现代化CSS和JavaScript增强方案，旨在提供更好的阅读体验、代码高亮和交互功能。

🚀 主要功能

🎨 视觉增强

  • 现代化设计: 采用现代设计语言，提供清爽的视觉体验
  • 响应式布局: 完美适配桌面、平板和移动设备
  • 暗色主题: 支持自动、亮色、暗色三种主题模式
  • 优化排版: 改进字体选择、行高、间距等排版元素

💻 代码优化

  • 语法高亮: 支持C语言、汇编、Shell脚本的语法高亮
  • 行号显示: 为代码块添加行号，便于引用和阅读
  • 一键复制: 代码块内置复制按钮，方便快速复制代码
  • 代码类型识别: 自动识别代码语言并应用相应高亮

🧭 导航改进

  • 平滑滚动: 页面内锚点跳转使用平滑滚动效果
  • 滚动监听: 实时高亮当前阅读章节
  • 移动端优化: 移动设备上的导航栏自动调整布局

♿ 可访问性

  • 键盘导航: 完整的键盘导航支持
  • 屏幕阅读器: 为屏幕阅读器用户优化的标签和结构
  • 跳转链接: 提供快速跳转到主内容的链接
  • 焦点指示: 清晰的焦点指示器

📦 文件说明

labs-modern.css

现代化的CSS样式文件，包含：

  • CSS自定义属性（变量）系统
  • 现代化的练习和问题块设计
  • 响应式代码块样式
  • 暗色主题支持
  • 打印样式优化

labs-enhance.js

JavaScript增强脚本，提供：

  • 语法高亮引擎
  • 主题切换功能
  • 代码复制功能
  • 导航增强
  • 可访问性改进

🛠️ 使用方法

方法一：直接在HTML中引用

在每个实验文档的HTML文件中，在</head>标签前添加：

<!-- 现代化样式 -->
<link rel="stylesheet" href="labs-modern.css" type="text/css">

<!-- 增强功能脚本 -->
<script src="labs-enhance.js"></script>

方法二：替换现有样式文件

  1. 备份原有的labs.css文件
  2. 将labs-modern.css重命名为labs.css
  3. 在HTML中添加JavaScript文件引用： 
    <script src="labs-enhance.js"></script>

方法三：与现有样式合并

如果想保留部分原有样式，可以在现有CSS文件后添加：

<link rel="stylesheet" href="Lab 1_ PC Bootstrap and GCC Calling Conventions_files/labs.css" type="text/css">
<link rel="stylesheet" href="labs-modern.css" type="text/css">
<script src="labs-enhance.js"></script>

🎯 功能特性详解

主题系统

  • 自动模式: 根据系统偏好自动切换亮色/暗色主题
  • 手动切换: 点击右下角的主题切换按钮
  • 设置保存: 主题选择自动保存到本地存储

代码高亮

支持的语言：

  • C语言: 关键字、函数、预处理器指令、字符串、注释
  • 汇编语言: 指令、寄存器、标签、数字、注释
  • Shell脚本: 命令、参数、变量、路径、字符串

练习块增强

  • 必做练习: 蓝色主题，带有📋图标
  • 挑战练习: 橙色主题，带有🎯图标
  • 问题: 绿色主题，带有❓图标

响应式设计

  • 桌面端: 完整功能，优化的导航和代码显示
  • 平板端: 适中的间距和字体大小
  • 移动端: 简化的导航，优化的触摸操作

🔧 自定义配置

可以通过修改labs-enhance.js文件开头的CONFIG对象来自定义功能：

const CONFIG = {
    enableSyntaxHighlight: true,    // 启用语法高亮
    enableThemeToggle: true,        // 启用主题切换
    enableCopyCode: true,           // 启用代码复制
    enableLineNumbers: true,        // 启用行号显示
    autoDetectLanguage: true        // 启用语言自动检测
};

🎨 颜色主题自定义

可以通过修改CSS文件中的--primary-color等变量来自定义颜色：

:root {
  --primary-color: #2563eb;      /* 主要颜色 */
  --secondary-color: #6366f1;    /* 次要颜色 */
  --accent-color: #f59e0b;       /* 强调颜色 */
  /* ... 更多颜色变量 */
}

📱 移动端优化

  • 导航栏在移动设备上自动调整为相对定位
  • 代码块在小屏幕上隐藏行号以节省空间
  • 触摸友好的按钮大小和间距
  • 优化的字体大小和行高

🖨️ 打印优化

  • 自动隐藏交互元素（主题切换按钮、复制按钮等）
  • 优化的黑白打印样式
  • 避免代码块跨页断裂
  • 清晰的标题层次和间距

🔍 浏览器兼容性

  • Chrome/Edge: 完全支持
  • Firefox: 完全支持
  • Safari: 完全支持
  • IE11: 基础功能支持（不推荐）

📈 性能特性

  • 按需加载: 功能模块化，避免不必要的计算
  • 防抖处理: 窗口大小变化等事件使用防抖优化
  • 性能监控: 内置性能监控，便于调试优化
  • 缓存友好: 主题设置等数据缓存到本地存储

🐛 故障排除

样式没有生效

  1. 检查CSS文件路径是否正确
  2. 确认浏览器控制台没有错误信息
  3. 尝试强制刷新（Ctrl+F5）

JavaScript功能不工作

  1. 检查浏览器控制台是否有错误
  2. 确认JavaScript文件路径正确
  3. 检查是否有其他脚本冲突

代码高亮不显示

  1. 确认enableSyntaxHighlight配置为true
  2. 检查代码块是否被正确识别为<pre>标签
  3. 尝试手动指定语言类型

🤝 贡献指南

欢迎提交Issue和Pull Request来改进这个项目：

  1. 报告问题: 发现bug请创建Issue
  2. 功能建议: 有新想法请在Issue中讨论
  3. 代码贡献: 欢迎提交PR改进代码

📄 许可证

本项目采用MIT许可证，可自由使用和修改。

作者: AI Assistant
版本: 1.0.0
更新日期: 2024年12月

如有问题或建议，欢迎反馈！