Awesome Patrick 글 작성을 위해 개인적으로 참고할 내용을 정리한 글입니다.
Markdown 사용법
1. Task list
- [ ] action one
- [x] action two
- action one
- action two
2. Fraction
5/12
5/12
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
10. Reference link
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">}}
Title: Sky
Caption: Original resolution is 1880x1253
아래는 markdown을 이용한 이미지 삽입 (두 경우 모두 max-width: 100%)
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 >}}
|
|
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)
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 %}}
-
the footnote text. ↩︎
See Also