Documentation

MDX Components Documentation

Hướng dẫn toàn diện về các component và style được sử dụng trong MDX. Tài liệu chi tiết cho developers.

MDX Components Documentation

Tài liệu hướng dẫn sử dụng các component và style trong hệ thống MDX. Bao gồm cú pháp, tham số, và ví dụ thực tế.

Định dạng văn bản cơ bản

Typography

Heading Levels

## Heading 1

### Heading 2

Text Formatting

  • Bold text: **text** → Bold text
  • Italic text: *text* → Italic text
  • Inline code: `code` → inline code

Lists

Unordered Lists:

- Item 1
- Item 2
  - Sub item 2.1
  - Sub item 2.2

Ordered Lists:

1. First item
2. Second item
3. Third item

Blockquotes

> Đây là một blockquote.
> Có thể viết nhiều dòng.

Đây là một blockquote. Có thể viết nhiều dòng.

Links

[Link text](URL)

Ví dụ: Tailwind CSS Documentation

Components Layout

Stack Components

Sử dụng để sắp xếp các element theo chiều ngang hoặc dọc.

HStack - Horizontal Stack

<HStack spacing={8}>
  <div>Item 1</div>
  <div>Item 2</div>
</HStack>

VStack - Vertical Stack

<VStack spacing={4}>
  <div>Item 1</div>
  <div>Item 2</div>
</VStack>

Parameters:

  • spacing: Khoảng cách giữa các items (number)
  • children: React nodes

Label Component

Hiển thị nhãn với chỉ số hoặc trạng thái.

<HStack spacing={8}>
  <Label indicator={100}>Frequently Used</Label>
  <Label indicator={25}>Occasionally</Label>
</HStack>
Frequently UsedOccasionally

Parameters:

  • indicator: Số hiển thị bên cạnh label (optional)
  • children: Nội dung text của label

Components Media

Image Component

Standard Image

<Image
  src='/images/van-gogh.jpg'
  alt='Current workspace'
  width={348}
  height={246}
/>
Current workspace

Parameters:

  • src: Đường dẫn hình ảnh (required)
  • alt: Alt text (required)
  • width: Chiều rộng (required)
  • height: Chiều cao (required)

Sensitive Image

Dành cho hình ảnh nhạy cảm, có blur và warning.

<ImageSensitive
  message='Rontgen Kaki dan Tangan'
  src='/images/van-gogh.jpg'
  alt='Rontgen pergelangan kaki kanan dan pergelangan tangan kiri'
  width={702}
  height={419}
/>
Rontgen Kaki dan Tangan

WARNING: This image is flagged as sensitive content.

Parameters:

  • message: Thông báo cảnh báo (required)
  • src, alt, width, height: Giống Image component

Components Tương tác

Keyboard Component (Kbd)

Hiển thị phím bàn phím.

<Kbd>Alt</Kbd>
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>

Alt Ctrl + C

Quick View Link

Link nhanh với styling đặc biệt.

<QuickView href='/blog/nextjs-tailwind#section'>Xem chi tiết tại đây</QuickView>
Xem chi tiết tại đây

Tables

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Row 1    | Data     | Value    |
| Row 2    | Data     | Value    |
ContactDetail
AddressBandung, Indonesia
TimezoneGMT+7
E-mailbusiness@enji.dev

Components Code

Inline Code Highlighting

<InlineHighlight color='blue'>data-accent</InlineHighlight>
<InlineHighlight color='accent'>highlighted text</InlineHighlight>
<InlineHighlight color='violet'>violet highlight</InlineHighlight>

Colors available: 'accent' | 'blue' | 'violet'

data-accent

Code Blocks

Basic Code Block

```language
code here
```
markdown
UTF-8

Code Block với Line Highlighting

```html {4}
<button>
  <span>Icon</span>
  <span>Text</span>
  Button Text
</button>
```
markdown
UTF-8

Code Block với Line Numbers

```js showLineNumbers {selected:6-10}
module.exports = {
  theme: {
    // config
  },
  plugins: [
    require('tailwindcss-accent')({
      colors: ['violet', 'blue'],
      root: 'blue',
      cssVarsPrefix: 'tw-plugin'
    })
  ]
}
```
Selected: 6-10
markdown
UTF-8

Code Options

  • {copy:false}: Ẩn nút copy
  • {footer:false}: Ẩn footer
  • {title:filename.js}: Hiển thị tên file
  • showLineNumbers: Hiển thị số dòng
  • {4} hoặc {4-8}: Highlight dòng
  • {selected:6-10}: Hiển thị range đã chọn ở footer

CodeGroup Component

Nhóm nhiều code blocks với tabs.

<CodeGroup>
```bash {title:npm}
npm install package
```

```bash {title:yarn}
yarn add package
```

```bash {title:pnpm}
pnpm add package
```
</CodeGroup>

npm install -D tailwindcss-accent

CodeGroup với Files

<CodeGroup variant="files">
```html {title:index.html}
<button class="btn">Click me</button>
```

```css {title:styles.css}
.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}
```
</CodeGroup>

<button class="pagination-button">Previous</button>
<button class="pagination-button">1</button>
<button class="pagination-button">2</button>
<button class="pagination-button">3</button>
<button class="pagination-button">4</button>
<button class="pagination-button">Next</button>

Components Notification

Callout Component

Hiển thị thông báo với các mức độ khác nhau.

<Callout variant='info'>
  Thông tin bổ sung cho người đọc.
</Callout>

<Callout variant='warning'>
  Cảnh báo quan trọng cần chú ý.
</Callout>

<Callout variant='danger'>
  Lỗi nghiêm trọng hoặc cảnh báo nguy hiểm.
</Callout>

<Callout variant='neutral'>
  Ghi chú trung tính.
</Callout>

Variants available: 'neutral' | 'info' | 'warning' | 'danger'

Heads Up

The cssVarsPrefix option can help prevent naming conflicts and make it easier for you to use accent CSS variables in your styles.

Do/Don't Components

Hiển thị ví dụ đúng và sai.

<Dont>
```tsx
<div className={`text-black ${dark && 'text-white'}`}>
  Hello, World!
</div>
```
</Dont>

<Do>
```tsx
<div className={dark ? 'text-white' : 'text-black'}>
  Hello, World!
</div>
```
</Do>
Don't
<div className={`text-black ${dark && 'text-white'}`}>
  Hello, World!
</div>
Do
<div className={dark ? 'text-white' : 'text-black'}>
  Hello, World!
</div>

Tính năng sắp có

  • Numbered lines starting from custom position
  • Code text highlighting within blocks
  • Git history integration with +/- indicators
  • Interactive code playground
  • Code folding/expanding

Tài liệu này được cập nhật thường xuyên. Hãy kiểm tra version mới nhất để có thông tin chính xác nhất.