Dev/ETC

[Markdown] Markdown 문서에서 링크 목차 만드는 법 (TOC 만들기)

kyeoneee 2020. 5. 2. 18:31
반응형

 최근 공부한 내용을 Markdown문서로 정리하고 Github에 저장해서 정리하다보니 내용이 길어질 때 회사에서 사용하는 WIKI처럼 문서 상단에 링크가 걸린 목차를 만들고 싶어졌다.

 

TOC(Table Of Content)는 헤딩 태그를 기준으로 생성 되므로 문서 작성 시 TOC에 표기하고자 하는 문장들은 헤딩 태그로 명시 해 주어야 한다.

 헤딩 태그로 명시된 문장을 목차에 링크 걸기 위해서는 아래와 같은 포맷으로 작성 하면 된다. 이때 주의 할 점은 링크가 걸리는 텍스트의 띄어쓰기는 "-"로 명시해야 하거나 글자수+띄어쓰기 수 만큼의 "-"를 써준다. 하지만 명확하게 표기하기 위해 해당 문장을 그대로 쓰는 것을 추천한다 :)

[목차 텍스트1](#링크가-걸리는-텍스트1)
[목차 텍스트2](#------------)
...
# 링크가 걸리는 텍스트1
# 링크가 걸리는 텍스트2

 

 

 실제 작성한 예시와 결과는 아래와 같다.

## 목차

1. [깨끗한 코드](#1장.-깨끗한-코드)
2. [의미 있는 이름](#2장.-의미-있는-이름)

  

---

## 1장. 깨끗한 코드

### 보이스카우트 규칙

* 코드는 잘 짜기만 했을 때 끝나는 것이 아닌, 시간이 지나도 언제나 깨끗하게 유지해야 한다.
* 보이스카우트 규칙  
  ` 캠프장은 처음 왔을 때보다 더 깨끗하게 해놓고 떠나라.`

---

## 2장. 의미 있는 이름

### 의도를 분명히 밝혀라

이름을 지을 때 아래의 질문들을 고려해야 한다.

* 변수(혹은 함수나 클래스)의 존재 이유는?
* 수행 기능은?
* 사용 방법은?

  위의 예시와 같이 작성하였을 때 깃헙에 커밋을 해 보면 아래와 같이 목차에 있는 깨끗한 코드, 의미 있는 이름에 링크가 걸림을 알 수 있다. 그리고 링크가 걸린 문장에 커서를 가져가면 1장. 깨끗한 코드앞에 링크 표식이 보이는 것 처럼 링크 표식이 나타난다.

 

 


* 위의 내용을 직접 만들지 않도록 도와주는 사이트가 있다. 

https://ecotrust-canada.github.io/markdown-toc/

 

Generate TOC Table of Contents from GitHub Markdown or Wiki Online

This page uses markdown-toc library to generate your MarkDown TOC online. paste markdown here # Paste Your Document In Here ## And a table of contents will be generated ## On the right side of this page. TOC generated here

ecotrust-canada.github.io

사이트에서 아래와 같이 직접 작성한 마크다운 문서를 빨간칸에 붙여넣으면 헤딩 태그를 기준으로 TOC(Table Of Content)를 생성 해 준다.

반응형

'Dev > ETC' 카테고리의 다른 글

[Git] Staged 된 파일 삭제  (0) 2021.03.20
[Github] Default 브랜치명 변경 (master -> main)  (4) 2020.10.09
[Git] Commit History 정리  (2) 2019.07.01
[Git] 로컬에서 git 사용  (0) 2018.05.23