h007 Hugo의 포스트 작성할 때의 팁

마크다운은 대부분 잘 외우고 있기 때문에, 작성하는 데는 큰 문제가 없습니다만, 그래도 자주 사용하지 않는 것들은 한 번씩 사용하려면 어디에선가 예제를 가져와서 사용해야 하는 경우가 많습니다.

그래서 그런 경우에는

hugo의 기능을 이용하거나,
vscode의 기능을 이용하거나,
환경에서 사용할 수 있는 스크립트를 사용해서

뭔가 해결할 수 있는 방법이 있는 지, 고민한 내용들, 또 알고 있는 것들을 기록해 보았습니다.

F8키로 실행 설정하기

마크다운은 문서편집을 할 때 .txt 확장자보다 훨씬 더 자주 사용하는 파일 포맷입니다. 마크다운으로 작성하면서 필요한 경우 선택한 라인을 실행해 결과를 바로 확인할 수가 있으니까요.

bash커맨드나 powershell커맨드 인 경우는 훨씬 더 유용합니다. VSCode를 쉘처럼 사용할 수 있습니다.

키보드 단축키 설정 Ctrl+K Ctrl+S를 눌러서 설정화면을 엽니다. JSON편집모드 버튼을 눌러 직접 편집하는 화면으로 들어가 다음과 같은 내용을 입력합니다.

key binding

1
2
3
4
5
6
7
8
9

// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "f8",
        "command": "workbench.action.terminal.runSelectedText",
        "when": "editorLangId == 'markdown'"
    }
]

마크다운 프리뷰 단축키 숙지

VSCode를 사용하여 작상한다면 다음의 키를 숙지하고 있으면 Markdown의 문법이 깨져있는 지를 확인하는데 도움이 됩니다.

Ctrl+Shift+V
이 단축키는 새로운 창으로 열어서 보여줍니다. 자주 쓰지는 않지만, 주로 마지막에 스페이스 두개를 띄우는 것을 잊어서 라인이 이어져서 나오는 경우가 있는데, 이를 확인하기 위해 가끔씩 사용합니다. 더 자주 사용하는 것은 다음의 키입니다.
Ctrl+K V
창을 분할하여 보여줍니다. 에디터를 Focus하고 있어야 합니다

링크는 새창 금지로 작성

예전에는 일부러 새창으로 띄우려고 html태그로 작성하기도 했습니다만, 경험상 링크를 걸 때는 target="_blank" 를 지정하지 않는 것이 정책적으로 도움이 됩니다. 보통 이런 링크를 열 때는 브라우저의 기능을 이용해서 새 탭으로 여는 것을 추천합니다.

테이블 그리기

다른 것들은 거의 외우고 있기 때문에 문제가 없는데, Tables를 사용하는 것은 금방 작성되지 않습니다.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

이 테이블 소스코드를 매번 찾아서 복사해야 할까요?

# 스크립트로 만들어 보면 어떨까요?
# snippet으로 만들어 보면 어떨까요?
# 스크립트로 작성하는 방법을 사용하면 여러 Markdown기능을 지원하는 라이브러리를 사용할 수 있습니다.

하지 말아야 할 것들

VSCode의 Hugofy는 포스트 생성등의 간단한 단축키등을 사용할 수 있게 해줍니다만,
- 스크립트와 F8을 이용한 실행이 더 명확해서 좋습니다.
마크다운 파일에 Gist 삽입하기
- 코드와 문서를 분리할 수 있다는 장점은 있습니다만, 수정에 시간이 2배가 걸린다는 단점이 있습니다.

FrontMatter Summary 사용하기

리스트페이지에서 본문의 일부가 끊어져 나오는 것은 원래 사양이 그런 줄 알았습니다. 그러다가 Description이라는 Property를 표시하는 것을 알게되어 한참을 Description의 값에 Synopsis를 넣곤 했습니다. 하지만 이것도 정답은 아니고, Summary라고 하는 Property에 넣는 것이 원래의 의도인 것을 알았습니다.

Summary: "이 내용이 리스트페이지의 간략한 소개에 나오는 내용입니다."

렌더링 하지 않기

rendering하지 말아야할 민감한 내용은 hugo의 shortcode를 사용해서 처리합니다.

{{ if .Inner }}
    $base64AuthInfo = [Convert]::ToBase64String([Text.Encoding]::ASCII.GetBytes("token:여기는 민감한 정보입니다."))
{{ end }}

웹 폰트 사용시

웹폰트를 사용하신다면 Params.toml 에서 다음의 설정을 사용하시는 것이 깜빡임을 없애는 데에 도움이 됩니다. 상당히 UI를 해칩니다.

enableUiAnimation = true

Escape처리에 주의

-- (double dash) 는 \-\- 로
<> (Angle brackets) 는 \<\> 로 써야 렌더링에 문제가 없습니다.