markdown과 shortcode

휴고는 글을 꾸미기 위해 markdown 문법을 사용하며 테마에서 shortcode로 추가적인 서식 설정이 가능하다.
hugo에서 지원하는 markdown

기본서식 #

Heading #

글의 수준을 의미한다. hugobook에서는 # 은 ToC에 포함되지 않는다.
# ~ ######

1# 제목
2#### 강조

bold, italic #

볼드처리된 텍스트 입니다.
기울임처리된 텍스트 입니다.

1볼드처리된 **텍스트** 입니다.
2기울임처리된 *텍스트* 입니다.

줄바꿈 (Line Breaks) #

텍스트 이후___
스페이스 3개를 입력하면 됩니다.

연속적인 줄바꿈은 html <br>
<br>
태그를 사용해야합니다

수평선 #

1---
2________________________
3- - -
4***
5<hr>

인용구 #

안녕하세요

반갑습니다.

테스트 #

1> 안녕하세요
2> > 반갑습니다.
3> # **테스트**

이모지 shortcode #

🔥 :fire:
https://gist.github.com/rxaviers/7360908

shortcode #

이미 만들어진 shortcode #

https://hugo-book-demo.netlify.app/docs/shortcodes/buttons/
각각 들어가서 확인하면 된다.

expand shortcode의 실제 코드이다.

 1{{ warnf "Expand shortcode is deprecated. Use 'details' instead." }}
 2<div class="book-expand">
 3  <label>
 4    <div class="book-expand-head flex justify-between">
 5      <span>{{ default (i18n "Expand") (.Get 0) }}</span>
 6      <span>{{ default "↕" (.Get 1) }}</span>
 7    </div>
 8    <input type="checkbox" class="hidden" />
 9    <div class="book-expand-content markdown-inner">
10      {{ .Inner | markdownify }}
11    </div>
12  </label>
13</div>

Shortcode 만들기 #

가장 필요한 shortcode를 먼저 만들어보겠다. hugo에서는 code영역이라도 shortcode가 적용되기 때문에 shortcode 형식의 코드는 작성할 수 없다. {{_< ... >}} 에서 _부분을 제거하면 에러가 발생한다.
그렇다고 {으로 적으면 code 영역에서는 문자 그대로 출력된다.

이를 해결하기 위해 open_sc_brace 라는 shortcode를 생성했다.
개행을 없애기 위해 echo -n 으로 파일에 redirect했다.

1$ echo -n "&#123;&#123;<" > layouts/shortcodes/open_sc_brace.html

1{{< open_sc_brace >}}

이제 정상적으로 출력할 수 있게됐다.