From 19688c20dd19b664d881bef3d2f0a1820782720a Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Wed, 6 Nov 2024 10:38:34 +0900 Subject: [PATCH] i18n(ko-KR): update `markdown-content.mdx` --- .../docs/ko/guides/markdown-content.mdx | 147 +++--------------- 1 file changed, 22 insertions(+), 125 deletions(-) diff --git a/src/content/docs/ko/guides/markdown-content.mdx b/src/content/docs/ko/guides/markdown-content.mdx index 0e7ed6bbfc78b..b8b6498a3c883 100644 --- a/src/content/docs/ko/guides/markdown-content.mdx +++ b/src/content/docs/ko/guides/markdown-content.mdx @@ -317,130 +317,6 @@ export default defineConfig({ }); ``` -## 구문 강조 - -Astro에는 [Shiki](https://shiki.style/) 및 [Prism](https://prismjs.com/)에 대한 지원이 내장되어 있습니다. 이는 다음에 대한 구문 강조를 제공합니다. - -- Markdown 또는 MDX 파일에 사용되는 모든 코드 펜스(\`\`\`). -- [내장 `` 컴포넌트](/ko/guides/syntax-highlighting/#code-)의 콘텐츠 (Shiki 제공). -- [`` 컴포넌트](/ko/guides/syntax-highlighting/#prism-)의 콘텐츠 (Prism 제공). - -Shiki는 기본적으로 활성화되어 있으며 `github-dark` 테마로 사전 구성되어 있습니다. 컴파일된 출력은 외부 CSS 클래스, 스타일시트 또는 클라이언트 측 JS가 없는 인라인 `스타일`로 제한됩니다. - -### Shiki 구성 - -Shiki는 기본 구문 강조 도구입니다. 다음과 같이 `shikiConfig` 객체를 통해 모든 옵션을 구성할 수 있습니다. - -```js title="astro.config.mjs" -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - markdown: { - shikiConfig: { - // Shiki에 내장된 테마 중에서 선택하거나 직접 추가하세요. - // https://shiki.style/themes - theme: 'dracula', - // 또는 여러 테마를 제공하세요. - // https://shiki.style/guide/dual-themes#light-dark-dual-themes - themes: { - light: 'github-light', - dark: 'github-dark', - }, - // 기본 색상 비활성화 - // https://shiki.style/guide/dual-themes#without-default-color - // (v4.12.0에서 추가됨) - defaultColor: false, - // 맞춤 언어 추가 - // 참고: Shiki에는 .astro를 포함하여 수많은 언어가 내장되어 있습니다! - // https://shiki.style/languages - langs: [], - // 언어에 대한 사용자 지정 별칭 추가 - // 별칭을 Shiki 언어 ID에 매핑하기: https://shiki.style/languages#bundled-languages - // https://shiki.style/guide/load-lang#custom-language-aliases - langAlias: { - cjs: "javascript" - }, - // 가로 스크롤을 방지하려면 word wrap을 활성화하세요. - wrap: true, - // 맞춤 transformers 추가: https://shiki.style/guide/transformers - // 일반 transformers 찾기: https://shiki.style/packages/transformers - transformers: [], - }, - }, -}); -``` - -:::note[Shiki 테마 사용자 정의] -`.astro-code` 클래스를 사용하여 Astro 코드 블록의 스타일을 지정합니다. Shiki의 문서를 따를 때는 (예: [라이트/다크 이중 테마 또는 다중 테마 사용자 지정하기](https://shiki.style/guide/dual-themes#query-based-dark-mode)) 예시에 있는 `.shiki` 클래스를 `.astro-code`로 변경해야 합니다. -::: - -#### 나만의 테마 추가하기 - -Shiki의 사전 정의된 테마 중 하나를 사용하는 대신 로컬 파일에서 사용자 정의 테마를 가져올 수 있습니다. - -```js title="astro.config.mjs" -import { defineConfig } from 'astro/config'; -import customTheme from './my-shiki-theme.json'; - -export default defineConfig({ - markdown: { - shikiConfig: { theme: customTheme }, - }, -}); -``` - -또한 테마, 밝은 모드와 어두운 모드 전환 또는 CSS 변수를 통한 스타일 지정에 대해 자세히 알아보려면 [Shiki의 자체 테마 문서](https://shiki.style/themes)를 읽어보는 것이 좋습니다. - -### 기본 구문 강조 - -기본적으로 `prism'`으로 전환하거나 구문 강조를 완전히 비활성화하려면 `markdown.syntaxHighlight` 구성 객체를 사용할 수 있습니다. - -```js title="astro.config.mjs" ins={6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - markdown: { - // 'shiki' (기본값), 'prism' 또는 강조를 비활성화 하기 위한 false일 수 있습니다. - syntaxHighlight: 'prism', - }, -}); -``` - -#### Prism 구성 - -Prism을 사용하기로 선택한 경우 Astro는 대신 Prism의 CSS 클래스를 적용합니다. 구문 강조를 표시하려면 **자신만의 CSS 스타일시트를 가져와야 합니다**. - - -1. 사용 가능한 [Prism 테마](https://github.com/PrismJS/prism-themes)에서 미리 만들어진 스타일시트를 선택합니다. - -2. 이 스타일시트를 [프로젝트의 `public/` 디렉터리](/ko/basics/project-structure/#public)에 추가하세요. - -3. `` 태그를 통해 [레이아웃 컴포넌트](/ko/basics/layouts/)에 있는 페이지의 ``에 이를 로드합니다. ([Prism 기본 사용법](https://prismjs.com/#basic-usage)을 참고하세요.) - - -옵션 및 사용법을 알아보려면 [Prism에서 지원하는 언어 목록](https://prismjs.com/#supported-languages)을 방문하세요. - -## 원격 마크다운 가져오기 - -**Astro에는 [실험적 콘텐츠 컬렉션](/ko/reference/configuration-reference/#experimentalcontentlayer) 이외의 원격 Markdown에 대한 기본 지원은 포함되어 있지 않습니다!** - -원격 Markdown을 직접 가져와 HTML로 렌더링하려면 NPM에서 자체 Markdown 파서를 설치 및 구성해야 합니다. 이렇게 하면 사용자가 구성한 Astro의 기본 제공 Markdown 설정이 상속되지 **않습니다**. - -이를 프로젝트에서 구현하기 전에 이러한 제한 사항을 이해하고, 대신 콘텐츠 컬렉션 로더를 사용하여 원격 마크다운을 가져오는 것을 고려하세요. - -```astro title="src/pages/remote-example.astro" ---- -// 예: 원격 API에서 마크다운 가져오기 -// 런타임에 HTML로 렌더링합니다. -// "marked" 사용 (https://github.com/markedjs/marked) -import { marked } from 'marked'; -const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md'); -const markdown = await response.text(); -const content = marked.parse(markdown); ---- -
-``` - ## 개별 Markdown 페이지 :::tip @@ -500,4 +376,25 @@ const {frontmatter} = Astro.props; 또한, 레이아웃 컴포넌트에서 [Markdown 스타일을 지정](/ko/guides/styling/#markdown-스타일링)할 수도 있습니다. -[Markdown 레이아웃](/ko/basics/layouts/#markdown-레이아웃)에 대해 더 자세히 알아보세요. \ No newline at end of file +[Markdown 레이아웃](/ko/basics/layouts/#markdown-레이아웃)에 대해 더 자세히 알아보세요. + +## 원격 마크다운 가져오기 + +**Astro에는 [실험적 콘텐츠 컬렉션](/ko/reference/configuration-reference/#experimentalcontentlayer) 이외의 원격 Markdown에 대한 기본 지원은 포함되어 있지 않습니다!** + +원격 Markdown을 직접 가져와 HTML로 렌더링하려면 NPM에서 자체 Markdown 파서를 설치 및 구성해야 합니다. 이렇게 하면 사용자가 구성한 Astro의 기본 제공 Markdown 설정이 상속되지 **않습니다**. + +이를 프로젝트에서 구현하기 전에 이러한 제한 사항을 이해하고, 대신 콘텐츠 컬렉션 로더를 사용하여 원격 마크다운을 가져오는 것을 고려하세요. + +```astro title="src/pages/remote-example.astro" +--- +// 예: 원격 API에서 마크다운 가져오기 +// 런타임에 HTML로 렌더링합니다. +// "marked" 사용 (https://github.com/markedjs/marked) +import { marked } from 'marked'; +const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md'); +const markdown = await response.text(); +const content = marked.parse(markdown); +--- +
+```