Fix docs markdown parsing error

Author: hyu-dev

README.md

@@ -2,7 +2,6 @@
   <img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
 </div>
 
-
 <h3 align="center">
     Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
 </h3>
@@ -23,8 +22,8 @@
 <a href="https://discord.gg/8zjcGc7cWh">
 <img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
 </a>
-<a href="https://codecov.io/gh/dev-five-git/devup-ui" > 
- <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/> 
+<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
+ <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
 </a>
 </div>
 
@@ -76,48 +75,58 @@ npm install @devup-ui/webpack-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| Library                  | Version  | Build Time | Build Size        |
-|--------------------------|----------|------------|-------------------|
-| tailwindcss              | 4.1.13   | 20.22s     | 57,415,796 bytes  |
-| styleX                   | 0.15.4   | 38.97s     | 76,257,820 bytes  |
-| vanilla-extract          | 1.17.4   | 20.09s     | 59,366,237 bytes  |
-| kuma-ui                  | 1.5.9    | 21.61s     | 67,422,085 bytes  |
-| panda-css                | 1.3.1    | 22.01s     | 62,431,065 bytes  |
-| chakra-ui                | 3.27.0   | 29.99s     | 210,122,493 bytes |
-| mui                      | 7.3.2    | 22.21s     | 94,231,958 bytes  |
-| devup-ui(per-file css)   | 1.0.18   | 18.23s     | 57,440,953 bytes  |
-| devup-ui(single css)     | 1.0.18   | 18.35s     | 57,409,008 bytes  |
+| Library                | Version | Build Time | Build Size        |
+| ---------------------- | ------- | ---------- | ----------------- |
+| tailwindcss            | 4.1.13  | 20.22s     | 57,415,796 bytes  |
+| styleX                 | 0.15.4  | 38.97s     | 76,257,820 bytes  |
+| vanilla-extract        | 1.17.4  | 20.09s     | 59,366,237 bytes  |
+| kuma-ui                | 1.5.9   | 21.61s     | 67,422,085 bytes  |
+| panda-css              | 1.3.1   | 22.01s     | 62,431,065 bytes  |
+| chakra-ui              | 3.27.0  | 29.99s     | 210,122,493 bytes |
+| mui                    | 7.3.2   | 22.21s     | 94,231,958 bytes  |
+| devup-ui(per-file css) | 1.0.18  | 18.23s     | 57,440,953 bytes  |
+| devup-ui(single css)   | 1.0.18  | 18.35s     | 57,409,008 bytes  |
 
 ## How it works
 
 Devup UI is a CSS in JS preprocessor that does not require runtime.
 Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
 We develop a preprocessor that considers all grammatical cases.
 
-```typescript
-const before = <Box bg={"red"}/>
+```tsx
+const before = <Box bg="red" />
 
-const after = <div className="d0"/>
+const after = <div className="d0" />
 ```
 
 Variables are fully supported.
 
-```typescript
-const before = <Box bg={colorVariable}/>
-
-const after = <div className="d0" style={{
-    "--d0": colorVariable
-}}/>
+```tsx
+const before = <Box bg={colorVariable} />
+
+const after = (
+  <div
+    className="d0"
+    style={{
+      '--d0': colorVariable,
+    }}
+  />
+)
 ```
 
 Various expressions and responsiveness are also fully supported.
 
-```typescript
-const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-
-const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
-    "--d2": variable
-}}/>
+```tsx
+const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
+
+const after = (
+  <div
+    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
+    style={{
+      '--d2': variable,
+    }}
+  />
+)
 ```
 
 Support Theme with Typing
@@ -139,36 +148,40 @@ Support Theme with Typing
 }
 ```
 
-```typescript
+```tsx
 // Type Safe
-<Text color="$text"/>
+<Text color="$text" />
 ```
 
 Support Responsive And Pseudo Selector
 
 You can use responsive and pseudo selector.
 
-```typescript
+```tsx
 // Responsive with Selector
-const box = <Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{ bg: ['red', 'blue'] }} />
 
 // Same
-const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
+const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
 ## How to Contribute
 
 ### Requirements
+
 - [Node.js](https://nodejs.org) (LTS version recommended)
 - [Rust](https://rustup.rs) compiler
 - pnpm package manager (`npm install -g pnpm`)
 
 ### Development Setup
+
 To set up the development environment, install the following packages:
+
 ```sh
 pnpm i
 pnpm build
 cargo install cargo-tarpaulin
 cargo install wasm-pack
 ```
-After installation, run `pnpm test` to ensure everything works correctly.
+
+After installation, run `pnpm test` to ensure everything works correctly.

README_ko.md

@@ -2,7 +2,6 @@
   <img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
 </div>
 
-
 <h3 align="center">
     Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
 </h3>
@@ -23,8 +22,8 @@
 <a href="https://discord.gg/8zjcGc7cWh">
 <img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
 </a>
-<a href="https://codecov.io/gh/dev-five-git/devup-ui" > 
- <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/> 
+<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
+ <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
 </a>
 </div>
 
@@ -70,48 +69,58 @@ npm install @devup-ui/vite-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| 라이브러리                 |  버전    | 빌드 시간    | 빌드 사이즈        |
-|--------------------------|----------|------------|-------------------|
-| tailwindcss              | 4.1.13   | 20.22s     | 57,415,796 bytes  |
-| styleX                   | 0.15.4   | 38.97s     | 76,257,820 bytes  |
-| vanilla-extract          | 1.17.4   | 20.09s     | 59,366,237 bytes  |
-| kuma-ui                  | 1.5.9    | 21.61s     | 67,422,085 bytes  |
-| panda-css                | 1.3.1    | 22.01s     | 62,431,065 bytes  |
-| chakra-ui                | 3.27.0   | 29.99s     | 210,122,493 bytes |
-| mui                      | 7.3.2    | 22.21s     | 94,231,958 bytes  |
-| devup-ui(per-file css)   | 1.0.18   | 18.23s     | 57,440,953 bytes  |
-| devup-ui(single css)     | 1.0.18   | 18.35s     | 57,409,008 bytes  |
+| 라이브러리             | 버전   | 빌드 시간 | 빌드 사이즈       |
+| ---------------------- | ------ | --------- | ----------------- |
+| tailwindcss            | 4.1.13 | 20.22s    | 57,415,796 bytes  |
+| styleX                 | 0.15.4 | 38.97s    | 76,257,820 bytes  |
+| vanilla-extract        | 1.17.4 | 20.09s    | 59,366,237 bytes  |
+| kuma-ui                | 1.5.9  | 21.61s    | 67,422,085 bytes  |
+| panda-css              | 1.3.1  | 22.01s    | 62,431,065 bytes  |
+| chakra-ui              | 3.27.0 | 29.99s    | 210,122,493 bytes |
+| mui                    | 7.3.2  | 22.21s    | 94,231,958 bytes  |
+| devup-ui(per-file css) | 1.0.18 | 18.23s    | 57,440,953 bytes  |
+| devup-ui(single css)   | 1.0.18 | 18.35s    | 57,409,008 bytes  |
 
 ## 작동 원리
 
 Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다.
 Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다.
 모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다.
 
-```typescript
-const before = <Box bg={"red"}/>
+```tsx
+const before = <Box bg="red" />
 
-const after = <div className="d0"/>
+const after = <div className="d0" />
 ```
 
 변수 사용도 완전히 지원합니다.
 
-```typescript
-const before = <Box bg={colorVariable}/>
-
-const after = <div className="d0" style={{
-    "--d0": colorVariable
-}}/>
+```tsx
+const before = <Box bg={colorVariable} />
+
+const after = (
+  <div
+    className="d0"
+    style={{
+      '--d0': colorVariable,
+    }}
+  />
+)
 ```
 
 다양한 표현식과 반응형도 모두 지원합니다.
 
-```typescript
-const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-
-const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
-    "--d2": variable
-}}/>
+```tsx
+const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
+
+const after = (
+  <div
+    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
+    style={{
+      '--d2': variable,
+    }}
+  />
+)
 ```
 
 타이핑이 되는 테마를 지원합니다.
@@ -133,36 +142,40 @@ const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
 }
 ```
 
-```typescript
+```tsx
 // Type Safe
-<Text color="$text"/>
+<Text color="$text" />
 ```
 
 반응형과 가상 선택자도 지원합니다.
 
 물론 동시 사용도 가능합니다.
 
-```typescript
+```tsx
 // Responsive with Selector
-const box = <Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{ bg: ['red', 'blue'] }} />
 
 // Same
-const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
+const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
 ## 기여 방법
 
 ### 요구 사항
+
 - [Node.js](https://nodejs.org) (LTS 버전 권장)
 - [Rust](https://rustup.rs) 컴파일러
 - pnpm 패키지 매니저 (`npm install -g pnpm`)
 
 ### 개발 환경 설정
+
 개발 환경을 위해 아래 패키지들을 설치합니다:
+
 ```sh
 pnpm i
 pnpm build
 cargo install cargo-tarpaulin
 cargo install wasm-pack
 ```
+
 설치 후 `pnpm test`를 실행하여 문제가 없는지 확인합니다.

apps/landing/src/app/(detail)/docs/api/box/page.mdx

@@ -14,16 +14,16 @@ It is just a `div` with some styles.
 
 ## How to use
 
-```typescript
-const before = <Box bg={"red"} />
+```tsx
+const before = <Box bg="red" />
 
 const after = <div className="d0" />
 ```
 
 You can use the `as` prop to change the element type.
 
-```typescript
-const before = <Box as={"span"} />
+```tsx
+const before = <Box as="span" />
 
 const after = <span className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -12,8 +12,8 @@ The `Button` component is a simple button component that can be used to trigger
 
 ## How to use
 
-```typescript
-const before = <Button bg={"red"} />
+```tsx
+const before = <Button bg="red" />
 
 const after = <button className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/center/page.mdx

@@ -1,8 +1,8 @@
 export const metadata = {
   title: 'Center',
   alternates: {
-    canonical: '/docs/api/center'
-  }
+    canonical: '/docs/api/center',
+  },
 }
 
 # Center
@@ -13,12 +13,12 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
 
 ## How to use
 
-````typescript
+```tsx
 const before = (
   <Center>
-    <Box bg="blue" w={25} h={25} />
-    <Box bg="blue" w={25} h={25} />
-    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" h={25} w={25} />
+    <Box bg="blue" h={25} w={25} />
+    <Box bg="blue" h={25} w={25} />
   </Center>
 )
 
@@ -29,4 +29,4 @@ const after = (
     <div className="d0 d1 d2"></div>
   </div>
 )
-````
+```

apps/landing/src/app/(detail)/docs/api/css/page.mdx

@@ -17,7 +17,7 @@ export const metadata = {
 You can use `css` as a tag function to create a css string. Pass in a string of css properties as an argument, ans it will be converted
 into a class list.
 
-```typescript
+```tsx
 const before = (
   <div
     className={css`
@@ -26,15 +26,14 @@ const before = (
   />
 )
 
-const after = <any className="d0"/>
-
+const after = <any className="d0" />
 ```
 
 ### CSS Object
 
 You can also use the css function by passing in a css object as an argument.
 
-```typescript
+```tsx
 const before = (
   <any
     className={css({