For me only

Trang nhằm mục đích dùng để tham khảo nhanh và giới thiệu về cách trang web này sẽ hiển thị Markdown và chỉ dành riêng cho tác giả, thường xuyên thay đổi và cập nhật các tính năng trên trang. Nếu có gì thắc mắc, xin vui lòng liên hệ tác giả.

Nội dung bài viết được soạn trên file.mdx. Nếu bạn chưa hiểu về nó hãy xem Markdown Guide - Markdown Shortcuts - chuẩn Markdown

Keyboard: Sử dụng <kbd>⌘</kbd> + <kbd>K</kbd> để hiển thị ⌘ + K
Emoji: Sao chép và dán trực tiếp biểu tượng cảm xúc từ trang web này 🎉

Bleed

A built-in component to slightly expand content beyond the container's width, <Bleed> allows it to overflow on both sides.

It's ideal for enhancing the presentation of graphical elements, offering a more immersive and visually appealing reading experience.

import { Bleed } from '@/components/bleed'

<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>

<Bleed full>![Grain Gradient](https://phannhatchanh.com/roadtrip/FB_IMG_1703209576926.jpg)</Bleed>

<Bleed full>
  <iframe
    src="https://codesandbox.io/embed/swr-states-4une7"
    width="100%"
    height="500px"
    title="SWR-States"
  />
</Bleed>

Callout

A built-in component to show important information to the reader. With Github Alert.

A callout is a short piece of text intended to attract attention.

Default

Helpful advice for doing things better or more easily.

import { Callout } from '@/components/callout'

<Callout>Helpful advice for doing things better or more easily.</Callout>

Info

Useful information that users should know, even when skimming content.

import { Callout } from '@/components/callout'

<Callout type="info">
  Useful information that users should know, even when skimming content.
</Callout>

Warning

Urgent info that needs immediate user attention to avoid problems.

import { Callout } from '@/components/callout'

<Callout type="warning">
  Urgent info that needs immediate user attention to avoid problems.
</Callout>

Error

Advises about risks or negative outcomes of certain actions.

import { Callout } from '@/components/callout'

<Callout type="error">
  Advises about risks or negative outcomes of certain actions.
</Callout>

Important

Key information users need to know to achieve their goal.

import { Callout } from '@/components/callout'

<Callout type="important">
  Key information users need to know to achieve their goal.
</Callout>

Custom icon

⭐

NextJS has 132k stars on GitHub!

import { Callout } from '@/components/callout'

<Callout type="info" emoji="⭐">NextJS has 132k stars on GitHub!</Callout>

Tabs

Usage Npm2Yarn

A built-in component for creating tabbed content, helping organize related information in a compact, interactive layout.

import { Tabs } from '@/components/tabs'

<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
  <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
  <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
</Tabs>

Default Selected Index

You can use the defaultIndex prop to set the default tab index:

import { Tabs } from '@/components/tabs'

<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
  ...
</Tabs>

And you will have npm as the default tab:

Image

<Image
  title={`Tiêu đề hình ảnh`}
  alt={`Mô tả hình ảnh`}
  src={`/images/banner.png`}
  width={480}
  height={270}
  caption
/>

Tweets

<Tweet
  id="1628832338187636740"
  caption={
    <span>
      Sử dụng <strong>caption={'Đoạn mô tả'}</strong>
    </span>
  }
/>

Folder structure

<Files title="NextJS folder structure">
  <Folder name="app" defaultOpen>
    <File name="layout.tsx" />
    <File name="page.tsx" />
  </Folder>
  <Folder name="components" defaultOpen>
    <Folder name="ui" defaultOpen active>
      <File name="alert-dialog.tsx" active />
      <File name="button.tsx" active />
      <File name="dropdown-menu.tsx" active />
      <File name="..." active />
    </Folder>
    <File name="main-nav.tsx" />
    <File name="page-header.tsx" />
    <File name="..." />
  </Folder>
  <Folder name="lib" defaultOpen active>
    <File name="utils.ts" active />
  </Folder>
  <Folder name="styles" defaultOpen>
    <File name="globals.css" />
  </Folder>
  <File name="next.config.js" />
  <File name="package.json" />
  <File name="postcss.config.js" />
  <File name="tailwind.config.js" />
  <File name="tsconfig.json" />
</Files>

Steps

A built-in component to turn a numbered list into a visual representation of steps.

import { Steps } from '@/components/steps'

## Getting Started

Here is some description.

<Steps>
### Step 1

Contents for step 1.

### Step 2

Contents for step 2.
</Steps>

Excluding Headings from Table of Contents

To exclude the headings from the <Steps> component (or any other headings) to appear in the Table of Contents, replace the Markdown headings ### ... with <h3> HTML element wrapped in curly braces.

<Steps>
- ### Step 1
+ {<h3>Step 1</h3>}

Contents for step 1.
</Steps>

Latex

Ví dụ để hiển thị $ax^{2} + bx + c = 0$ hoặc $x^n + y^n = z^n$ sử dụng:

- Trên một dòng, sử dụng $math-expression$
$ x^n + y^n = z^n $

- Nhiều dòng, sử dụng $$math block$$ hoặc
$$
ax^{2} + bx + c = 0
$$

Nếu bạn muốn chèn một số ký tự đặc biệt, bạn phải đặt \ ví dụ: \{ 1,2,3 \} cho kết quả $\{ 1,2,3 \}$
Sử dụng giá trị tuyệt đối, ví dụ: \vert -2 \vert cho kết quả $\vert -2 \vert$
Không sử dụng * cho biểu tượng dấu sao, hãy sử dụng a \ast b và cho kết quả $a \ast b$
Nếu bạn muốn nhập một ma trận như $[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix},$ gõ mã code như dưới đây

$[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix},$