代码高亮渲染升级完成

代码高亮渲染升级完成

已成功将博客的代码高亮系统从简化版自定义实现升级为完整版 Prism.js。

升级概述

变更前

  • 使用简化版 Prism.js（约 100 行代码）
  • 基本语法高亮，有限的语言支持
  • 样式较为简单

变更后

  • 使用官方完整版 Prism.js v1.29.0
  • 支持 190+ 种编程语言
  • 美观的 Tomorrows 主题
  • 增强的 Python 语法高亮

技术实现

使用的核心库

  1. Prism.js Core - 官方完整版核心引擎
  2. Autoloader Plugin - 自动按需加载语法文件
  3. Tomorrow 主题 - 专业的暗色主题

CDN 集成

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

增强的功能

  1. 语言自动检测：无需手动指定语言（但仍推荐标注）
  2. 完整的 Python 支持：

- keywords (def, class, import, etc.) - built-in functions (print, len, range, etc.) - decorators (@property, @staticmethod) - f-strings with syntax highlighting - type hints - comments - string literals

  1. 其他语言支持：

- JavaScript (ES6+, JSX, TS) - PHP (modern PHP 8+) - C/C++ - Go, Swift, Rust - Bash/Shell - SQL, YAML, JSON - Lua（之前已添加）

与现有功能的整合

✅ 复制按钮 - 保留并优化 ✅ 行号显示 - 保留并优化 ✅ KaTeX 公式 - 完全兼容 ✅ 响应式设计 - 完美适配

使用示例

Python 高亮效果

# 装饰器和类型提示
@dataclass
class Person:
    name: str
    age: int
    
    def greet(self) -> str:
        return f"Hello, I'm {self.name}"

# 列表推导式和生成器
def fibonacci(n: int) -> Generator[int, None, None]:
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

# 模式匹配（Python 3.10+）
match status:
    case 200:
        print("Success")
    case 404:
        print("Not found")

JavaScript 高亮效果

// 箭头函数和解构
const fetchData = async ({ url, params }) => {
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(params)
        });
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
};

自定义样式

在 blog/articletemplate.php 中添加了增强样式：

/* 代码块容器 */
.code-block { 
    position: relative; 
    margin: 1.5em 0; 
    border-radius: 8px; 
    background: #2d2d2d; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    overflow: hidden; 
}

/* 复制按钮 */
.copy-button { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: #ccc; 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 0.75em; 
    cursor: pointer; 
    opacity: 0; 
    transition: all 0.3s ease; 
    z-index: 10; 
}

/* 行号样式 */
pre[class*="language-"] code .line::before { 
    content: attr(data-line-number); 
    position: absolute; 
    left: 0; 
    width: 3em; 
    text-align: right; 
    color: #6c6c6c; 
    user-select: none; 
}

与 LaTeX 公式的兼容性

代码高亮和数学公式渲染现在完美共存：

# 在代码中使用 LaTeX 注释
def compute_gradient(x):
    # \(\frac{\partial L}{\partial x} = 2x\)
    return 2 * x

$$\\frac{\\partial L}{\\partial x} = 2x$$

性能优化

  1. 按需加载：通过 Autoloader 插件，语法文件仅在需要时加载
  2. CDN 加速：使用 jsDelivr 全球 CDN
  3. 异步渲染：DOM 加载完成后异步执行高亮，不阻塞页面渲染
  4. 缓存友好：CDN 资源被浏览器缓存，重复访问无需重新下载

升级步骤

  1. 创建 blog/articletemplate.php - 新的文章模板
  2. 修改 _blog/config.php - 移除旧的模板函数，加载新模板
  3. 删除 blog/prism.js</code> 和 <code>blog/prism.css - 不再需要
  4. 重新生成 HTML - 所有文章将自动使用新系统

已删除的文件

  • _blog/prism.js - 简化版高亮脚本
  • _blog/prism.css - 简化版样式表
  • _blog/Parsedown.php 中简化版代码 - 已被完整版替代

验证

✅ 已重新生成 agi/mHC研读.html，所有代码块使用全新高亮 ✅ 行号显示正常 ✅ 复制按钮工作正常 ✅ KaTeX 公式渲染正常 ✅ 移动端显示正常

使用的插件

  • PrismJS Core v1.29.0
  • PrismJS Autoloader Plugin
  • Tomorrow 主题
  • KaTeX v0.16.9
  • KaTeX Auto-render

主题定制

如果你想更换主题，只需修改 CDN 链接：

  • prism-tomorrow.min.css → prism.min.css（默认）
  • 其他可用主题：prism-dark, prism-okaidia, prism-coy, prism-solarizedlight

升级完成！ 现在所有文章都使用专业的代码高亮渲染，Python 代码看起来更美:

← 返回目录