
# Markdown 图片使用演示

本文展示在博客文章中插入图片的几种方式。

## 方式一：本地图片

将图片放在 `public/images/` 目录下，然后使用相对路径引用：

```markdown
![我的图片](/images/example.png)
```

**示例：**

![示例图片占位符](https://via.placeholder.com/800x400/667eea/ffffff?text=Local+Image+Example)

## 方式二：外部图片 URL

直接使用完整的图片 URL：

```markdown
![图片描述](https://example.com/image.jpg)
```

**示例：**

![Unsplash 图片](https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80)

## 图片对齐和大小控制

你可以通过 HTML 语法来控制图片的对齐和大小：

### 居中对齐

<center>

![居中图片](https://via.placeholder.com/600x300/764ba2/ffffff?text=Centered+Image)

</center>

### 带标题的图片

> **提示：** 使用 `<center>` 标签可以让图片居中显示。

## 代码中的图片引用

在代码块中引用图片路径时不会被解析为图片：

```markdown
这里不是图片: /images/logo.png
这里才是图片: ![logo](/images/logo.png)
```

## 最佳实践

1. **使用本地图片** - 将博客相关的图片放在 `public/images/` 目录
2. **优化图片大小** - 上传前压缩图片，建议单张不超过 500KB
3. **使用 CDN** - 外部图片建议使用可靠的 CDN 服务
4. **添加 alt 文本** - 记得为图片添加描述性 alt 文本，利于 SEO 和无障碍访问

## 图片文件夹结构

建议的文件夹结构：

```
public/
├── images/
│   ├── posts/
│   │   ├── demo-image-1.png
│   │   └── demo-image-2.jpg
│   └── avatar.png
```

在文章中引用：
- `/images/posts/demo-image-1.png`
- `/images/avatar.png`

这样就可以在文章中方便地使用图片了！


演示在博客文章中如何使用图片

Markdown 图片使用演示


# 代码高亮演示

本文展示博客支持的代码高亮效果，包含多种编程语言示例。

## JavaScript

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to the blog, ${name}`;
}

const users = ["Alice", "Bob", "Charlie"];
users.forEach((user) => greet(user));
```

## Python

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 计算前10个斐波那契数
for i in range(10):
    print(fibonacci(i))
```

## TypeScript

```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}
```

## Go

```go
package main

import "fmt"

func main() {
    message := "Hello, World!"
    fmt.Println(message)

    // 计算平方
    for i := 1; i <= 5; i++ {
        fmt.Printf("%d² = %d\n", i, i*i)
    }
}
```

## Rust

```rust
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];

    let sum: i32 = numbers.iter().sum();
    println!("Sum: {}", sum);

    // 过滤偶数
    let even_numbers: Vec<_> = numbers
        .into_iter()
        .filter(|&x| x % 2 == 0)
        .collect();

    println!("Even numbers: {:?}", even_numbers);
}
```

## HTML

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>示例页面</title>
  </head>
  <body>
    <div class="container">
      <h1>欢迎来到我的博客</h1>
      <p>这是一个段落。</p>
    </div>
  </body>
</html>
```

## CSS

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}
```

## SQL

```sql
SELECT
    users.name,
    COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE users.created_at >= '2024-01-01'
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5
ORDER BY order_count DESC
LIMIT 10;
```

## 效果说明

代码高亮功能支持以下特性：

- 关键字高亮
- 字符串高亮
- 注释高亮
- 数字高亮
- 函数名高亮
- 类型高亮

希望这个演示能帮助你了解博客的代码展示效果！

## 图片

![111](/images/posts/demo/vercel.svg)


这是一个代码高亮效果的演示文章，展示不同编程语言的语法高亮。

记录学习，沉淀思考

最新文章

Markdown 图片使用演示

代码高亮演示