[Github Pages] Jekyll Template 문법 실행되지 않게 하기

Code 를 보여주고 싶은데 템플릿 변수가 적용되어버린

개요

이전 글 을 작성하다가 문제가 발생했다.

Sidebar에 tags를 추가하기 위한 html 코드를 보여주기 위해 코드블럭을 생성하였는데 코드가 렌더링되어 나타나버렸다.

코드블럭에 html, markdown 심지어 python, shell 까지 다 넣어봤지만 전부 렌더링이 되어버려 뇌정지가 와버렸다.

raw 태그

jekyll 템플릿에는 raw 라는 템플릿 태그가 존재한다.

해당 태그로 감싸진 내용은 템플릿 문법에 의해 렌더링되지 않도록 만들어준다.

raw 태그는 강제로 렌더링이 되어버리는 이슈에 급하게 캡쳐한 이미지…

원본 코드

아래는 원본 코드다.

 <div class="sidebar__tags">
    <h3>Tags</h3>
    <ul>
    {% assign sorted_tags = site.tags | sort %}
    {% for tag in sorted_tags %}
        <li>
        <a href="/tags/#{{ tag[0] | slugify }}">{{ tag[0] }} ({{ tag[1].size }})</a>
        </li>
    {% endfor %}
    </ul>
</div>

raw 태그 미적용

해당 코드를 그대로 코드 블럭에 삽입할 경우 아래와 같이 렌더링된다.

<div class="sidebar__tags">
    <h3>Tags</h3>
    <ul>
    
    
        <li>
        <a href="/tags/#django">django (1)</a>
        </li>
    
        <li>
        <a href="/tags/#github">github (3)</a>
        </li>
    
        <li>
        <a href="/tags/#github-pages">github pages (3)</a>
        </li>
    
        <li>
        <a href="/tags/#jekyll">jekyll (3)</a>
        </li>
    
        <li>
        <a href="/tags/#minimal-mistakes">minimal mistakes (3)</a>
        </li>
    
    </ul>
</div>

raw 태그 적용

위 원본 태그와 동일하게 보여지게 된다.

 <div class="sidebar__tags">
    <h3>Tags</h3>
    <ul>
    {% assign sorted_tags = site.tags | sort %}
    {% for tag in sorted_tags %}
        <li>
        <a href="/tags/#{{ tag[0] | slugify }}">{{ tag[0] }} ({{ tag[1].size }})</a>
        </li>
    {% endfor %}
    </ul>
</div>

마치며

포스트를 작성하는게 익숙하지 않아 이미 작성한 내용도 수정하는게 일상이다.

코드가 템플릿 태그에 의해 렌더링되어 보여지는 이슈를 해결하려고 하니 해결 방법으로 사용한 태그가 렌더링 되어버리는 이슈는 참 당황스러웠달까