Blog Markdown 渲染器优化完成 🎉

我已经完成了对 blog 页面 markdown 文章渲染器的全面优化，采用极简风格设计，细节精致，功能完备。

主要特性

🎨 极简设计风格

• 清爽简洁的视觉风格
• 精致的细节处理
• 完美的间距和字体层次

💻 代码块优化

• 支持多种编程语言语法高亮
• 一键复制代码功能
• 语言标识和精美的代码块框架

📱 完全响应式

• 适配各种设备尺寸
• 移动端优化的字体和间距

功能演示

语法高亮支持

JavaScript/TypeScript:

function calculateFibonacci(n) {
  if (n <= 1) return n;
  
  let prev = 0, curr = 1;
  for (let i = 2; i <= n; i++) {
    [prev, curr] = [curr, prev + curr];
  }
  
  return curr;
}

console.log(calculateFibonacci(10)); // 55

TypeScript 类型定义:

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  preferences?: UserPreferences;
}

type UserPreferences = {
  theme: 'light' | 'dark';
  notifications: boolean;
  language: string;
}

class UserManager {
  private users: Map<number, User> = new Map();
  
  async createUser(userData: Omit<User, 'id'>): Promise<User> {
    const id = Date.now();
    const user: User = { id, ...userData };
    this.users.set(id, user);
    return user;
  }
}

Python 示例:

from typing import List, Optional
import asyncio

class DataProcessor:
    def __init__(self, config: dict):
        self.config = config
        self.processed_count = 0
    
    async def process_batch(self, items: List[str]) -> List[dict]:
        """批量处理数据项"""
        results = []
        for item in items:
            processed = await self.process_item(item)
            if processed:
                results.append(processed)
                self.processed_count += 1
        
        return results
    
    async def process_item(self, item: str) -> Optional[dict]:
        # 模拟异步处理
        await asyncio.sleep(0.1)
        return {"original": item, "processed": item.upper()}

# 使用示例
processor = DataProcessor({"max_workers": 4})

Bash 脚本:

#!/bin/bash

# 自动化部署脚本
set -e

PROJECT_DIR="/var/www/blog"
BACKUP_DIR="/var/backups/blog"

echo "开始部署..."

# 创建备份
sudo mkdir -p $BACKUP_DIR
sudo cp -r $PROJECT_DIR $BACKUP_DIR/$(date +%Y%m%d_%H%M%S)

# 拉取最新代码
cd $PROJECT_DIR
git pull origin main

# 安装依赖
npm ci

# 构建项目
npm run build

# 重启服务
sudo systemctl reload nginx
sudo pm2 restart blog

echo "部署完成！"

Docker 配置:

# 多阶段构建优化镜像大小
FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force

COPY . .
RUN npm run build

# 生产环境镜像
FROM node:18-alpine AS production

RUN addgroup -g 1001 -S nodejs && \
    adduser -S nextjs -u 1001

WORKDIR /app
COPY --from=builder --chown=nextjs:nodejs /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY --chown=nextjs:nodejs package*.json ./

USER nextjs
EXPOSE 3000

CMD ["npm", "start"]

CSS 样式:

/* 现代化的 CSS 自定义属性和 Grid 布局 */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #f1f5f9;
  --text-color: #1e293b;
  --border-radius: 0.75rem;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.blog-layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .blog-layout {
    grid-template-areas: 
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

JSON 配置:

{
  "name": "blog-optimization",
  "version": "2.0.0",
  "description": "极简风格的博客 markdown 渲染器",
  "main": "src/index.js",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "lint": "eslint src/",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@astrojs/react": "^4.2.0",
    "astro": "^5.3.0",
    "prismjs": "^1.30.0",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@types/prismjs": "^1.26.5",
    "prettier": "^3.5.2"
  }
}

文本格式化功能

列表支持

• 无序列表: 支持多级嵌套
• 有序列表: 自动编号和样式
• 任务列表:
  • 已完成的任务
  • 待完成的任务

引用块

这是一个精美的引用块，支持多行内容。

具有优雅的左边框和背景色设计。

表格

功能	支持情况	说明
语法高亮	✅	支持 15+ 编程语言
代码复制	✅	一键复制到剪贴板
响应式设计	✅	适配所有设备
暗色主题	✅	自动主题切换

链接和强调

• 访问项目主页
• 粗体文字 和 斜体文字
• 删除线文字

内联代码

支持内联代码高亮，如 const result = api.getData() 和 npm install package-name。

技术实现

核心技术栈

• Astro: 现代静态站点生成器
• Prism.js: 语法高亮引擎
• Tailwind CSS: 原子化 CSS 框架
• TypeScript: 类型安全的开发

优化特性

1. 性能优化: 代码分割和懒加载
2. 无障碍支持: 完整的 ARIA 标签
3. SEO 友好: 语义化 HTML 结构
4. 打印支持: 优化的打印样式

使用说明

只需要在 markdown 文件中正常书写，所有的样式和功能都会自动应用：

1. 代码块会自动添加语法高亮
2. 点击复制按钮可以复制代码
3. 所有元素都有精美的样式
4. 自动适配暗色/亮色主题

---

这次优化将 blog 的阅读体验提升到了一个全新的层次！ 🚀