Blog 작성 참고자료

Hugo 기본 및 추가 shortcode 사용법

Awesome Patrick 글 작성을 위해 개인적으로 참고할 내용을 정리한 글입니다.

Markdown 사용법

1. Task list

- [ ] action one
- [x] action two

2. Fraction

5/12

512

3. Latex dash

Hyphen: tie-in, toll-free, two-third
En Dash: May--September, page 147--149
Em Dash: Additional thought---as I've done here.

Hyphen: tie-in, toll-free, two-third

En Dash: May–September, page 147–149

Em Dash: Additional thought—as I’ve done here.

4. Strike-through

~~strike through~~

strike through

5. Footnote

This is a footnote.[^1]
[^1]: the footnote text.

This is a footnote.1

6. Definition

Boy
: A boy is a child who will grow up to be a man.
Boy
A boy is a child who will grow up to be a man.

7. Emoji

I : heart : you.

I ❤️ you.

colon 앞뒤 빈 칸 없이 입력

8. Equation

\\( a = b \\)#inline equation
$$ a = b $$ #standalone equation

\( a = b \) #inline equation

$$ a = b $$ #standalone equation

9. Super- and subscription

a<sup>x</sup>
a<sub>x</sub>

ax

ax

This is reference [link][1]
[1]: http://url.com "option text"

This is reference link

Shortcode 사용법

Markdown 문법과 같이 사용할 수 있는 shortcode

{ {% shortcode_name %}} *Contents* { {% /shortcode_name %}}

Markdown 사용하지 않는 shortcode

{ {< shortcode_name >}} <i>Contents</i> { {< /shortcode_name >}}

Hugo built-in shortcodes

1. figure: 이미지 삽입

  • src : image URL
  • height, width
  • link: hyperlink destination URL
  • target: target attribute if link parameter is set.
  • alt, title, caption
{ {< figure src="/posts/hugo/sky.jpg" caption="Caption: Original resolution is 1880x1253" title="Title: Sky">}}
Caption: Original resolution is 1880x1253

Title: Sky

Caption: Original resolution is 1880x1253

아래는 markdown을 이용한 이미지 삽입 (두 경우 모두 max-width: 100%)

img

2. highlight: syntax highlighting

  • linenos: table or inline
  • linenostart: default 1
  • hl_lines: highlight lines (ex: 3-8 10-20)

    { {< highlight go "linenos=table, linenostart=10, hl_lines=3 6" >}}
    package main
    
    import "fmt"
    
    func main() {
    	fmt.Println("Hello, Go")
    }
    { {< /highlight >}}
10
11
12
13
14
15
16
package main

import "fmt"

func main() {
	fmt.Println("Hello, Go")
}

3. ref, relref: 링크 URL 생성

  • markdown 파일을 이용해 절대, 상대 경로 자동 성성
  • markdown 파일 위치는 content/ directory 기준
  • 전체에 같은 파일 이름이 하나밖에 없다면 파일 이름만 입력도 가능

3.1 Anchor 만들기 (#making-anchor)

## Alpha 101 {#alpha}
## Version 1.0 {#version-1-dot-0}
[Go to making-anchor](#making-anchor)

Go to making-anchor

4. youtube: Youtube 동영상 삽입

  • id, autoplay

https://www.youtube.com/watch?v=w7Ft2ymGmfc 영상의 경우,

{ {< youtube w7Ft2ymGmfc >}}

or

{ {< youtube id="w7Ft2ymGmfc" autoplay="true" >}}

5. gist: Gist 추가

{ {< gist {user id} {gist id} ["file name"] >}}

추가 shortcodes

1. zimg: 확대 가능한 이미지 삽입

기본 사용법은 figure와 동일하나 link, target은 지원하지 않고, mouse-title parameter 추가

  • mouse-title: 이미지 위에 마우스를 올렸을 때 나타나는 문구 (default: click to zoom)

    { {< zimg src="/posts/hugo/sky.jpg" width="300" caption="캡션: 원본의 해상도는 1880x1253입니다." title="제목: 하늘" mouse-title="ZOOM" >}}

제목: 하늘

캡션: 원본의 해상도는 1880x1253입니다.

2. box: 글상자

  • 글상자의 배경 색상

    { {% box ["background-color"] %}}
    blah blah
    { {% /box %}}

3. pure_table: 테이블 삽입

markdown table은 다른 <table> tag와의 충돌 문제로 외곽선이 없음

{ {< pure_table
  "columnName1|columnName2|...|columnName99"
  "dataValue1|dataValue2|...|dataValue99"
  "dataValue1|dataValue2|...|dataValue99"
  "dataValue1|dataValue2|...|dataValue99"
>}}
columnName1 columnName2 ... columnName99
dataValue1 dataValue2 ... dataValue99
dataValue1 dataValue2 ... dataValue99
dataValue1 dataValue2 ... dataValue99

4. fluid_imgs: 이미지 삽입

{ {< fluid_imgs
  "class|src|alt"
  "class|src|alt"
>}}

여기 참고

5. flowchart: Flowchart

{ {< flowchart [align="center"] >}}
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
{ {< /flowchart >}}

여기 참고

6. sequence: Sequence diagram

{ {< sequence [align="center"] [theme="hand"] >}}
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
{ {< /sequence >}}

여기 참고

7. mermaid: Flowchart, Sequence diagram, Gantt chart

{ {< mermaid [align="center"] >}}
[graph | sequenceDiagram | gantt]
{ {< /mermaid >}}

여기 참고

8. quote: 인용

  • warn: 주황
  • note: 녹색
  • quote: 하늘
  • defalut: 회색

    { {% quote [warn | note | quote] %}}
    blah blah
    { {% /quote %}}

  1. option text [return]