마크다운 확장 기능
아래는 Retypeset에서 지원하는 마크다운 확장 기능들입니다. 각 기능별 문법 예시와 그에 따른 스타일 효과를 함께 확인할 수 있습니다.
Figure Captions
자동 이미지 캡션을 생성하려면 표준 마크다운 이미지 문법 을 사용합니다. 캡션을 숨기려면 alt 텍스트 앞에 밑줄 _을 추가하거나 alt 텍스트를 비워두면 됩니다.
Syntax
Output
Admonition Blocks
Admonition 블록을 생성하려면 GitHub 문법 > [!TYPE] 또는 컨테이너 지시자 ````type을 사용합니다. 지원되는 타입은note,tip,important,warning,caution` 입니다.
Syntax
> [!NOTE]
> 훑어보며 읽을 때도 사용자가 알아두면 좋은 유용한 정보입니다.
> [!TIP]
> 더 쉽거나 더 효율적으로 작업할 수 있도록 도와주는 팁입니다.
> [!IMPORTANT]
> 목표를 달성하기 위해 반드시 알아야 하는 핵심 정보입니다.
```warning
문제를 피하기 위해 즉각적인 주의가 필요한 긴급 정보입니다.특정 행동으로 인해 발생할 수 있는 위험이나 부정적인 결과에 대해 경고합니다.사용자 지정 제목을 가진 노트입니다.
### Output
> [!NOTE]
> 훑어보며 읽을 때도 사용자가 알아두면 좋은 유용한 정보입니다.
> [!TIP]
> 더 쉽거나 더 효율적으로 작업할 수 있도록 도와주는 팁입니다.
> [!IMPORTANT]
> 목표를 달성하기 위해 반드시 알아야 하는 핵심 정보입니다.
```warning
문제를 피하기 위해 즉각적인 주의가 필요한 긴급 정보입니다.특정 행동으로 인해 발생할 수 있는 위험이나 부정적인 결과에 대해 경고합니다.사용자 지정 제목을 가진 노트입니다.Collapsible Sections
접을 수 있는 섹션을 만들려면 컨테이너 지시자 문법 ````fold[title]`을 사용합니다. 제목을 클릭하면 내용을 펼치거나 접을 수 있습니다.
Syntax
```fold[사용 팁]
모든 독자에게 필요하지 않을 수 있는 내용은 접을 수 있는 섹션에 배치할 수 있습니다.
### Output
```fold[Usage Tips]
Content that may not interest all readers can be placed in a collapsible section.Mermaid Diagrams
Mermaid 다이어그램을 사용하려면 Mermaid 문법을 코드 블록으로 감싸고 언어 타입을 mermaid로 지정합니다.
Syntax
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
### Output
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;Galleries
이미지 갤러리를 만들려면 컨테이너 지시자 ````gallery`를 사용합니다. 가로 스크롤을 통해 여러 이미지를 확인할 수 있습니다.
Syntax
```gallery
### Output
```gallery
GitHub Repositories
GitHub 저장소를 임베드하려면 leaf directive ::github{repo="owner/repo"}를 사용합니다.
Syntax
::github{repo="radishzzz/astro-theme-retypeset"}Output
Loading repository data...
Videos
비디오를 임베드하려면 leaf directive ::youtube{id="video-id"}를 사용합니다.
Syntax
::youtube{id="9pP0pIgP2kE"}
::bilibili{id="BV1sK4y1Z7KG"}Output
Spotify
Spotify 콘텐츠를 임베드하려면 leaf directive ::spotify{url="spotify-url"}를 사용합니다.
Syntax
::spotify{url="https://open.spotify.com/track/0HYAsQwJIO6FLqpyTeD3l6"}
::spotify{url="https://open.spotify.com/album/03QiFOKDh6xMiSTkOnsmMG"}Output
Tweets
트윗을 임베드하려면 leaf directive ::tweet{url="tweet-url"}를 사용합니다.
Syntax
::tweet{url="https://x.com/hachi_08/status/1906456524337123549"}Output
CodePen
CodePen 데모를 임베드하려면 leaf directive ::codepen{url="codepen-url"}를 사용합니다.
Syntax
::codepen{url="https://codepen.io/jh3y/pen/NWdNMBJ"}