代码块渲染效果优化方案

✅ 已实现的改进

1. VS Code Dark+ 主题风格

已完全重新设计代码块外观，实现了类似VS Code的深色主题：

• 深色背景：#1e1e1e 背景色，营造专业的编程环境感
• 现代边框：圆角边框和阴影效果，提升视觉层次
• 专业字体：优先使用 JetBrains Mono、Fira Code 等编程字体
• VS Code 语法高亮色彩：
  • 注释：#6A9955 (绿色)
  • 字符串：#CE9178 (橙色)
  • 关键字：#569CD6 (蓝色)
  • 函数名：#DCDCAA (黄色)
  • 变量名：#9CDCFE (浅蓝色)
  • 数字：#B5CEA8 (浅绿色)

2. 交互功能增强

• 复制按钮：每个代码块右上角显示”复制”按钮
• 点击复制：点击复制区域即可复制整个代码块
• 键盘快捷键：在代码块内按 Ctrl+C 复制整个代码块
• 复制反馈：复制成功后显示”已复制!”提示

3. 响应式和用户体验

• 自定义滚动条：深色风格的滚动条样式
• 移动端优化：在小屏幕上调整字体大小和内边距
• 打印友好：打印时自动切换为浅色主题
• 悬停效果：鼠标悬停时复制按钮更加明显

4. 配置文件更新

• Jekyll配置：将高亮主题改为 base16.monokai.dark
• CSS集成：添加到 _includes/header.html
• JS集成：添加到 _includes/footer.html

其他可选配置方案

方案一：更改代码高亮主题

在 _config.yml 中修改：

# 当前使用的是 github 主题
highlight_theme: github

# 可以尝试其他主题：
# highlight_theme: monokai
# highlight_theme: base16.dark
# highlight_theme: colorful
# highlight_theme: default
# highlight_theme: solarized-dark
# highlight_theme: solarized-light

方案二：Kramdown 配置优化

在 _config.yml 中添加更多 Kramdown 选项：

kramdown:
  input: GFM
  hard_wrap: false
  math_engine: mathjax
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    line_numbers: false
    tab_width: 4
    bold_every: 10
    css_class: 'highlight'

方案三：添加行号显示

kramdown:
  syntax_highlighter_opts:
    line_numbers: true
    start_line: 1

方案四：使用 Prism.js 替代 Rouge

在 _config.yml 中：

kramdown:
  syntax_highlighter: rouge
  
# 或者禁用 Jekyll 的语法高亮，使用客户端 JavaScript
markdown: kramdown
kramdown:
  syntax_highlighter_opts:
    disable : true

然后在页面中加载 Prism.js。

推荐的进一步优化

1. 添加复制按钮功能

创建 JavaScript 文件添加复制代码功能：

// assets/js/code-copy.js
document.addEventListener('DOMContentLoaded', function() {
    // 为每个代码块添加复制按钮
    document.querySelectorAll('pre code').forEach(function(code) {
        const button = document.createElement('button');
        button.className = 'code-copy-btn';
        button.textContent = '复制';
        button.addEventListener('click', function() {
            navigator.clipboard.writeText(code.textContent);
            button.textContent = '已复制';
            setTimeout(() => button.textContent = '复制', 2000);
        });
        code.parentNode.appendChild(button);
    });
});

2. 代码折叠功能

为长代码块添加折叠/展开功能。

3. 更多语言标签

可以在 CSS 中添加更多编程语言的特殊标签样式：

.highlight.language-go::before { content: 'GO'; background-color: #00ADD8; color: white; }
.highlight.language-rust::before { content: 'RUST'; background-color: #000000; color: white; }
.highlight.language-typescript::before { content: 'TYPESCRIPT'; background-color: #3178c6; color: white; }

应用方法

1. 立即生效：推送到 GitHub 后，GitHub Pages 会自动重新构建站点
2. 本地测试：运行 bundle exec jekyll serve 进行本地预览
3. 缓存清理：可能需要清除浏览器缓存才能看到样式更新

注意事项

• 自定义 CSS 有最高优先级，会覆盖主题默认样式
• 移动端适配已包含在内
• 不会影响现有的功能性CSS
• 与当前的 Rouge 高亮主题兼容