Skip to content

i18n(ko-KR): update markdown-content.mdx #9919

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yanthomasdev merged 2 commits into from
Nov 6, 2024
Merged

i18n(ko-KR): update markdown-content.mdx #9919

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19688c2
i18n(ko-KR): update `markdown-content.mdx`
jsparkdev Nov 6, 2024
948198c
Merge branch 'main' into markdown-c
yanthomasdev Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 22 additions & 125 deletions src/content/docs/ko/guides/markdown-content.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,130 +317,6 @@ export default defineConfig({
});
```

## 구문 강조

Astro에는 [Shiki](https://shiki.style/) 및 [Prism](https://prismjs.com/)에 대한 지원이 내장되어 있습니다. 이는 다음에 대한 구문 강조를 제공합니다.

- Markdown 또는 MDX 파일에 사용되는 모든 코드 펜스(\`\`\`).
- [내장 `<Code />` 컴포넌트](/ko/guides/syntax-highlighting/#code-)의 콘텐츠 (Shiki 제공).
- [`<Prism />` 컴포넌트](/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 스타일시트를 가져와야 합니다**.

<Steps>
1. 사용 가능한 [Prism 테마](https://github.com/PrismJS/prism-themes)에서 미리 만들어진 스타일시트를 선택합니다.

2. 이 스타일시트를 [프로젝트의 `public/` 디렉터리](/ko/basics/project-structure/#public)에 추가하세요.

3. `<link>` 태그를 통해 [레이아웃 컴포넌트](/ko/basics/layouts/)에 있는 페이지의 `<head>`에 이를 로드합니다. ([Prism 기본 사용법](https://prismjs.com/#basic-usage)을 참고하세요.)
</Steps>

옵션 및 사용법을 알아보려면 [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);
---
<article set:html={content} />
```

## 개별 Markdown 페이지

:::tip
Expand Down Expand Up @@ -500,4 +376,25 @@ const {frontmatter} = Astro.props;

또한, 레이아웃 컴포넌트에서 [Markdown 스타일을 지정](/ko/guides/styling/#markdown-스타일링)할 수도 있습니다.

<ReadMore>[Markdown 레이아웃](/ko/basics/layouts/#markdown-레이아웃)에 대해 더 자세히 알아보세요.</ReadMore>
<ReadMore>[Markdown 레이아웃](/ko/basics/layouts/#markdown-레이아웃)에 대해 더 자세히 알아보세요.</ReadMore>

## 원격 마크다운 가져오기

**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);
---
<article set:html={content} />
```