이미지#

이미지 파일을 src/assets/images 폴더나 public/images 폴더에 넣고 경로를 지정합니다. public 폴더에 넣은 경우 /images/파일명.png 처럼 절대 경로로 접근 가능합니다.

대표이미지 설정이나 다른 이미지 처리방법으로는 posts/[새로운파일명]/(index.md와 대표이미지 첨부) 하는 방식으로 해서 이미지 경로를 첨부할수 있음 상단 가본설정문구를 처럼 상대경로 사용가능함.

1
![이미지 설명](/assets/images/demo-banner.png)

유튜브(YouTube) 영상#

유튜브 영상은 <iframe> 태그를 사용하여 삽입합니다. 유튜브 ‘공유 -> 퍼가기’ 메뉴에서 코드를 복사하면 됩니다.

1
<iframe width="100%" height="468" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

기본 사용법#

언어 이름을 뒤에 적어주세요 (js, ts, python, html 등).

1
```js
2
console.log('Hello World');
3
```

제목 표시#

파일 제목을 표시할 수 있습니다.

1
```js title="app.js"
2
console.log('File title example');
3
```

줄 강조 및 라인 넘버#

• showLineNumbers: 줄 번호 표시
• {1, 3-4}: 특정 줄 강조
• ins={2}, del={3}: 추가/삭제 표시 (Diff 스타일)

1
```js showLineNumbers {1} ins={3} del={4}
2
function test() {
3
  console.log('Highlighted line');
4
  console.log('Added line');
5
  console.log('Deleted line');
6
}
7
```

GitHub 스타일 알림#

1
> [!NOTE]
2
> GitHub 스타일의 알림도 지원합니다.

파일 구조 (File Tree)#

프로젝트 구조를 보여줄 때 유용합니다. bash나 text로 작성합니다. 작성예시 `기호를 3개 작성하고 옆에text나 bash로 표기하여 구조 작성하고 닫기 첫번째거는 test 두번째가 bash로 했을때 나라면 bash쓸듯

1
root/
2
├── src/
3
│   ├── content/
4
│   │   └── posts/
5
│   └── pages/
6
├── public/
7
└── package.json

1
root/
2
├── src/
3
│   ├── content/
4
│   │   └── posts/
5
│   └── pages/
6
├── public/
7
└── package.json

깃허브 리포지토리 카드#

특정 리포지토리를 카드 형태로 보여줍니다.

1
::github{repo="사용자명/리포지토리명"}

스포일러 (숨김 텍스트)#

클릭해야 보이는 텍스트입니다. 이 내용은 비밀입니다!

1
:spoiler[숨겨진 텍스트]