🚀 ZuiYi 博客系统 - Markdown 终极渲染测试

这是一篇用于测试前端 MarkdownViewer 组件各种渲染情况的文章。请检查目录是否正确生成，以及滚动时右侧/顶部目录是否正常联动。

基础文本排版

普通的正文排版，这里有 粗体 (Bold)，斜体 (Italic)，粗斜体 (Bold Italic)，以及 ~~删除线 (Strikethrough)~~。

这是包含 HTML 标签的富文本测试（刚才修复的痛点）：

这是一段 <span style="color: #C83C23; font-weight: bold; background: #F7F4EB; padding: 2px 6px; border-radius: 4px;">自定义颜色和背景的行内文本</span>，请确保它能在日间/夜间模式下优雅显示。

<p style="text-align: center; color: #076dd0;">这是一个居中对齐且带有自定义颜色的段落 (p 标签)。</p>

列表与引用 (Lists & Blockquotes)

无序与有序列表

• 苹果
• 香蕉
• 嵌套的香蕉子节点 1
• 嵌套的香蕉子节点 2
• 甚至更深的一层

1. 第一步：打开冰箱
2. 第二步：把大象装进去
3. 第三步：关上冰箱

任务列表 (Task Lists)

• [x] 完成前端 React 改造
• [x] 修复 XSS 与 IP 伪造漏洞
• [ ] 准备生产环境上线
• [ ] 申请 SSL 证书

引用块 (Blockquotes)

这是一个标准的引用块。

设计优雅的引用块通常会在左侧有一条粗线，并且文字带有一定倾斜或颜色减淡。

这是一个嵌套引用。

"纸上得来终觉浅，绝知此事要躬行。"

数学公式 (KaTeX Test)

因为我们接入了 remark-math 和 rehype-katex，这里测试数学公式的渲染：

行内公式：爱因斯坦的质能方程是 $E = mc^2$，而勾股定理则与 $a^2 + b^2 = c^2$ 有关。

块级公式：

$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$

$$
\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9
\end{bmatrix}
$$

表格极限测试 (Tables)

测试表格是否会出现内容溢出、是否支持横向滚动，以及表头表尾的样式。

多语言代码高亮测试 (Code Highlighting)

以下是各类常见代码文件的渲染表现，测试黑色背景、字体大小、溢出滚动以及边缘留白。

JavaScript / TypeScript

import React, { useState, useEffect } from 'react';

// 这是一个 TypeScript 接口
interface User {
  id: number;
  name: string;
  email?: string;
}

export const fetchUserData = async (userId: number): Promise<User | null> => {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('Network response was not ok');
    return await response.json();
  } catch (error) {
    console.error('Failed to fetch user:', error);
    return null;
  }
};

Python

import os
import sys
from datetime import datetime

def generate_report(data: list) -> dict:
    """
    生成数据报告
    """
    if not data:
        raise ValueError("数据不能为空")

    report = {
        "total_count": len(data),
        "generated_at": datetime.now().isoformat(),
        "status": "success"
    }

    print(f"Report generated: {report['total_count']} items.")
    return report

if __name__ == "__main__":
    generate_report([1, 2, 3, 4, 5])

Go (Golang)

package main

import (
    "fmt"
    "net/http"
)

func helloHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hello, ZuiYi Blog!")
}

func main() {
    http.HandleFunc("/", helloHandler)
    fmt.Println("Server starting on port 8080...")
    if err := http.ListenAndServe(":8080", nil); err != nil {
        panic(err)
    }
}

Rust

use std::collections::HashMap;

fn main() {
    let mut scores = HashMap::new();
    scores.insert(String::from("Blue"), 10);
    scores.insert(String::from("Yellow"), 50);

    for (team, score) in &scores {
        println!("{}: {}", team, score);
    }
}

CSS / SCSS

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

Bash / Shell

#!/bin/bash
# 部署脚本测试
echo "Starting deployment..."
docker-compose down
docker-compose build --no-cache
docker-compose up -d
echo "Deployment finished successfully!"
docker ps -a

JSON

{
  "name": "zhuiyi-blog",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "tailwindcss": "^3.4.1"
  }
}

分隔线与图片 (Divider & Image)

下面是一条分隔线：

---

这是一张测试图片的排版，请检查图片是否居中，以及在大屏/小屏下的自适应缩放情况。

---

测试结束。如果以上所有元素（特别是复杂的自定义带颜色 span 标签、长表格的横向滚动、以及深色主题代码块）均显示正常且没有产生奇怪的布局偏移（CLS），那么说明文章解析器已达到极高的稳定性。