제가 기억을 못 할 것 같아서 쓰는 페이지입니다. 이 블로그에서 사용하는 kramdown 문법 기준으로 작성되어 있으니 참고할 때 주의해주세요!

최종 출력은 왼쪽에, 마크다운 코드는 오른쪽에 배치되어 있습니다.

목차 (kramdown 확장)

목차를 생성하려면 리스트를 만든 뒤 다음 줄에 인라인 속성 {:toc}을 추가해야 합니다. 제물로 바쳐지는 리스트와 그 내용은 사라지며, 내용을 비워 두려면 최소한 공백 하나는 남겨 둬야 합니다.

이 블로그에서는 목차 문법과는 별도로 글 옆에 상주하는 목차 기능을 구현했기 때문에 이 문법은 사용하지 않을 예정입니다. 현재 테마에서는 <ul>과 <ol>을 써서 나오는 출력도 완전히 같으며, (어차피 안 쓸 문법이니) 차이를 두지 않을 생각입니다.

목차 (kramdown 확장)
기본 요소
- 헤더
  - Setext 스타일
Setext 스타일 H1
구조적 요소
인라인 마크업
기타 문법
커스텀 확장 문법

* 
{:toc}

기본 요소

헤더

Setext 스타일

H1 및 H2만 지원합니다. = 혹은 -의 개수는 상관 없으며, 가로선 문법보다 우선합니다.

Setext 스타일 H1

Setext 스타일 H1
================

Setext 스타일 H2

Setext 스타일 H2
----------------

atx 스타일

H1부터 H6까지를 모두 지원합니다. 맨 끝에 원하는 만큼 # 문자를 더 넣을 수 있습니다. 목차를 더 망가뜨리기 싫어서 H3까지는 생략했습니다.

H4

#### H4

H5

##### H5

H6

###### H6 ##################

커스텀 ID (kramdown 확장)

마크다운 엔진에서 임의로 부여하는 ID를 변경할 수 있습니다.

Another H4

#### Another H4 {#with_custom_id}

줄바꿈

kramdown 소스에서 줄바꿈을 한 번 하면 줄바꿈으로 인식되지 않으며, 원래 줄에 텍스트가 계속 이어집니다. 이 경우에는 다음 줄부터 원하는 만큼 들여쓰기를 할 수 있습니다. 강제 줄바꿈을 하려면 줄의 맨 끝에 공백 2자 이상이나 역슬래시 2개를 넣어야 합니다.

다람쥐 헌 쳇바퀴에 타고파.
다음 줄

다람쥐 헌
	쳇바퀴에 타고파. \\
		다음 줄

문장 부호 변환

일부 문자열을 인식해 적절한 문장 부호로 변환합니다. 원래는 ...가 줄임표로, '와 "가 짝을 이루는 따옴표 문자로 변환되지만 설정에서 꺼 두었습니다.

Em — dash

En – dash

«Guillemet»

Em --- dash

En -- dash

<<Guillemet>>

글자 효과

밑줄은 마크다운/kramdown 문법상에서 지원되지 않으며, 인라인 HTML(<u>...</u>)을 사용해야 합니다. 취소선은 환경에 따라 잘 인식되지 않는 경우가 있습니다.

굵게, 기울임체, 굵은 기울임체, 한단어일부분만강조하기

**굵게**, *기울임체*, ***굵은 기울임체***, 한단어*일부분*만강조하기

굵게, 기울임체, 굵은 기울임체, 한단어_일부분_만강조가안되네

__굵게__, _기울임체_, ___굵은 기울임체___, 한단어_일부분_만강조가안되네

별 1개/2개가 * 별도의 단어 * 로 있으면 ** 강조 효과로 취급되지 않습니다 ** .

별 1개/2개가 * 별도의 단어 * 로 있으면 ** 강조 효과로 취급되지 않습니다 ** .

~~취소선~~

~~취소선~~

구조적 요소

리스트

순서 없는 리스트는 *, +, - 중 아무거나 써도 됩니다. 이 블로그에서는 *을 선호합니다.

순서 없는
리스트
- 속 리스트
  - 속 리스트

* 순서 없는
* 리스트
	- 속 리스트
		* 속 리스트

순서 있는
리스트
1. 번호는
  1. 무조건 1번부터

순서 있는
리스트
번호는
무조건 1번부터

리스트 내부에 다른 요소가 올 수 있습니다.

* 문자 바로 뒤에 최소한 공백 문자를 삽입해야 리스트 안에 있는 요소로 인식합니다.
```
  뭐야 왜 2칸 들여쓰기가 돼있어
```

* 리스트 내부에 다른 요소가 올 수 있습니다.

	`*` 문자 바로 뒤에 최소한 공백 문자를 삽입해야 리스트 안에 있는 요소로 인식합니다.

		뭐야 왜 2칸 들여쓰기가 돼있어

설명 목록 (kramdown 확장)

아무 단어: 콜론과 본문은 한 칸 띄어써야 합니다.
다른 단어: 다람쥐 헌 쳇바퀴에 타고파.; 설명을 여러 개 작성할 수 있습니다.

아무 단어
: 콜론과 본문은 한 칸 띄어써야 합니다.

다른 단어
: 다람쥐 헌 쳇바퀴에 타고파.
: 설명을 여러 개 작성할 수 있습니다.

인용문

1단계 인용문

2단계 인용문

> 1단계 인용문
> > 2단계 인용문

코드 블록

들여쓰기 코드 블록

	들여쓰기 코드 블록

Fenced 코드 블록

```
Fenced 코드 블록
```

Fenced 코드 블록은 ~ 혹은 `로 구분합니다. 어느 것을 써도 기능 차이는 없으나 이 블로그에서는 `을 선호합니다.

Fenced 코드 블록

~~~
Fenced 코드 블록
~~~

코드 블록 내부에 ```과 같이 연속된 백틱을 삽입하려면 둘러싸는 백틱의 수를 늘리거나 물결표를 대신 사용하면 됩니다. 이는 아래의 인라인 코드에도 동일하게 적용됩니다. 탈출 시퀀스(\`)는 사용할 수 없습니다.

백틱 더많이
```
```

````
백틱 더많이
```
```
````

문법 하이라이팅

console.log('Code block with syntax highlighting!');
console.info('코드 테마는 무난하게 Monokai를 썼습니다.');

```javascript
console.log('Code block with syntax highlighting!');
console.info('코드 테마는 무난하게 Monokai를 썼습니다.');
```

문법 하이라이팅에는 Rouge를 사용합니다. 인식된 언어에 따라 코드 블록 위에 언어 이름이 표시되며, 현재 이 테마에서 지원하는 목록은 다음과 같습니다. 새로운 언어가 필요할 때마다 수시로 업데이트합니다.

Plain Text (언어 없음)
C (c)
C++ (cpp)
GML Code (javascript + {:.gml})
- (특히 GMS 2.3 이후의 경우에는) JavaScript와 문법이 유사하기 때문에 하이라이팅 엔진을 훔쳐서 사용하고 있습니다. 일부 문법이 올바르게 인식되지 않을 수 있습니다.
- 기존에는 텍스트 기반 코드만을 GML로 지칭하고 액션 기반 코드에 DnD라는 별개의 이름을 사용했지만, 게임메이커 2022.3 업데이트부터 두 방식을 모두 GML로 지칭합니다. GML Code는 기존에 GML로 지칭하던 텍스트 코드를 가리킵니다.
Haskell (haskell)
JavaScript (javascript)
Liquid (liquid)
Lisp (lisp)
Markdown (markdown)
- kramdown 문법은 올바르게 인식되지 않습니다.
Pseudocode (언어 없음 + {:.pseudocode})
- 의사코드이기 때문에 하이라이팅을 지원하지 않습니다.
Python (python)
Rust (rust)
SCSS (scss)
TypeScript (typescript)

줄 번호가 있는 코드 블록 (Liquid 확장)

1
2
3
String.raw`왼쪽에 줄 번호가 있다!
언어 이름을 반드시 명시해야 합니다.
kramdown 코드 블록이랑 Liquid 코드 블록이랑 구조가 너무 달라서 CSS 짜는데 고생했어요 으`

{% highlight javascript linenos %}
String.raw`왼쪽에 줄 번호가 있다!
언어 이름을 반드시 명시해야 합니다.
kramdown 코드 블록이랑 Liquid 코드 블록이랑 구조가 너무 달라서 CSS 짜는데 고생했어요 으`
{% endhighlight %}

테이블

테이블은 단독으로 한 문단을 이루어야 합니다¹.

This	is	THEAD
This	is	TBODY
This	is also	TBODY
This	is	TFOOT

| This | is      | THEAD |
| ---- | --      | ----- |
| This | is      | TBODY |
| This | is also | TBODY |
| ==== | ==      | ===== |
| This | is      | TFOOT |

THEAD랑 TFOOT은 꼭 안 넣어도 돼요!

| THEAD랑 TFOOT은 꼭 안 넣어도 돼요! |

왼쪽	가운데	오른쪽
왼쪽	가운데	오른쪽
왼쪽	가운데	오른쪽

| 왼쪽 | 가운데 | 오른쪽 |
| -: | :--: | :- |
| 왼쪽 | 가운데 | 오른쪽 |
| =: | :==: | := |
| 왼쪽 | 가운데 | 오른쪽 |

가로선

한 줄에 별표(*), 대시(-), 밑줄(_) 중 하나만이 3개 이상 있으면 가로선으로 취급됩니다. 최대 개수 제한은 없으며, 각 문자 사이에 임의의 개수의 띄어쓰기를 추가할 수 있습니다. 첫 문자 앞에는 띄어쓰기 3개까지만 허용되며, 그렇지 않을 경우 코드 블록으로 취급됩니다.

***

*****

* * *

-  -  -

   -      -  -

___

수식 (kramdown + MathJax 확장)

수식이 단독으로 한 문단을 이루면¹ 블록 수식, 그렇지 않으면 인라인 수식이 됩니다.

인라인 수식

인라인 수식: $\sum_{i=0}^n i^2 = \frac{n(n+1)(2n+1)}{6}$

인라인 수식: $$\sum_{i=0}^n i^2 = \frac{n(n+1)(2n+1)}{6}$$

강제 인라인 수식:

$\sum_{i=0}^n i^2 = \frac{n(n+1)(2n+1)}{6}$

강제 인라인 수식:

\$$\sum_{i=0}^n i^2 = \frac{n(n+1)(2n+1)}{6}$$

kramdown 문서에는 \$\$...$$ 문법을 사용하면 수식으로 변환되지 않는다고 명시되어 있지만, 이 블로그에서는 작동하지 않습니다.

블록 수식

\[\sum_{i=0}^n i^2 = \frac{n(n+1)(2n+1)}{6}\]

$$\sum_{i=0}^n i^2 = \frac{n(n+1)(2n+1)}{6}$$

HTML 태그

HTML 태그를 직접 입력할 수 있습니다. 들여쓰기는 코드 블록 문법과 충돌하므로 추가할 수 없습니다.

<button>버튼</button>

태그 안에서도 마크다운 문법을 사용할 수 있도록 설정되어 있습니다.

<span style="background-color: rgba(171, 148, 252, 0.25);">태그 안에서도 *마크다운 문법*을 사용할 수 있도록 설정되어 있습니다.</span>

markdown="0" 속성을 추가해 마크다운 문법을 *강제로 해제*할 수 있습니다.

<span style="background-color: rgba(171, 148, 252, 0.25);" markdown="0">markdown="0" 속성을 추가해 마크다운 문법을 *강제로 해제*할 수 있습니다.</span>

인라인 마크업

링크

링크 텍스트

[링크 텍스트](https://eatch.dev "툴팁")

별도 정의를 사용하는 링크 or reference-link

[별도 정의를 사용하는 링크][reference-link] or [reference-link]

[reference-link]: https://eatch.dev/ "여기도 툴팁을 넣을 수 있습니다."

<...> 안에 scheme이 포함된 주소나 이메일 주소를 입력하면 오토링크가 걸립니다. <...> 없이 주소만 입력하면 변환되지 않습니다.

https://eatch.dev/ example@example.com

cf. https://eatch.dev/ example@example.com

<https://eatch.dev/> <example@example.com>

cf. https://eatch.dev/ example@example.com

이미지

알트텍스트

![알트텍스트](https://eatch.dev/ei/-0-f "툴팁")

!이건 이미지가 아니라 느낌표랑 링크로 취급합니다.

\![이건 이미지가 아니라 느낌표랑 링크로 취급합니다.](https://eatch.dev/ei/-0-f)

인라인 코드

마크다운 인라인 코드

`마크다운` `인라인 코드`

haha `backticks` go brrrr

백틱만 있는 인라인 코드: `

``haha `backticks` go brrrr``

백틱만 있는 인라인 코드: `` ` ``

백틱 하나가 ` 별도의 단어 ` 로 있으면 인라인 코드로 취급되지 않습니다.

백틱 하나가 ` 별도의 단어 ` 로 있으면 인라인 코드로 취급되지 않습니다.

const x = "문법 하이라이팅이 되는 인라인 코드";

`const x = "문법 하이라이팅이 되는 인라인 코드";`{:.language-javascript}

문법 하이라이팅에 사용한 문법에 대한 자세한 설명은 인라인 속성 목록에서 확인할 수 있습니다.

체크박스

체크 안 된 체크박스
체크된 체크박스

* [ ] 체크 안 된 체크박스
* [x] 체크된 체크박스

각주

각주 아이디는 클릭 시 URL로 노출됩니다.

각주 문법 데모²입니다. 각주 내용은 글의 맨 아래에 있습니다.

각주 문법 데모[^fn1]입니다. 각주 내용은 글의 맨 아래에 있습니다.

[^fn1]: 각주 내용입니다. **마크다운 문법**도 쓸 수 있습니다.

똑같은 주석을 여러 번 쓸 수 있습니다. ³ & ³

똑같은 주석을 여러 번 쓸 수 있습니다. [^fnrepeat] & [^fnrepeat]

[^fnrepeat]:
	> 각주 안에 인용문이 있다?!

축약어 정의 (kramdown 확장)

잇넘귀 잇넘귀 신나는 노래

잇넘귀 잇넘귀 신나는 노래

*[잇넘귀]: 잇창명 너무 귀엽다

기타 문법

블록 종료 표지 (kramdown 확장)

^ 문자를 이용해 블록 단위 문법을 분리할 수 있습니다.

리스트 1

리스트 2

1. 리스트 1
^
1. 리스트 2

코드 블록 1

코드 블록 2

	코드 블록 1
^
	코드 블록 2

속성 목록 정의 (kramdown 확장)

아래와 같은 문법을 사용해 특정한 문자열에 id, 클래스, HTML 속성을 대응시킬 수 있습니다. 이렇게 정의한 속성 목록은 아래의 인라인 속성 목록에 사용할 수 있습니다.

{:attr-list-def: #EatChangmyeong .custom-class style="text-decoration: underline;"}

인라인 속성 목록 (kramdown 확장)

위에서 정의한 속성 목록을 참조하거나 직접 id, 클래스, HTML 속성을 작성해 바로 앞의 HTML 요소에 임의의 속성을 추가할 수 있습니다.

<li>에 attr-list-def가 적용된 상태
직접 작성한 속성이 우선권을 갖습니다.

* {:attr-list-def}`<li>`에 `attr-list-def`가 적용된 상태
* {:attr-list-def #Eatch}직접 작성한 속성이 우선권을 갖습니다.

기타 kramdown 확장 문법

위에서 설명한 kramdown 속성 목록 정의와 비슷한 문법으로 일부 확장 문법을 사용할 수 있습니다.

kramdown 주석 문법은 컴파일된 페이지에 노출되지 않습니다.
- HTML 주석을 사용할 수도 있습니다.
**마크다운 문법**을 적용하지 *않습니다*.

* {::comment}이 부분은 주석이라서 보이지 않습니다.{:/} kramdown 주석 문법은 컴파일된 페이지에 노출되지 않습니다.
	* HTML 주석을 사용할 수도 있습니다. <!-- HTML 주석은 컴파일된 페이지에 노출됩니다. -->
* {::nomarkdown}**마크다운 문법**을 적용하지 *않습니다*.{:/}

{::options key="value"}로 kramdown 파서 설정을 글 단위로 변경할 수 있습니다. 안 써봐서 실제로 되는지는 모르겠습니다.

커스텀 확장 문법

커스텀 확장 문법은 이 블로그에서만 동작합니다.

가로 스크롤

가로로 넘칠 수 있는 커다란 요소를 <div class="scroll"> 안에 넣어서 스크롤바 안에 가둘 수 있습니다. 화면 위아래에 고정되는 테이블 헤더/푸터는 기술적 한계로 인해 지원하지 않습니다.

가로로긴테이블

<div class="scroll">

| 가로로긴테이블 | 가로로긴테이블 | 가로로긴테이블 | 가로로긴테이블 | 가로로긴테이블 |

</div>

좌우 분리

왼쪽 내용과 오른쪽 내용이 별개의 단에 표시됩니다.

다람쥐 헌 쳇바퀴에 타고파

<div class="split">
<div class="split-column">
왼쪽 내용과 오른쪽 내용이 별개의 단에 표시됩니다.
</div>
<div class="split-column">
* 다람쥐 헌 쳇바퀴에 타고파
</div>
</div>

트위터 트윗 인용

https://publish.twitter.com/에 원하는 트윗 주소를 붙여넣고 Opt-out of tailoring Twitter를 켜서(선택) 나오는 HTML 코드를 붙여넣습니다. kramdown 오류인지는 몰라도 </blockquote>부터는 다음 줄에 작성해야 올바르게 파싱됩니다.

just setting up my twttr

— jack (@jack) March 21, 2006

<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">just setting up my twttr</p>&mdash; jack (@jack) <a href="https://twitter.com/jack/status/20?ref_src=twsrc%5Etfw">March 21, 2006</a>
</blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

스크립트 삽입

스크립트를 이용해 글 중간에 인터랙티브 콘텐츠를 넣을 수 있도록 설정해 두었습니다. 필요한 설정은 다음과 같습니다.

프론트 매터에 script: [스크립트 경로] 추가
인터랙티브 콘텐츠를 넣을 곳에 <div data-script='[JSON 포맷의 콘텐츠 매개변수]'> 추가
- JSON 명세에서 작은따옴표를 허용하지 않으므로 data-script 속성을 작은따옴표로 둘러싸는 것을 권장합니다.
불러올 스크립트에서 substitute(fn); 호출
- fn은 <div> 요소와 JSON 매개변수를 인자로 받고 요소 안쪽에 인터랙티브 콘텐츠를 생성하는 함수입니다.

스타일시트 삽입

인터랙티브 콘텐츠의 스타일링을 쉽게 할 수 있도록 스타일시트도 삽입할 수 있도록 설정해 두었습니다. 필요한 설정은 다음과 같습니다.

프론트 매터에 style: [스타일시트 경로] 추가
- Jekyll 기반의 블로그이므로 Sass를 사용할 수 있습니다. 스타일시트의 가장 위에 프론트 매터를 넣고 @import는 경로를 신경쓰지 않고 하면 됩니다.
```
  ---
  ---

  @charset "UTF-8";
  @import "defs";

  // ...
```

어떤 콘텐츠의 바로 아래에 빈 줄이 있으면 그 아래의 콘텐츠와 분리되어 "한 문단"이 됩니다. ↩ ↩²
각주 내용입니다. 마크다운 문법도 쓸 수 있습니다. ↩
각주 안에 인용문이 있다?!

↩ ↩²