Markdown 문법 및 Kramdown

Markdown 문법

Markdown Processors

마크다운 프로세서는 우리가 *.md file에 적어주는 Markdown Syntax를 html syntax로 변환해 주는 놈이다.
기본적인 기능은 비슷하나 Markdown Processor에 따라서 지원하는 기능이 조금씩 다른데 이 프로세서가 수십가지나 된다.

마크다운 프로세서의 종류: https://github.com/markdown/markdown.github.com/wiki/Implementations

여기에선 일반적으로 통용되는 마크다운 문법과 kramdown processor에 대해서 정리하고 알아보려한다.

Markdown Cheat-sheet

Element	Markdown Syntax	Remarks
Heading	# H1 ## H2 ### H3 #### H4
Bold	`텍스트 볼드체`
Italic	`이탤릭체`
Blockquote	> 인용구
Ordered List	1. First list 2. Second list 3. Third list
Unordered List	- First list - Second list - Third list
Inline Code	`Inline Code Block`
Fenced Code Block	```python print('hello world') ```	```옆에 스타일링하려는 언어 명시
Horizontal Rule	`---`
Link	`[title](https://www.link.com)`
Image	`![alt text](image path)`
Table	`\| Name \| Description \|` `\| --- \| --- \|` `\| Name1 \| Description1 \|` `\| Name2 \| Description2 \|`	`---` 대쉬는 3개 이상이면 된다. `:---` 좌측정렬 `---:` 우측정렬 `:---:` 가운데정렬 테이블내 줄바꿈은 `<br>`태그사용
Foot Note	`본문 내용...[^1]` … `[^1]: This is footnote`
Heading ID	## Heading {#custon-id}
Definition List	term : definition	일부 Markdown Processor에서만 지원
Strike Throught	`~취소선~`
Task List	`- [x] To Do 1` `- [x] To Do 2` `- [ ] To Do 3`
Emoji	Enjoy~ :joy:	일부 Markdown Processor에서만 지원 그냥 `window key + .`로 이모지를 넣는 것이 편함.
Highlight	==Highlight text==	preview: text 일부 Markdown Processor에서만 지원
Subscript	H~2~O	일부 Markdown Processor에서만 지원
Superscript	X^2^	일부 Markdown Processor에서만 지원

Markdown문법에 대한 상세한 설명은 다음의 링크 참조: https://www.markdownguide.org/
Markdown문법을 시연해 보려면 다음의 링크 참조: https://markdown-it.github.io/

Kramdown 문법

Chirpy Theme에서 사용하는 Kramdown

본 블로그에서 사용하고 있는 테마인 Chirpy Theme는 Markdown Processor로 Kramdown을 사용한다.
Kramdown은 기본 마크다운 문법에서 더 다양한 기능을 제공하는데 이 기능들이 매우 편리하다.
한번 알아보도록 하자.

HTML ID, Class, 속성 부여 가능

Class Syntax

Class를 부여하는 방법은 {: }의 :뒤에 .custom_class를 적어주면 된다. 아래의 예시를 보자.

This is paragraph
{:.orange}

        
      
.orange {
  color: orange;
}

결과

This is paragraph

ID Syntax

ID를 부여하는 방법은 {: }의 :뒤에 .custom_ID를 적어주면 된다.

This is paragraph
{:#id-red}

        
      
#id-red {
  color: red;
}

결과

This is paragraph

속성부여

아래는 이 블로그의 avatar 이미지인데 일반 마크다운 문법으로 속성부여 없이 삽입한 예이다.
test

이번에는 Kramdown을 이용해 Image 삽입 마크다운 문법에 속성을 부여해서 Max-width를 30%로 하는 예를 보겠다.

        
      
![test-img](/assets/img/favicons/moon_circle.png){: style="max-width: 30%"}

결과

test-img

Table of Content 삽입기능

TOC Syntax

아래와 같이 간단히 몇 글자만 삽입하면 Table of contents를 얻을 수 있다.

- TOC
{:toc}

결과

Markdown 문법
- Markdown Processors
- Markdown Cheat-sheet
Kramdown 문법

여기까지 일반적인 Markdown 문법부터 Kramdown 문법까지 핵심을 정리해 보았다.
더 상세한 내용이 궁금하신 분은 본문의 링크를 타고 들어가면 좋을 것이다.

Kramdown Syntex Tips and Tricks: https://about.gitlab.com/blog/2016/07/19/markdown-kramdown-tips-and-tricks/#
Kramdown Whole Syntax: https://kramdown.gettalong.org/syntax.html