Skip to content

Commit 6a2969c

Browse files
archivesdjarchivesdj
committed
docs: update markdown guide and fix mermaid configuration
1 parent e209bf7 commit 6a2969c

File tree

7 files changed

+375
-91
lines changed

7 files changed

+375
-91
lines changed

‎content/posts/markdown-usage.md‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
---
2+
title: "마크다운 사용법"
3+
date: 2024-04-16
4+
description: "마크다운의 기본 문법과 고급 문법을 상세히 설명하는 가이드"
5+
tags: ["markdown", "문법", "가이드"]
6+
categories: ["기술"]
7+
---
8+
9+
# 마크다운 사용법
10+
11+
마크다운은 텍스트 기반의 마크업 언어로, 간단한 문법으로 문서를 작성할 수 있습니다. 이 글에서는 마크다운의 기본 문법과 고급 문법을 상세히 설명합니다.
12+
13+
## 1. 기본 문법
14+
15+
### 1.1 제목 (Headers)
16+
17+
제목은 `#` 기호를 사용하여 작성합니다. `#`의 개수에 따라 제목의 레벨이 결정됩니다.
18+
19+
```markdown
20+
# H1 제목
21+
## H2 제목
22+
### H3 제목
23+
#### H4 제목
24+
##### H5 제목
25+
###### H6 제목
26+
```
27+
28+
### 1.2 텍스트 스타일
29+
30+
#### 이탤릭체
31+
이탤릭체는 `*` 또는 `_` 기호로 텍스트를 감싸서 표현합니다.
32+
```markdown
33+
*이탤릭체* 또는 _이탤릭체_
34+
```
35+
36+
#### 볼드체
37+
볼드체는 `**` 또는 `__` 기호로 텍스트를 감싸서 표현합니다.
38+
```markdown
39+
**볼드체** 또는 __볼드체__
40+
```
41+
42+
#### 이탤릭체와 볼드체
43+
이탤릭체와 볼드체를 함께 사용하려면 `***` 또는 `___` 기호를 사용합니다.
44+
```markdown
45+
***이탤릭체와 볼드체*** 또는 ___이탤릭체와 볼드체___
46+
```
47+
48+
#### 취소선
49+
취소선은 `~~` 기호로 텍스트를 감싸서 표현합니다.
50+
```markdown
51+
~~취소선~~
52+
```
53+
54+
#### 강조
55+
강조는 `==` 기호로 텍스트를 감싸서 표현합니다.
56+
```markdown
57+
==강조==
58+
```
59+
60+
### 1.3 목록
61+
62+
#### 순서 없는 목록
63+
순서 없는 목록은 `-`, `*`, `+` 기호를 사용합니다.
64+
```markdown
65+
- 항목 1
66+
- 항목 2
67+
- 하위 항목 1
68+
- 하위 항목 2
69+
```
70+
71+
#### 순서 있는 목록
72+
순서 있는 목록은 숫자와 점을 사용합니다.
73+
```markdown
74+
1. 첫 번째 항목
75+
2. 두 번째 항목
76+
1. 하위 항목 1
77+
2. 하위 항목 2
78+
```
79+
80+
### 1.4 링크와 이미지
81+
82+
#### 링크
83+
링크는 `[링크 텍스트](URL)` 형식으로 작성합니다.
84+
```markdown
85+
[Google](https://www.google.com)
86+
[Google](https://www.google.com "구글 홈페이지")
87+
```
88+
89+
#### 이미지
90+
이미지는 `![이미지 설명](이미지 URL)` 형식으로 작성합니다.
91+
```markdown
92+
![마크다운 로고](https://markdownlogo.com/img/logo-markdown.png)
93+
![마크다운 로고](https://markdownlogo.com/img/logo-markdown.png "마크다운 로고")
94+
```
95+
96+
### 1.5 코드
97+
98+
#### 인라인 코드
99+
인라인 코드는 `` ` `` 기호로 감싸서 표현합니다.
100+
```markdown
101+
`print("Hello, World!")`
102+
```
103+
104+
#### 코드 블록
105+
코드 블록은 ``` ``` ``` 기호로 감싸서 표현합니다. 언어를 지정할 수 있습니다.
106+
````markdown
107+
```python
108+
def hello_world():
109+
print("Hello, World!")
110+
```
111+
````
112+
113+
### 1.6 인용문
114+
인용문은 `>` 기호를 사용합니다.
115+
```markdown
116+
> 인용문입니다.
117+
> 여러 줄의 인용문도 가능합니다.
118+
```
119+
120+
### 1.7 표
121+
표는 `|`와 `-` 기호를 사용하여 작성합니다.
122+
```markdown
123+
| 헤더 1 | 헤더 2 |
124+
|--------|--------|
125+
| 셀 1 | 셀 2 |
126+
| 셀 3 | 셀 4 |
127+
```
128+
129+
### 1.8 수평선
130+
수평선은 `---`, `***`, `___` 기호를 사용합니다.
131+
```markdown
132+
---
133+
***
134+
___
135+
```
136+
137+
## 2. 고급 문법
138+
139+
### 2.1 이스케이프 문자
140+
마크다운에서 특수문자를 그대로 표시하려면 `\` 기호를 사용합니다.
141+
```markdown
142+
\* 이스케이프된 별표
143+
\\ 백슬래시
144+
\` 백틱
145+
\[ 왼쪽 대괄호
146+
\] 오른쪽 대괄호
147+
\( 왼쪽 괄호
148+
\) 오른쪽 괄호
149+
\{ 왼쪽 중괄호
150+
\} 오른쪽 중괄호
151+
\# 샵
152+
\+ 플러스
153+
\- 마이너스
154+
\. 점
155+
\! 느낌표
156+
```
157+
158+
### 2.2 작업 목록
159+
작업 목록은 `- [ ]` 또는 `- [x]` 형식으로 작성합니다.
160+
```markdown
161+
- [ ] 미완료 작업
162+
- [x] 완료된 작업
163+
```
164+
165+
### 2.3 각주
166+
각주는 `[^각주ID]` 형식으로 작성합니다.
167+
```markdown
168+
각주[^1]를 사용할 수 있습니다.
169+
170+
[^1]: 각주의 내용입니다.
171+
```
172+
173+
### 2.4 이모지
174+
이모지는 `:이모지이름:` 형식으로 작성합니다.
175+
```markdown
176+
:smile: :heart: :thumbsup:
177+
```
178+
179+
### 2.5 HTML 태그
180+
마크다운에서 지원하지 않는 기능은 HTML 태그를 사용할 수 있습니다.
181+
```markdown
182+
<kbd>Ctrl</kbd> + <kbd>C</kbd>
183+
<mark>하이라이트</mark>
184+
<sup>위첨자</sup>
185+
<sub>아래첨자</sub>
186+
```
187+
188+
### 2.6 다국어 지원
189+
마크다운은 다국어를 지원합니다. 한글, 영어, 일본어 등 다양한 언어를 사용할 수 있습니다.
190+
```markdown
191+
한글
192+
English
193+
日本語
194+
```
195+
196+
### 2.7 수학식 (LaTeX)
197+
일부 마크다운 에디터에서는 LaTeX 수학식을 지원합니다.
198+
199+
#### 인라인 수학식
200+
인라인 수학식은 `$` 기호로 감싸서 표현합니다.
201+
202+
```markdown
203+
이차방정식 $ax^2 + bx + c = 0$의 해는 다음과 같습니다.
204+
피타고라스의 정리: $a^2 + b^2 = c^2$
205+
오일러의 공식: $e^{i\pi} + 1 = 0$
206+
미분: $\frac{dy}{dx}$
207+
적분: $\int_{a}^{b} f(x) dx$
208+
```
209+
210+
결과:
211+
이차방정식 $ax^2 + bx + c = 0$의 해는 다음과 같습니다.
212+
피타고라스의 정리: $a^2 + b^2 = c^2$
213+
오일러의 공식: $e^{i\pi} + 1 = 0$
214+
미분: $\frac{dy}{dx}$
215+
적분: $\int_{a}^{b} f(x) dx$
216+
217+
#### 블록 수학식
218+
블록 수학식은 `$$` 기호로 감싸서 표현합니다.
219+
220+
```markdown
221+
$$
222+
E = mc^2
223+
$$
224+
225+
$$
226+
\frac{n!}{k!(n-k)!} = \binom{n}{k}
227+
$$
228+
229+
$$
230+
\begin{pmatrix}
231+
a & b \\
232+
c & d
233+
\end{pmatrix}
234+
$$
235+
236+
$$
237+
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
238+
$$
239+
```
240+
241+
결과:
242+
$$
243+
E = mc^2
244+
$$
245+
246+
$$
247+
\frac{n!}{k!(n-k)!} = \binom{n}{k}
248+
$$
249+
250+
$$
251+
\begin{pmatrix}
252+
a & b \\
253+
c & d
254+
\end{pmatrix}
255+
$$
256+
257+
$$
258+
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
259+
$$
260+
261+
## 3. 마크다운 작성 팁
262+
263+
1. **일관성 유지**: 같은 종류의 요소는 일관된 스타일로 작성합니다.
264+
2. **적절한 공백**: 가독성을 위해 적절한 공백을 사용합니다.
265+
3. **의미 있는 제목**: 제목은 문서의 구조를 잘 반영하도록 작성합니다.
266+
4. **링크 설명**: 링크 텍스트는 목적지를 잘 설명하도록 작성합니다.
267+
5. **이미지 대체 텍스트**: 이미지의 대체 텍스트는 이미지의 내용을 잘 설명하도록 작성합니다.
268+
269+
## 4. 마크다운 에디터 추천
270+
271+
1. **Visual Studio Code**: 확장 기능을 통해 강력한 마크다운 편집 기능 제공
272+
2. **Typora**: 실시간 미리보기가 가능한 마크다운 에디터
273+
3. **Obsidian**: 노트 작성에 특화된 마크다운 에디터
274+
4. **Notion**: 웹 기반의 마크다운 지원 문서 작성 도구
275+
276+
## 5. 참고 자료
277+
278+
- [마크다운 공식 문서](https://www.markdownguide.org/)
279+
- [GitHub Flavored Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
280+
- [CommonMark](https://commonmark.org/)

‎hugo.toml‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,22 @@ buildExpired = false
4040

4141
# Utterances Comments
4242
[params.utterances]
43+
enable = true
4344
repo = "archivesdj/arch-comments"
4445
issueTerm = "pathname"
4546
theme = "preferred-color-scheme"
46-
label = "comments"
47-
crossorigin = "anonymous"
48-
async = true
47+
48+
# MathJax 설정
49+
[params.math]
50+
enable = true
51+
use = "mathjax"
52+
mathjax = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
53+
54+
# Mermaid 설정
55+
[params.mermaid]
56+
enable = true
57+
theme = "default"
58+
securityLevel = "loose"
4959

5060
[params.homeInfoParams]
5161
Title = "Welcome to Archives DJ"
@@ -84,10 +94,19 @@ buildExpired = false
8494

8595
ignoreLogs = ['warning-partial-superfluous-prefix']
8696

87-
[module]
88-
[[module.mounts]]
89-
source = "themes/PaperMod/layouts"
90-
target = "layouts"
97+
[markup]
98+
[markup.goldmark]
99+
[markup.goldmark.renderer]
100+
unsafe = true
101+
hardWraps = true
102+
[markup.goldmark.parser]
103+
attribute = true
104+
autoHeadingID = true
105+
autoHeadingIDType = "github"
106+
[markup.highlight]
107+
noClasses = false
108+
codeFences = true
109+
guessSyntax = true
91110

92111
[outputs]
93112
home = ["HTML", "RSS", "JSON"]

‎layouts/partials/comments.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22
{{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
33
{{- if $.Site.Params.comments -}}
44
{{- /* Utterances comments */ -}}
5-
{{- if $.Site.Params.utterances.repo -}}
5+
{{- if $.Site.Params.utterances.enable }}
66
<script src="https://utteranc.es/client.js"
77
repo="{{ .Site.Params.utterances.repo }}"
88
issue-term="{{ .Site.Params.utterances.issueTerm }}"
99
theme="{{ .Site.Params.utterances.theme }}"
10-
label="{{ .Site.Params.utterances.label }}"
11-
crossorigin="{{ .Site.Params.utterances.crossorigin }}"
10+
crossorigin="anonymous"
1211
async>
1312
</script>
1413
{{- end }}
1514
{{- end }}
16-
{{- /* Comments area end */ -}}
15+
{{- /* Comments area end */ -}}

‎layouts/partials/extend_head.html‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,37 @@
1-
{{- /* Head custom content area start */ -}}
2-
{{- /* Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
3-
{{- /* Can be overwritten by partial with the same name in the global layouts. */ -}}
4-
{{- /* Head custom content area end */ -}}
1+
{{ if .Site.Params.math.enable }}
2+
<script>
3+
MathJax = {
4+
tex: {
5+
inlineMath: [['$', '$'], ['\\(', '\\)']],
6+
displayMath: [['$$', '$$'], ['\\[', '\\]']],
7+
processEscapes: true,
8+
processEnvironments: true
9+
},
10+
options: {
11+
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
12+
}
13+
};
14+
</script>
15+
<script src="{{ .Site.Params.math.mathjax }}" id="MathJax-script" async></script>
16+
{{ end }}
17+
18+
{{ if .Site.Params.mermaid.enable }}
19+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.3/dist/mermaid.min.js"></script>
20+
<script>
21+
window.addEventListener('load', function() {
22+
mermaid.initialize({
23+
startOnLoad: true,
24+
theme: '{{ .Site.Params.mermaid.theme }}',
25+
securityLevel: '{{ .Site.Params.mermaid.securityLevel }}',
26+
flowchart: {
27+
useMaxWidth: true,
28+
htmlLabels: true,
29+
curve: 'basis'
30+
}
31+
});
32+
mermaid.run({
33+
querySelector: '.language-mermaid'
34+
});
35+
});
36+
</script>
37+
{{ end }}

0 commit comments

Comments
 (0)