Tổng hợp Code Blocks trong claw.ai.vn

Giới thiệu

Trang web claw.ai.vn sử dụng nhiều loại Code Blocks khác nhau để hiển thị code, commands và nội dung kỹ thuật. Dưới đây là tổng hợp tất cả các thành phần được sử dụng.

Tổng quan các Code Blocks

#	Tên Component	Loại	Mô tả
1	Code Block (Markdown)	Native MDX	Code block cơ bản với syntax highlighting
2	Terminal Block	Custom Astro	Terminal window với title bar và window controls
3	Terminal Steps	Custom Astro	Terminal với tabs chuyển đổi các bước
4	Terminal Copybox	Custom Astro	Khối code đơn giản để copy
5	Inline Code	Native MDX	Code inline trong câu văn
6	Code with Language Label	Native MDX	Code block có label ngôn ngữ

Chi tiết từng Code Block

1. Code Block (Markdown Native)

Đây là loại code block cơ bản nhất, sử dụng markdown syntax với triple backticks.

```javascript
function hello() {
  console.log("Hello World");
}
```

Kết quả:

function hello() {
  console.log("Hello World");
}

Đặc điểm:

Tự động syntax highlighting theo ngôn ngữ
Nút Copy tự động được thêm vào
Dark background #1e293b
Font: 'Space Mono', monospace
Border radius: 8px
Padding: 1rem

Các ngôn ngữ được hỗ trợ:

bash, shell, zsh
javascript, typescript, jsx, tsx
json, yaml, toml
python, rust, go
html, css, scss
sql, graphql
Và nhiều ngôn ngữ khác…

2. Terminal Block (Custom Component)

Terminal Block mô phỏng giao diện terminal thực với window controls.

---
import Terminal from '../components/Terminal.astro';
---

<Terminal title="Terminal" prompt="$">
  <Fragment slot="lines">
    {[
      { type: 'command', prompt: '$', text: 'npm install @openclaw/core' },
      { type: 'output', text: 'added 234 packages in 3s' },
    ]}
  </Fragment>
</Terminal>

Cấu trúc props:

interface Props {
  variant?: 'default' | 'steps' | 'copybox';
  title?: string;
  prompt?: string;
  lines?: {
    type: 'command' | 'copy' | 'output' | 'success' | 'error' | 'comment' | 'blank';
    text: string;
    prompt?: string;
  }[];
}

Giao diện:

Title bar với 3 window buttons (close, minimize, maximize)
Tiêu đề tùy chọn
Prompt tùy chỉnh ($, >, #, v.v.)

Các loại dòng (line types):

Type	Màu sắc	Ví dụ sử dụng
`command`	`#cdd6f4` (light purple)	Lệnh cần chạy
`copy`	`#f9e2af` (yellow)	Text quan trọng cần copy
`output`	`#a6e3a1` (green)	Kết quả/output
`success`	`#a6e3a1` (green)	Thông báo thành công
`error`	`#f38ba8` (red)	Thông báo lỗi
`comment`	`#6c7086` (gray)	Giải thích/comment
`blank`	Trắng	Dòng trống

3. Terminal Steps

Terminal với tabs chuyển đổi giữa các bước khác nhau. Rất hữu ích cho hướng dẫn nhiều bước.

---
import Terminal from '../components/Terminal.astro';
---

<Terminal variant="steps">
  <Fragment slot="steps">
    {[
      {
        title: 'Cài đặt',
        tabLabel: 'Bước 1',
        lines: [
          { type: 'command', prompt: '$', text: 'npm install' },
          { type: 'output', text: 'added 100 packages' },
        ]
      },
      {
        title: 'Cấu hình',
        tabLabel: 'Bước 2',
        lines: [
          { type: 'command', prompt: '$', text: 'npm run config' },
          { type: 'success', text: 'Config created successfully!' },
        ]
      },
      {
        title: 'Chạy',
        tabLabel: 'Bước 3',
        lines: [
          { type: 'command', prompt: '$', text: 'npm run dev' },
          { type: 'output', text: 'Server running at http://localhost:4321' },
        ]
      }
    ]}
  </Fragment>
</Terminal>

Đặc điểm:

Tab navigation để chuyển đổi giữa các bước
Mỗi bước có thể có description riêng
Active tab được highlight với màu #f5c2e7
Hover state với màu #cdd6f4

4. Terminal Copybox

Phiên bản đơn giản hóa của Terminal - chỉ hiển thị nội dung cần copy mà không có title bar.

---
import Terminal from '../components/Terminal.astro';
---

<Terminal variant="copybox" title="Config">
  <Fragment slot="lines">
    {[
      { type: 'copy', text: '{"enabled": true, "apiKey": "xxx"}' },
    ]}
  </Fragment>
</Terminal>

Sử dụng khi:

Hiển thị config JSON/XML cần copy
Code ngắn cần highlight
Không cần giao diện terminal đầy đủ

5. Inline Code

Code nhỏ trong câu văn, sử dụng backticks đơn.

Sử dụng lệnh `npm install` để cài đặt package.

Kết quả: Sử dụng lệnh npm install để cài đặt package.

Styling:

Background: rgba(59, 130, 246, 0.1) (light blue)
Padding: 2px 6px
Border radius: 4px
Font: 'Space Mono', monospace

6. Code với Language Label

Code block với language label hiển thị tên ngôn ngữ.

```bash
# This is bash
echo "Hello"
```

```json
{
  "name": "project",
  "version": "1.0.0"
}
```

```python
def hello():
    print("Hello World")
```

Bảng so sánh

Loại	Syntax	Use Case
Inline Code	`code`	Text ngắn trong câu
Basic Code Block	```lang \n code \n ```	Code đơn giản
Terminal Block	`<Terminal>` component	Terminal commands
Terminal Steps	`<Terminal variant="steps">`	Hướng dẫn nhiều bước
Copybox	`<Terminal variant="copybox">`	Code cần copy nhanh

Hướng dẫn sử dụng trong MDX

Import Component

---
import Terminal from '../../components/Terminal.astro';
---

Ví dụ đầy đủ

---
title: Hướng dẫn cài đặt
---

## Cài đặt

Để cài đặt, chạy lệnh sau:

```bash
npm install @openclaw/core
```

Sau đó, tạo file config:

```json
{
  "enabled": true
}
```

:::tip[Mẹo]
Bạn có thể dùng `npm install -g` để cài global
:::

### Các bước chi tiết

<Terminal variant="steps">
  <Fragment slot="steps">
    {[
      {
        title: 'Bước 1',
        lines: [
          { type: 'command', prompt: '$', text: 'npm install' },
          { type: 'output', text: 'added 100 packages' }
        ]
      },
      {
        title: 'Bước 2',
        lines: [
          { type: 'command', prompt: '$', text: 'npm run build' },
          { type: 'success', text: 'Build complete!' }
        ]
      }
    ]}
  </Fragment>
</Terminal>

Done! ✓

Tổng kết

Website claw.ai.vn sử dụng 6 loại code blocks chính:

✅ Markdown Code Block - Native, dùng triple backticks
✅ Terminal Block - Custom với window UI
✅ Terminal Steps - Với tab navigation
✅ Terminal Copybox - Đơn giản hóa
✅ Inline Code - Trong câu văn
✅ Language-labeled Code - Hiển thị ngôn ngữ

Tất cả đều có sẵn trong dự án clone-claw và có thể tái sử dụng cho my-private-docs.