代码高亮与表格

对于技术博客来说，代码高亮和表格是非常核心的功能。这篇博文将专门测试这些元素的渲染效果。

行内代码

在段落中，我们经常会提到诸如 Array.prototype.map() 或 python3 -m venv venv 这样的简短代码片段。行内代码的背景色和字体应该与普通文本有所区分，且不破坏行高。

代码块与语法高亮

JavaScript / TypeScript

TypeScript

interface User {
  id: number;
  name: string;
  email?: string;
}

function greet(user: User): string {
  if (!user.email) {
    console.warn('User email is missing!');
  }
  return `Hello, ${user.name}! Your ID is ${user.id}.`;
}

const u: User = { id: 1, name: "Alice" };
console.log(greet(u));

Python 代码

Python

import os
import sys

def fibonacci(n):
    """生成斐波那契数列"""
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

if __name__ == "__main__":
    print(list(fibonacci(10)))

Bash / Shell 脚本

Bash/Shell

#!/bin/bash
# 这是一个 bash 测试脚本
echo "Updating system..."
sudo apt-get update && sudo apt-get upgrade -y
echo "Done!"

数据表格

测试表格的表头、斑马纹（如果有）、边框以及对齐方式。

项目 (左对齐)	描述 (居中对齐)	价格 (右对齐)
MacBook Pro 14″	M3 Pro, 18GB RAM, 512GB SSD	$1,999
iPhone 15 Pro	256GB, Natural Titanium	$1,099
AirPods Pro 2	USB-C Case	$249
Magic Keyboard	For Mac	$99

表格在移动端是否能够横向滚动也是一个重要的测试点。