기능 소개

VimWiki의 링크 포맷 문자열을 html의 a 태그로 렌더링해주는 기능이다.

다음과 같은 추가 기능이 있다.

  • 문서의 메타 데이터를 조회하여 자동으로 레이블 생성.
  • 수동으로 레이블을 지정할 수 있음.
  • 문서의 섹션 아이디를 지정할 수 있음.
  • code 태그 내에서도 링크를 생성할 수 있음.
  • 링크 생성을 방지하기 위해 이스케이프할 수 있음.

이 기능을 왜 만들었나?

로컬 컴퓨터에서는 Vim에서 VimWiki로 편집하고, 웹 브라우저에서는 VimWiki 문서 링크를 a 태그로 렌더링해서 보고 싶었기 때문이다.

사용 방법

링크 생성

단순 변환하는 경우

VimWiki 포맷[[/blog/this]]
HTML 변환 결과<a href="/wiki/blog/this">this blog 설명서</a>
웹 브라우저에서 렌더링된 결과this blog 설명서
특징해당 문서의 타이틀이 자동으로 링크 레이블로 렌더링됨.

수동으로 링크 레이블을 지정하는 경우

VimWiki 포맷[[/blog/this]]{수동 레이블 지정}
HTML 변환 결과<a href="/wiki/blog/this">수동 레이블 지정</a>
웹 브라우저에서 렌더링된 결과수동 레이블 지정

문서의 섹션 아이디를 지정하는 경우

VimWiki 포맷[[/blog/this#sub-docs]]
HTML 변환 결과<a href="/wiki/blog/this#sub-docs">this blog 설명서</a>
웹 브라우저에서 렌더링된 결과this blog 설명서
주의사항해당 문서의 섹션 아이디를 변경할 때 같이 변경해줘야 한다. 섹션 아이디가 깨지면 해당 문서의 최상단으로 이동한다.

수동 레이블과 섹션 아이디를 같이 지정하는 경우

VimWiki 포맷[[/blog/this#sub-docs]]{수동 레이블}
HTML 변환 결과<a href="/wiki/blog/this#sub-docs">수동 레이블</a>
웹 브라우저에서 렌더링된 결과수동 레이블

code 태그 내에서 링크를 생성하는 경우

VimWiki 포맷`[[/blog/this]]`
HTML 변환 결과<code><a href="/wiki/blog/this">this blog 설명서</a></code>
웹 브라우저에서 렌더링된 결과this blog 설명서
특징code 태그 안에 있지만 a 링크로 작동(클릭으로 이동 가능).

생성방지 이스케이프

링크가 생성되지 않도록 이스케이프하는 경우

링크 대괄호 앞에 \\를 붙이면 된다.

VimWiki 포맷\\[[/blog/this]]
HTML 변환 결과\\[[/blog/this]]
웹 브라우저에서 렌더링된 결과[[/blog/this]]
특징html에서 단순한 plain text로 렌더링됨. [[, ]]를 표기할 필요가 있을 때 사용한다.

code 태그 내에서 링크를 생성하지 않고 이스케이프하는 경우

링크 대괄호 앞에 \를 붙이면 된다.

VimWiki 포맷`\[[/blog/this]]`
HTML 변환 결과<code>[[/blog/this]]</code>
웹 브라우저에서 렌더링된 결과[[/blog/this]]
특징링크가 아님. [[, ]] 를 표기할 일이 있을 때 사용하면 된다.

구현

create-link.js 파일의 link 함수를 참고할 것.