Refactor

& fix syntax highlighter

Author: forestream

README.md

@@ -82,7 +82,7 @@ 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.
 
-```jsx
+```typescript
 // Before
 <Box bg={"red"}/>
 // After
@@ -91,7 +91,7 @@ We develop a preprocessor that considers all grammatical cases.
 
 Variables are fully supported.
 
-```jsx
+```typescript
 // Before
 <Box bg={colorVariable}/>
 // After
@@ -102,7 +102,7 @@ Variables are fully supported.
 
 Various expressions and responsiveness are also fully supported.
 
-```jsx
+```typescript
 // Before
 <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
 // After
@@ -130,7 +130,7 @@ Support Theme with Typing
 }
 ```
 
-```jsx
+```typescript
 // Type Safe
 <Text color="$text"/>
 ```
@@ -139,7 +139,7 @@ Support Responsive And Pseudo Selector
 
 You can use responsive and pseudo selector.
 
-```jsx
+```typescript
 // Responsive with Selector
 <Box _hover={{bg: ["red", "blue"]}}/>
 

README_ko.md

@@ -82,7 +82,7 @@ Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다.
 Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다.
 모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다.
 
-```jsx
+```typescript
 // Before
 <Box bg={"red"}/>
 // After
@@ -91,7 +91,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 
 변수 사용도 완전히 지원합니다.
 
-```jsx
+```typescript
 // Before
 <Box bg={colorVariable}/>
 // After
@@ -102,7 +102,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 
 다양한 표현식과 반응형도 모두 지원합니다.
 
-```jsx
+```typescript
 // Before
 <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
 // After
@@ -130,7 +130,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 }
 ```
 
-```jsx
+```typescript
 // Type Safe
 <Text color="$text"/>
 ```
@@ -139,7 +139,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 
 물론 동시 사용도 가능합니다.
 
-```jsx
+```typescript
 // Responsive with Selector
 <Box _hover={{bg: ["red", "blue"]}}/>
 

apps/landing/src/app/(detail)/components/MdxCard.tsx

@@ -46,12 +46,12 @@ export default async function MdxCard({
         borderRadius: '10px',
         border: '1px solid $border',
         bg: '$containerBackground',
-        maxWidth: '100%',
+        maxW: '100%',
         flexShrink: 0,
         cursor: 'default',
-        marginBottom: '20px',
+        mb: '20px',
         _lastChild: {
-          marginBottom: '0',
+          mb: '0',
         },
         typography: 'bodyReg',
         color: '$text',
@@ -65,7 +65,7 @@ export default async function MdxCard({
         </ReactMarkdown>
       </VStack>
       <MdxCardFooter>
-        <Code language="tsx" value={code} />
+        <Code language="typescript" value={code} />
       </MdxCardFooter>
     </Card>
   )

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

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

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

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

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

@@ -13,18 +13,20 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
 
 ## How to use
 
-````jsx
-// Before
-<Center>
+````typescript
+const before = (
+  <Center>
     <Box bg="blue" w={25} h={25} />
     <Box bg="blue" w={25} h={25} />
     <Box bg="blue" w={25} h={25} />
-</Center>
+  </Center>
+)
 
-// After, It has 3 classes on default
-<div className="d3 d4 d5">
+const after = (
+  <div className="d3 d4 d5">
     <div className="d0 d1 d2"></div>
     <div className="d0 d1 d2"></div>
     <div className="d0 d1 d2"></div>
-</div>```
+  </div>
+)
 ````

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

@@ -17,26 +17,31 @@ 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.
 
-```jsx
-// Before
-<any className={css`
-    color: red;
-`}/>
-
-// After
-<any className="d0"/>
+```typescript
+const before = (
+  <div
+    className={css`
+      color: red;
+    `}
+  />
+)
+
+const after = <any className="d0"/>
+
 ```
 
 ### CSS Object
 
 You can also use the css function by passing in a css object as an argument.
 
-```jsx
-// Before
-<any className={css({
-    color: "red"
-})}/>
+```typescript
+const before = (
+  <any
+    className={css({
+      color: 'red',
+    })}
+  />
+)
 
-// After
-<any className="d0" />
+const after = <any className="d0" />
 ```

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

@@ -14,10 +14,8 @@ It has a `display: flex` style by default.
 
 ## How to use
 
-```jsx
-// Before
-<Flex />
+```typescript
+const before = <Flex />
 
-// After, it has a class on default
-<div className="d0" />
+const after = <div className="d0" />
 ```

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

@@ -14,19 +14,21 @@ It has a `display: grid` style by default.
 
 ## How to use
 
-````jsx
-// Before
-<Grid>
+````typescript
+const before = (
+  <Grid>
     <Box bg="blue" w={25} h={25} />
     <Box bg="blue" w={25} h={25} />
     <Box bg="blue" w={25} h={25} />
-</Grid>
+  </Grid>
+)
 
-// After, It has a class on default
-<div className="d3">
+const after = (
+  <div className="d3">
     <div className="d0 d1 d2"></div>
     <div className="d0 d1 d2"></div>
     <div className="d0 d1 d2"></div>
-</div>
+  </div>
+)
     ```
 ````

apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

@@ -12,10 +12,12 @@ The `group` selector is used to apply styles to a group of elements. It is used
 
 ## How to use
 
-```jsx
-<div role="group">
-  <Box _groupHover={{ bg: 'red' }} />
-  <Box _groupHover={{ bg: 'red' }} />
-  <Box _groupHover={{ bg: 'red' }} />
-</div>
+```typescript
+const group = (
+  <div role="group">
+    <Box _groupHover={{ bg: 'red' }} />
+    <Box _groupHover={{ bg: 'red' }} />
+    <Box _groupHover={{ bg: 'red' }} />
+  </div>
+)
 ```