마크다운 문법: 내부 링크와 특수문자
마크다운 문서 내부 링크가 동작하지 않으면 특수문자가 문제일 수 있습니다. 특수문자 제거, 미리보기, custom id로 해결해봅시다!
블로그 글을 쓰고 나서 이전에 작성한 내부 링크가 동작하지 않는 것을 확인했다.
무엇이 문제였는지 알아보고자 한다.
이를 해결할 수 있는 몇 가지 방법도 알아보자.
페이지 내부 링크 사용법
마크다운 문서 내부에서 링크로 이동하기 위해서는 아래와 같이 사용하면 된다.
1
2
3
4
5
[보이는 텍스트](#이동-위치-텍스트)
...
# 이동 위치 텍스트
사용할 수 있는 헤더는 H1 ~ H6 까지로 마크다운에서 지원하는 헤더이다.
이 때, 이동할 위치의 텍스트 부분을 작성할 때는 2가지를 지켜야한다.
영어는 ‘소문자’ 만 가능
띄어쓰기는 ‘-‘로 변경
동작하지 않는 링크
링크가 동작하지 않는다면 먼저 링크 클릭 시 연결되는 주소와 문서에서 이동할 주소가 같은지 먼저 확인해보자.
1
2
3
4
5
6
7
[1. 다른 장소에서 EC2 인스턴스에 연결하려니 안 돼요!](#1.-다른-장소에서-ec2-인스턴스에-연결하려니-안-돼요!)
...
## 1. 다른 장소에서 EC2 인스턴스에 연결하려니 안 돼요!
...
소문자와 띄어쓰기를 적용했는데 링크가 다르게 나온다.
특수문자 문제?
1
2
3
# 링크에 특수문자가 사라졌다.
.../#1-다른-장소에서-ec2-인스턴스에-연결하려니-안-돼요
다른 특수문자도 그런지 확인해보면 ‘-‘, ‘_’ 를 제외한 다른 특수문자는 지워진 것을 확인할 수 있다.
또한, 특수문자가 지워진 뒤에 링크가 겹치게 된다면 뒤에 ‘-숫자’를 붙이는 것으로 보인다.
해결법
특수문자 안쓰기
이동할 링크에 ‘-‘, ‘_‘를 제외한 특수문자를 지워서 해결할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 수정 전 -->
<!-- [1. 다른 장소에서 EC2 인스턴스에 연결하려니 안 돼요!](#1.-다른-장소에서-ec2-인스턴스에-연결하려니-안-돼요!) -->
<!-- 수정 후 -->
[1. 다른 장소에서 EC2 인스턴스에 연결하려니 안 돼요!](#1-다른-장소에서-ec2-인스턴스에-연결하려니-안-돼요)
...
## 1. 다른 장소에서 EC2 인스턴스에 연결하려니 안 돼요!
...
Visual Studio Code의 Markdown Preview를 활용
하지만 하나씩 특수문자를 지우는게 귀찮을 수 있다.
Visual Studio Code의 Markdown: Open Preview를 사용하면 내가 작성한 마크다운의 미리보기가 가능하다.
이를 통해 링크의 동작을 확인한다면 더욱 쉽게 확인할 수 있다.
또는 처음에 동작하지 않는 링크를 확인했을 때 이동해야 할 링크를 클릭해서 주소를 파악한 후 해당 링크를 사용하면 된다.
Custom Heading ID 사용
개발자 도구를 통해 확인해보면 id 특성 값이 채워져 있다.
아래와 같이 id 특성 값을 변경하여 사용이 가능하다.
1
2
3
4
5
[보이는 텍스트](#custom-id)
...
# 이동 위치 텍스트 {#custom-id}
몰론, id 특성 값 이름 붙이기 규칙도 존재하고 마크다운의 헤더 규칙과 비슷하다.
MD051/link-fragments: Link fragments should be valid
markdownlint의 MD051은 링크와 헤더가 일치하지 않기 때문에 나오는 경고이다.
문서 안에 끊어진 링크를 찾는 데 도움을 주는 것이다.
그러니, 본인이 custom id를 사용하겠다면 이를 신경 쓰지 않고 사용해도 된다고 생각한다.