diff --git a/docs/src/content/docs/ko/guides/components.mdx b/docs/src/content/docs/ko/guides/components.mdx
index 82c8fe53c34..bee88894944 100644
--- a/docs/src/content/docs/ko/guides/components.mdx
+++ b/docs/src/content/docs/ko/guides/components.mdx
@@ -202,3 +202,48 @@ import { Icon } from '@astrojs/starlight/components';
 사용 가능한 모든 아이콘 목록이 관련 이름과 함께 아래에 표시됩니다. 아이콘을 클릭하면 해당 아이콘 컴포넌트의 코드를 복사할 수 있습니다.
 
 <IconsList />
+
+### 코드
+
+예를 들어 파일, 데이터베이스 또는 API와 같은 외부 소스에서 오는 데이터를 렌더링하기 위해 [Markdown 코드 블록](/ko/guides/authoring-content/#코드-블록)을 사용할 수 없는 경우 `<Code>` 컴포넌트를 사용하여 구문 강조 코드를 렌더링합니다.
+
+`<Code>`가 지원하는 props에 대한 자세한 내용은 [Expressive Code “Code Component” 문서](https://expressive-code.com/key-features/code-component/)를 참조하세요.
+
+```mdx
+# src/content/docs/example.mdx
+
+import { Code } from '@astrojs/starlight/components';
+
+export const exampleCode = `console.log('This could come from a file or CMS!');`;
+export const fileName = 'example.js';
+export const highlights = ['file', 'CMS'];
+
+<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
+```
+
+위 코드는 페이지에 다음을 생성합니다.
+
+import { Code } from '@astrojs/starlight/components';
+
+export const exampleCode = `console.log('This could come from a file or CMS!');`;
+export const fileName = 'example.js';
+export const highlights = ['file', 'CMS'];
+
+<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
+
+#### 가져온 코드
+
+[Vite의 `?raw` 가져오기 접미사](https://vitejs.dev/guide/assets#importing-asset-as-string)를 사용하여 코드 파일을 문자열로 가져옵니다. 그런 다음 가져온 문자열을 `<Code>` 컴포넌트에 전달하여 페이지에 포함할 수 있습니다.
+
+```mdx title="src/content/docs/example.mdx" "?raw"
+import { Code } from '@astrojs/starlight/components';
+import importedCode from '/src/env.d.ts?raw';
+
+<Code code={importedCode} lang="ts" title="src/env.d.ts" />
+```
+
+위 코드는 페이지에 다음을 생성합니다.
+
+import importedCode from '/src/env.d.ts?raw';
+
+<Code code={importedCode} lang="ts" title="src/env.d.ts" />
\ No newline at end of file