zen의 mardown 페이지 링크 주의사항

결론

zen에서 페이지 내 링크를 사용할 때 제목은 다음 규칙에 따라 변환됩니다.
자모가 대문자를 소문자로 바꾸다.반각 공간, 전각 공간이 연결 문자로 변환됩니다.전각 기호, 반각 기호 URL 인코딩.첫 번째 공백을 무시합니다.

개요

markdown에서 호출 링크는 닻 링크를 사용하여 실현할 수 있습니다.

[リンク](#見出し)

zen공식 문서에서는 이 방법을 언급하지 않았지만 다른 사이트와 마찬가지로 작용했다.그러나 제목에 기호와 공백이 있으면 직접 입력해도 링크를 제대로 붙여넣지 못할 수 있습니다.그래서 나는 정확한 링크의 쓰기 방법을 찾아봤다.

조사 방법

zenn-cli의 미리보기 기능을 사용하여markdown을 〃로 전환할 때 각 제목id을 부여하는 요소를 조사한다.

결실

markdown 입력

<!-- 半角英数字 -->
# ABCDEFGabcdefg123
<!-- 全角英数字 -->
# あいうえおＡＢＣａｂｃ１２３
<!-- 半角記号とスペース -->
# !@#$%^&*()+|~=`[]{};':",./<>_ ?
<!-- 全角記号とスペース -->
# ！＠＃＄％＾＆＊（）＋｜〜＝￥｀「」｛｝；’：”、。・＜＞＿　？
<!-- インライン数式 -->
# $a=b$
<!-- 先頭にスペース -->
#  ABC

출력>

<h1 id="abcdefgabcdefg123">...</h1>
<h1 id="%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A%EF%BD%81%EF%BD%82%EF%BD%83%EF%BD%81%EF%BD%82%EF%BD%83%EF%BC%91%EF%BC%92%EF%BC%93">...</h1>
<h1 id="!%40%23%24%25%5E%26*()%2B%7C~%3D%60%5B%5D%7B%7D%3B'%3A%22%2C.%2F%3C%3E_-%3F">...</h1>
<h1 id="%EF%BC%81%EF%BC%A0%EF%BC%83%EF%BC%84%EF%BC%85%EF%BC%BE%EF%BC%86%EF%BC%8A%EF%BC%88%EF%BC%89%EF%BC%8B%EF%BD%9C%E3%80%9C%EF%BC%9D%EF%BF%A5%EF%BD%80%E3%80%8C%E3%80%8D%EF%BD%9B%EF%BD%9D%EF%BC%9B%E2%80%99%EF%BC%9A%E2%80%9D%E3%80%81%E3%80%82%E3%83%BB%EF%BC%9C%EF%BC%9E%EF%BC%BF-%EF%BC%9F">...</h1>
<h1 id>...</h1>
<h1 id="abc">...</h1>

반각 영문 자모는 대문자만 소문자로 변환된다.반각 공간, 전각 공간이 연결 문자로 변환됩니다.전각 문자, 전각 기호, 대문자를 소문자로 변환한 후 URL 인코딩.반각 기호는 URL에서 사용할 수 있는-_.!~*'() 이외에 URL로 인코딩됩니다.첫 번째 공백을 무시합니다.그러나 전각 문자는 인코딩하지 않아도 작용할 수 있다.
이 같은 결과는 다른 사이트, 예를 들어 Qita와 달리 주의가 필요하다.

보태다

또한 제목이 중복된 경우 요소의 끝부분id에 번호를 분배한다.

# heading
# heading
# heading
# heading

<h1 id="heading">...</h1>
<h1 id="heading-1">...</h1>
<h1 id="heading-2">...</h1>
<h1 id="heading-3">...</h1>

사이트 축소판 그림

웹 페이지 링크 트랩

HTML 앵커 링크(a href 태그)는