[Markdown] GitHub 마크다운 작성 꿀팁 모음

Admonition Box

---

인용구(Blockquote)를 활용해서 중요한 정보를 강조할 수 있다. NOTE, IMPORTANT, WARNING 세 가지 타입을 지원하며, 각 타입에 해당하는 아이콘과 컬러로 자동 변경된다. 참고로 README.md 마크다운 편집기에선 미리보기(Preview)로 표시되지 않지만 저장 후엔 정상적으로 표시된다.

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

 

 

Disclosure Widget

---

Disclosure Widget은 작은 삼각형 아이콘을 사용해서 열림과 닫힘 상태를 표시한다. 이 아이콘을 클릭하면 위젯이 열리면서 숨겨져 있던 정보를 보여준다. 주로 FAQ 같은 추가 정보 인터페이스에서 자주 사용한다.

 

HTML에선 <details> 태그를 사용해서 이 기능을 구현할 수 있는데, GitHub 마크다운에서도 동일하게 사용할 수 있다. 위젯에 대한 레이블은 <summary> 요소를 사용한다. 원한다면 위젯 안에 또 다른 위젯을 중복해서 배치할 수도 있다.

<details>
  <summary>More Information</summary>
  <br /> <!-- 레이블과 본문 사이가 너무 좁은 것 같아서 줄바꿈 태그를 사용했다 -->

  ```js
  console.log('hello')
  ```
</details>

 

 

Image Caption

---

GitHub 마크다운은 기본적으로 이미지 캡션을 지원하지 않지만, HTML을 사용해서 이미지 캡션을 추가할 수 있다. 아쉽게도 캡션에 추가적인 서식을 적용하는건 불가능하다. GitHub 마크다운 렌더러는 보안상의 이유로 여러 요소와 속성을 Sanitize 하기 때문에 인라인 스타일은 사용할 수 없다.

<figure>
  <img
    src="https://images.unsplash.com/photo-1451187580459-43490279c0fa"
    alt="Alternative text for image"
  />
  <figcaption>Caption goes here</figcaption>
</figure>

 

 

Table Of Contents (TOC)

---

💡 gh-md-toc 같은 라이브러리를 사용하면 자동으로 TOC를 생성할 수 있다. GitHub README.md에서 Heading이 2개 이상이라면 대화형 TOC가 자동으로 생성된다. 

 

마크다운에서 Heading을 생성하면(#Heading) ID가 자동으로 부여된다. 이 기능을 활용하면 Heading 위치로 이동할 수 있는 링크 목차(TOC)를 구성할 수 있다. 마크다운에서 인라인 링크를 삽입할 땐 [텍스트](URL) 형식의 구문을 사용하는데(단축키 CMD + K), 아래 URL 작성 규칙을 지켜야만 TOC가 정상적으로 작동한다.

 

• 영어 단어는 모두 소문자로 변경
• 공백은 하이픈(-)으로 대체
• 특수 문자(마침표, 쉼표 등) 제거

 

# TOC
- [Dockerfile.vim](#dockerfilevim)
- [Screenshot](#screenshot)
- [Installation](#installation)
    - [OR using Pathogen:](#or-using-pathogen)
    - [OR using Vundle:](#or-using-vundle)
- [License](#license)

# Dockerfile.vim
# Screenshot
# Installation
## OR using Pathogen:
## OR using Vundle:
# License

 

 

Keyboard Input element

---

키보드 입력이나 음성 명령 같은 사용자 입력을 강조할 때 <kbd> HTML 태그를 활용할 수 있다. GitHub 마크다운에서 사용하면 회색 배경의 고정폭 글꼴로 표시된다. 키보드 단축키나 명령어를 설명할 때 유용하다.

 

더 자세한 <kbd> 태그 설명은 MDN 참고.

Command Palette 창은 <kbd>CMD</kbd> + <kbd>k</kbd> 단축키로 열 수 있습니다

 

 

HEX Color Preview

---

HEX 색상코드를(#FFFFFF 형식) 벡틱 ` 으로 감싸면 실제 색상을 시각적으로 표시할 수 있다.

My favorite color is `#6495ED`

 

 

Difference

---

마크다운 코드 블록에 diff 키워드를 사용해서 코드 변경 전 / 후를 명시할 수 있다. 삭제 하려는 코드엔 -, 추가 하려는 코드엔 +를 입력하면 된다.

```diff
- var isLast = false;
+ const isLast = false;
```

 

 

Superscript / Subscript

---

지수(exponent)를 나타낼때 사용하는 위첨자는 <sup> 태그를, 같은 종류의 수를 여러개 제시할 때 사용하는 아래첨자는 <sub> 태그를 사용해서 표현할 수 있다. 첨자 사용법에 대한 더 자세한 설명은 나무위키 참고.

 

2<sup>10</sup> = 1024
2<sub>n</sub>
<sup>아</sup>뿔<sub>사</sub>

 

 

Vectics in a Code Block

---

마크다운에서 ⌘ e 단축키를 누르거나, 벡틱으로 문자열을 감싸면 코드 블록으로 표시된다. 종종 코드 블록 안에서 벡틱을 표시해야 할 때가 있는데 이땐 벡틱 2개로 감싸준다. 이탤릭이 적용된 볼드체 서식은 * 별표(Asterisk) 3개를 사용하면 된다.

This text is ***cursive and bold***. Here are escaped backticks: `` `foo` ``.

 

 

레퍼런스

---

• [Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) #16925
• How to add a collapsible section in markdown  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요