1. 코드 울타리와 인라인 코드

code =

1
2
3
4
5
6
7
8

[comment]: # (this is markdown)
```python
import numpy as np
import matplotlib.pyplot as plt
x, y = np.random.normal(0.0, 1.0, (2, 100))
plt.scatter(x, y)
plt.show()
```

result =

1
2
3
4
5

import numpy as np
import matplotlib.pyplot as plt
x, y = np.random.normal(0.0, 1.0, (2, 100))
plt.scatter(x, y)
plt.show()

코드 울타리(code fences) 는 위와 같이 코드를 둘러싸는 3개 이상의 연속된 역따옴표를 말합니다(*따옴표가 아닙니다.). 마크다운에서 이렇게 둘러싸인 영역 안에 있는 텍스트는 코드로 인식됩니다. 휴고는 코드 울타리로 둘러싸인 코드를 html로 렌더링 하고, 문법강조를 하기위한 방법으로 Pygments 를 지원합니다. 우선 아래와 같이 싸이트의 설정파일에 pygmentsCodeFences = true를 추가 합니다. pygemtsStyle로 문법강조 스타일을 정합니다. pygemntsOptions는 설정파일에서 지원해 주지 않는 Pygments 옵션 값을 지원해 주기 위해 사용됩니다. 문자열을 값으로 받으며 문자열은 쉼표로 구분되는 키-값쌍의 연속으로 이루어집니다. 코드에 줄번호를 표시해 주기위해 inlinenos 옵션을 설정해 줍니다. False 'table' 'inline' 값이 가능하며 렌더링되는 태그들의 구조를 결정합니다. 기본값은 False이며 줄번호를 만들지 않습니다. Pygments 에서 지원하는 모든 옵션은 여기서 찾아 볼 수 있습니다.

1
2
3
4
5

# config.toml
pygmentsCodeFences=true
pygmentsStyle="monokai"
pygmentsOptions="linenos=inline"
# pygmentsOptions="key1=value1, key2=value2, ..."

그렇다면 마크다운에서 코드 울타리를 렌더링 하려면 어떻게 해야 할까요. 마크 다운 안에서 코드 울타리는 코드로 인식하기 위한 특수 문자로 인식되어 렌더링이 되지 않습니다. 이러한 규칙을 무시하기 위한 규칙을 이스케이핑 룰(escaping rule) 이라고 합니다. 코드 울타리의 이스케이핑 룰은 간단합니다. 자신보다 긴 울타리 안에 있는 코드울타리는 텍스트로 인식됩니다.

code =

1
2
3
4
5

```` markdown
``` python
import numpy as np
```
````

result =

1
2
3

``` python
import numpy as np
```

코드를 글 사이에 넣고 싶을 때는 인라인 코드를 사용하면 됩니다. 역따옴표가 두 개 이하이면 둘러싸인 텍스트는 인라인 코드(inline code)로 인식됩니다 (개인적으로 한줄코드라고 부릅니다.). inline code 를 렌더링 하려면 `inline code` 을 입력합니다. 이스케이핑 룰은 코드 울타리와 같습니다. `inline code2` 를 렌더링 하려면 아래와 같이 입력합니다.

1

`` `inline code2 ``

2. 숏코드(ShortCode)

마크다운 자체가 긴 html 코드를 짧게 표현할 수 있게 해주지만, 마크다운으로 짧게 하기 힘든 html 코드가 있습니다. 휴고는 이러한 코드도 짥게 표현할 수 있도록 숏코드 기능을 제공합니다. 숏코드는 html을 렌더링하는 방법을 직접 지정할 수 있게 해주는 일종의 함수 입니다. 숏코드는 {{< >}} 혹은 {{% %}}를 태그처럼 사용하며. 아래와 같은 형식을 따릅니다.

1

{{< function arg1 arg2 arg3... / >}}` inner_var `{{</* /function >}}

이 중 문법강조를 지원해주는 highlight 숏코드가 있습니다. 첫번째 전달값으로 코드의 언어를 전달해주고 두번째 전달값으로 Pygments의 옵션값을 문자열로 전달해 줍니다. 문자열은 쉼표로 구분되는 키-값쌍의 연속으로 이루어집니다. 현재 highlight 숏코드는 Chroma를 이용합니다. Pygments를 이용하고 싶다면 설정파일에 pygmentsUseClassic=true 를 입력합니다. Chroma는 Pygments와 같은 옵션값을 사용하기 때문에 옵션값을 바꿀 필요는 없습니다.

코드 울타리에 비해 가지는 장점은 코드마다 다른 스타일을 지정해 줄수 있다는 점과 줄강조가 가능하다는 점 입니다. 코드 울타리는 Pygments 옵션이 싸이트 안의 모든 코드에 일괄적으로 적용되기 때문에 줄강조가 사실상 무의미한 옵션입니다.

code = 

1{{< highlight python "linenos=inline, hl_lines=3, linenostart=199, style=monokai" >}}
2import numpy as np
3import matplotlib.pyplot as plt
4x, y = np.random.normal(0.0, 1.0, (2, 100))
5plt.scatter(x, y)
6plt.show()
7{{< /highlight >}}

result = 

199import numpy as np
200import matplotlib.pyplot as plt
201x, y = np.random.normal(0.0, 1.0, (2, 100))
202plt.scatter(x, y)
203plt.show()

숏코드의 이스케이핑 룰은 다음과 같습니다. {{< >}}를 렌더링 하기위해 {{</* */>}} 을 입력하고 {{% %}}를 렌더링 하기 위해 {{%/* */%}} 을 입력합니다.

3. Gist

Gist를 사용할 경우, gits 숏코드를 이용해 gist 에 저장된 코드를 불러올 수 있습니다. 코드의 url이 다음과 같을 때 아래와 같이 입력합니다.

https://gist.github.com/ghfkddorl/7c068741f0a7ea293d2db2b677b8a1fa/

code =

1

{{< gist ghfkddorl 7c068741f0a7ea293d2db2b677b8a1fa >}}

returl =

이는 아래와도 같습니다. 사실상 그리 큰 차이는 안나고, Ctrl-C Ctrl-V를 이용하면 그냥 <script> 태그를 사용하는 것이 더 빠른 것 같습니다.

1

<script src=https://gist.github.com/ghfkddorl/7c068741f0a7ea293d2db2b677b8a1fa/>

A. Pygments 스타일

Pygmetns 에서 제공하는 스타일은 몇개를 나열해 봅니다.

style=manni 

199import numpy as np
200import matplotlib.pyplot as plt
201x, y = np.random.normal(0.0, 1.0, (2, 100))
202plt.scatter(x, y)
203plt.show()

style=default 

199import numpy as np
200import matplotlib.pyplot as plt
201x, y = np.random.normal(0.0, 1.0, (2, 100))
202plt.scatter(x, y)
203plt.show()

style=fruity 

199import numpy as np
200import matplotlib.pyplot as plt
201x, y = np.random.normal(0.0, 1.0, (2, 100))
202plt.scatter(x, y)
203plt.show()

style=friendly 

199import numpy as np
200import matplotlib.pyplot as plt
201x, y = np.random.normal(0.0, 1.0, (2, 100))
202plt.scatter(x, y)
203plt.show()

style=native 

199import numpy as np
200import matplotlib.pyplot as plt
201x, y = np.random.normal(0.0, 1.0, (2, 100))
202plt.scatter(x, y)
203plt.show()