<div id="readability-page-1" class="page"><div>
    
    <article>
        <ul id="markdown-toc">
  <li><a href="#기능-소개" id="markdown-toc-기능-소개">기능 소개</a></li>
  <li><a href="#이-기능을-왜-만들었나" id="markdown-toc-이-기능을-왜-만들었나">이 기능을 왜 만들었나?</a></li>
  <li><a href="#사용-방법" id="markdown-toc-사용-방법">사용 방법</a>    <ul>
      <li><a href="#링크-생성" id="markdown-toc-링크-생성">링크 생성</a>        <ul>
          <li><a href="#단순-변환하는-경우" id="markdown-toc-단순-변환하는-경우">단순 변환하는 경우</a></li>
          <li><a href="#수동으로-링크-레이블을-지정하는-경우" id="markdown-toc-수동으로-링크-레이블을-지정하는-경우">수동으로 링크 레이블을 지정하는 경우</a></li>
          <li><a href="#문서의-섹션-아이디를-지정하는-경우" id="markdown-toc-문서의-섹션-아이디를-지정하는-경우">문서의 섹션 아이디를 지정하는 경우</a></li>
          <li><a href="#수동-레이블과-섹션-아이디를-같이-지정하는-경우" id="markdown-toc-수동-레이블과-섹션-아이디를-같이-지정하는-경우">수동 레이블과 섹션 아이디를 같이 지정하는 경우</a></li>
          <li><a href="#code-태그-내에서-링크를-생성하는-경우" id="markdown-toc-code-태그-내에서-링크를-생성하는-경우">code 태그 내에서 링크를 생성하는 경우</a></li>
        </ul>
      </li>
      <li><a href="#생성방지-이스케이프" id="markdown-toc-생성방지-이스케이프">생성방지 이스케이프</a>        <ul>
          <li><a href="#링크가-생성되지-않도록-이스케이프하는-경우" id="markdown-toc-링크가-생성되지-않도록-이스케이프하는-경우">링크가 생성되지 않도록 이스케이프하는 경우</a></li>
          <li><a href="#code-태그-내에서-링크를-생성하지-않고-이스케이프하는-경우" id="markdown-toc-code-태그-내에서-링크를-생성하지-않고-이스케이프하는-경우">code 태그 내에서 링크를 생성하지 않고 이스케이프하는 경우</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#구현" id="markdown-toc-구현">구현</a></li>
</ul>

<h2 id="기능-소개">기능 소개</h2>

<p>[[/vimwiki]]{VimWiki}의 링크 포맷 문자열을 html의 <code>a</code> 태그로 렌더링해주는 기능이다.</p>

<p>다음과 같은 추가 기능이 있다.</p>

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

<h2 id="이-기능을-왜-만들었나">이 기능을 왜 만들었나?</h2>

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

<h2 id="사용-방법">사용 방법</h2>

<h3 id="링크-생성">링크 생성</h3>
<h4 id="단순-변환하는-경우">단순 변환하는 경우</h4>



<ul data-target-id="table-simple">
  <li>tr
    <ul>
      <li>VimWiki 포맷</li>
      <li><code>\[[/blog/this]]</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>HTML 변환 결과</li>
      <li><code>&lt;a href="/wiki/blog/this"&gt;this blog 설명서&lt;/a&gt;</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>웹 브라우저에서 렌더링된 결과</li>
      <li>[[/blog/this]]</li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>특징</li>
      <li>해당 문서의 타이틀이 자동으로 링크 레이블로 렌더링됨.</li>
    </ul>
  </li>
</ul>

<h4 id="수동으로-링크-레이블을-지정하는-경우">수동으로 링크 레이블을 지정하는 경우</h4>



<ul data-target-id="table-with-label">
  <li>tr
    <ul>
      <li>VimWiki 포맷</li>
      <li><code>\[[/blog/this]]{수동 레이블 지정}</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>HTML 변환 결과</li>
      <li><code>&lt;a href="/wiki/blog/this"&gt;수동 레이블 지정&lt;/a&gt;</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>웹 브라우저에서 렌더링된 결과</li>
      <li>[[/blog/this]]{수동 레이블 지정}</li>
    </ul>
  </li>
</ul>

<h4 id="문서의-섹션-아이디를-지정하는-경우">문서의 섹션 아이디를 지정하는 경우</h4>



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

<h4 id="수동-레이블과-섹션-아이디를-같이-지정하는-경우">수동 레이블과 섹션 아이디를 같이 지정하는 경우</h4>



<ul data-target-id="table-with-label-section">
  <li>tr
    <ul>
      <li>VimWiki 포맷</li>
      <li><code>\[[/blog/this#sub-docs]]{수동 레이블}</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>HTML 변환 결과</li>
      <li><code>&lt;a href="/wiki/blog/this#sub-docs"&gt;수동 레이블&lt;/a&gt;</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>웹 브라우저에서 렌더링된 결과</li>
      <li>[[/blog/this#sub-docs]]{수동 레이블}</li>
    </ul>
  </li>
</ul>

<h4 id="code-태그-내에서-링크를-생성하는-경우">code 태그 내에서 링크를 생성하는 경우</h4>



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

<h3 id="생성방지-이스케이프">생성방지 이스케이프</h3>

<h4 id="링크가-생성되지-않도록-이스케이프하는-경우">링크가 생성되지 않도록 이스케이프하는 경우</h4>

<p>링크 대괄호 앞에 <code>\\</code>를 붙이면 된다.</p>



<ul data-target-id="table-with-escape">
  <li>tr
    <ul>
      <li>VimWiki 포맷</li>
      <li><code>\\\[[/blog/this]]</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>HTML 변환 결과</li>
      <li><code>\\\[[/blog/this]]</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>웹 브라우저에서 렌더링된 결과</li>
      <li>\[[/blog/this]]</li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>특징</li>
      <li>html에서 단순한 plain text로 렌더링됨. <code>\[[</code>, <code>]]</code>를 표기할 필요가 있을 때 사용한다.</li>
    </ul>
  </li>
</ul>

<h4 id="code-태그-내에서-링크를-생성하지-않고-이스케이프하는-경우">code 태그 내에서 링크를 생성하지 않고 이스케이프하는 경우</h4>

<p>링크 대괄호 앞에 <code>\</code>를 붙이면 된다.</p>



<ul data-target-id="table-with-escape-in-code">
  <li>tr
    <ul>
      <li>VimWiki 포맷</li>
      <li><code>`\\[[/blog/this]]`</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>HTML 변환 결과</li>
      <li><code>&lt;code&gt;\[[/blog/this]]&lt;/code&gt;</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>웹 브라우저에서 렌더링된 결과</li>
      <li><code>\[[/blog/this]]</code></li>
    </ul>
  </li>
  <li>tr
    <ul>
      <li>특징</li>
      <li>링크가 아님. <code>\[[</code>, <code>]]</code> 를 표기할 일이 있을 때 사용하면 된다.</li>
    </ul>
  </li>
</ul>

<h2 id="구현">구현</h2>

<p><a href="https://github.com/johngrib/johngrib.github.io/blob/0f4aae169f9d5584a75b17efae8d524f42513fb9/js/create-link.js#L45-L78">create-link.js 파일의 link 함수</a>를 참고할 것.</p>


    </article>


    
    
    



</div></div>

vimwiki 링크를 html 링크로 자동 변환하는 기능

댓글