Choi G.J bio photo

Choi G.J

IT System Engineer

kramdown(마크다운) 사용하기

Overview

마크다운은 간단한 자체 표기법을 사용해 텍스트를 작성하고 쉽게 다른 HTML 등으로 생성하게 해주는 방법이다. .md .markdown이라는 확장자를 가지고있는 파일들이 바로 그것이다. 마크다운은 존 그루버와 아론 스워츠가 메일의 글쓰기 형식에서 영감을 받아 만든 python으로 만든 html변환기를 올림으로써 알려지게 되었습니다. 약 10여년도 전에 만들어졌지만 별다른 문법 발전없이 표준화되지 못한 모습이다. 하지만 그 편리성 때문에 많은 블로그나 텍스트편집기 등에서 채택되어 사용되고있지만 표준화되어있지 못해서 PHP Markdown Extra, Multimarkdown, Github Flavored Markdown(GFM) 등으로 파편화가 진행되고 있다.

Github page를 jekyll기반으로 생성하면서 고려할 마크다운은 kramdown이라는 종류다. jekyll자체는 마크다운 플러그인으로 다양한 마크다운 종류를 선택하여 사용 할 수 있지만 Github page에서는 작년 5월부터 kramdown만 지원하는 것으로 하였다. 기존에 사용되던 redcarpet방식은 더이상 지원하지 않음 때문에 블로그 활동을 원활하기 위해 개인적으로 kramdown 문법을 정리해 보기로 하였다.

Kramdown 문법

헤더1 (Headers)

설명

타이틀 헤더 속성을 준다.

  • =======는 H1

  • -------는 H2

붙여주고 한줄을 띄어주는 것이 중요!

Code

이것은 헤더
===============

이것은 서브 헤더
---------------

본문...

View

이것은 헤더

이것은 서브 헤더

본문…

헤더2 (Headers)

설명

H1, H2, H3, H4, H5, H6 문장의 속성을 준다.
#를 갯수에 맞게 붙여주고 한줄을 띄어주는 것이 중요!

Code

# H1 header

## H2 header

### H3 header

#### H4 header

##### H5 header

###### H6 header

View

H1 header

H2 header

H3 header

H4 header

H5 header
H6 header

</div>

강조 (Emphasis)

설명

이텔릭, 진하게 등의 강조구문

Code

이것은 *이텔릭*, **진하게**  
이것도 _이텔릭_, __진하게__

View

이것은 이텔릭, 진하게
이것도 이텔릭, 진하게

설명

<a> 링크를 건다. [ 안에 화면에 보여질 링크명을 (안에 링크 주소를 넣어 사용한다.
링크 주소뒤에 한칸띄고 title 속성도 줄 수 있다.

Code

A [링크](http://kramdown.gettalong.org)

A [링크](http://kramdown.gettalong.org "hp")

A [링크][kramdown hp]
to the homepage.

[kramdown hp]: http://kramdown.gettalong.org "hp"


A link to the [kramdown hp].

[kramdown hp]: http://kramdown.gettalong.org "hp"

View

A 링크

A 링크

A 링크 to the homepage.

A link to the kramdown hp.

이미지(image)

설명

이미지를 첨부함
(github 저장소의 이미지 소스 주소를 연결함)

Code

이미지 : ![test](http://gjchoi.github.io/favicon.png)

View

이미지 : test

각주 (Footnotes)

설명

문장내에서 특정 문자를 escape 시킴
`를 사용하고 싶다면 `code`를 2개 붙여 감싸줌

Code

각주1 선언부분 a footnote[^1].  
각주2 선언부분 a footnote[^2].

[^1]: 각주에 대한 설명 내용 부분 (문서 최하단)

View

각주1 선언부분 a footnote1.
각주2 선언부분 a footnote2.

인라인 코드(Inline Code)

설명

문장내에서 특정 문자를 escape 시킴
`를 사용하고 싶다면 `code`를 2개 붙여 감싸줌

Code

문장내의 `###` 사용을 무시함

문장내의 `` `code` `` 사용을 무시함

View

문장내의 ### 사용을 무시함

문장내의 `code` 사용을 무시함

문단 문법 (Paragraphs)

설명

문단 Paragraphs <p>속성을 주어 구분한다.

  1. 개행을 하더라도 한줄로 같은 <p>에 묶임
  2. 띄어쓰기 2번^[space]^[space] 하던가 \\ 백슬레시 2개를 붙이면 같은 <p>에 묶이지만 개행이되어 보인다.
  3. 한줄 더 개행하면 서로 다른 <p>에 묶임

Code

같은 라인 문단 1,
같은 라인 문단 2

같은 문단 다른라인 1  ^[space]^[space]  
같은 문단 다른라인 2\\
같은 문단 다른라인 3

View

같은 라인 문단 1, 같은 라인 문단 2

같은 문단 다른라인 1
같은 문단 다른라인 2
같은 문단 다른라인 3

앞문단

뒷문단

블락 인용구 (Blockquotes)

설명

<blockquote> 속성을 주어 인용구 부분의 디자인을 적용한다. > 가 연속적으로 붙은 행들끼리는 같은 <blockquote>로 묶이며, > > 연속으로 주어서 sub <blockquote>를 줄수도있다.

Code

> blockquote 첫줄
>
> > 서브 blockquote1
> > 서브 blockquote2
>
> ## blockquote내의 헤더
> 헤더뒤 기본글

View

blockquote 첫줄

서브 blockquote1 서브 blockquote2

blockquote내의 헤더

헤더뒤 기본글

코드 블럭 (Code Blocks)

설명

<pre><code>내용물</code></pre>로 감싸서 kromdown에 사용되는 문자를 escape하여 보여 줄 수 있도록 함

2가지 종류의 코드 블럭을 제공함.

  1. 띄어쓰기 4개나 탭을 이용한 코드블럭
  2. ~~~~~~로 감싸준 블럭

Code

1. 띄어쓰기 방식
    블럭내에 첫째줄
    블럭내의 둘째줄

    블럭내의 넷째줄
    #문자escape
    ~~~~
2. ~~~~~~~~ 감싸주기 방식
~~~~~~~
블럭내에 첫째줄
블럭내의 둘째줄

블럭내의 넷째줄
#문자escape
~~~~
~~~~~~~

View

1. 띄어쓰기 방식
블럭내에 첫째줄
블럭내의 둘째줄

블럭내의 넷째줄
#문자escape
~~~~
2. ~~~~~~~~ 감싸주기 방식
블럭내에 첫째줄
블럭내의 둘째줄

블럭내의 넷째줄
#문자escape
{:.no_toc}

~~~~

프로그램 코드 블럭 (language Code Blocks)

설명

기본적으로 code block과 같지만 프로그램 언어에 특성에 따른 색, line번호 등을 붙여주기 위한 특징을 가지고 있다.

~~~~에 언어명을 기입하여 사용한다.

Code

~~~ ruby
def what?
 42
end
~~~

~~~ java
public static void main(String[] args){
}
~~~

View

def what?
 42
end

public static void main(String[] args){
}

가로선 (Horizontal Rules)

설명

<hr/> 선을 붙여줌 아래 코드에 4가지 방식으로 사용가능

Code

* * *

---

  _  _  _  _

---------------

View

Ordered 리스트 (List)

설명

<ol>,<li>로 감싸주는 1,2,3 순번있는 리스트를 지원함
순번별로 개행에 주의해야 순번이 꼬이지 않는다.

Code

순서 리스트1

1. 리스트 Item 1
2. 리스트 Item 2
2. 2번째인듯한 리스트 Item 3
   ,다음줄인 듯한 3번째 뒷부분

순서 리스트2

1.  리스트 Item 1

    > blockquote와 함께

    # 헤더와 함께
{:.no_toc}    

2.  리스트 Item 2

순서 리스트3

1. 리스트 Item 1
   1. 서브 리스트 Item 1
   2. 서브 리스트 Item 2
   3. 서브 리스트 Item 3
2. 리스트 Item 2

View

순서 리스트1

  1. 리스트 Item 1
  2. 리스트 Item 2
  3. 리스트 Item 3 ,Item 3 뒷부분

순서 리스트2

  1. 리스트 Item 1

    blockquote

    헤더

  2. 리스트 Item 2

순서 리스트3

  1. 리스트 Item 1
    1. 서브 리스트 Item 1
    2. 서브 리스트 Item 2
    3. 서브 리스트 Item 3
  2. 리스트 Item 2

Unordered 리스트 (List)

설명

<ul>,<li>로 감싸주는 순번없는 리스트를 지원함

Code

순서없는 리스트1

* Item1
,Item1의 뒷부분

순서없는 리스트2

* Item 1
+ Item 2
- Item 3

View

순서없는 리스트1

  • Item1 ,Item1의 뒷부분

순서없는 리스트2

  • Item 1
  • Item 2
  • Item 3

정의 리스트 (Definition List)

설명

<dl>,<dt>,<dd>로 감싸주는 순번없는 리스트를 지원함
주로 용어에 대한 정의를 설명할때 사용함

Code

용어1
: 정의1
: 정의2

용어2
용어3(2번 같은 뜻)
: 용어2,3번의 정의

용어4

: 정의 문단 1
: 정의 문단 2

View

용어1
정의1
정의2
용어2
용어3(2번 같은 뜻)
용어2,3번의 정의
용어4

문단으로 나눈 정의 뜻 1

문단으로 나눈 정의 뜻 2

테이블 (Table)

설명

<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>의 table형식으로 만들어 줌

  • | 파이프 라인으로 컬럼을 구분
  • :-------로 헤더와 body를 구분해줌.
  • ---- 테이블 body간을 구분
  • ====로 테이블 foot을 구분

Code

| 헤더1 | 헤더2 | 헤더3 |
|:--------|:-------:|--------:|
| 컬럼1   | 컬럼2   | 컬럼3   |
| 컬럼4   | 컬럼5   | 컬럼6   |
|----
| 컬럼1   | 컬럼2   | 컬럼3   |
| 컬럼4   | 컬럼5   | 컬럼6   |
|=====
| Foot1   | Foot2   | Foot3
{: rules="groups"}

View

헤더1 헤더2 헤더3
컬럼1 컬럼2 컬럼3
컬럼4 컬럼5 컬럼6
컬럼1 컬럼2 컬럼3
컬럼4 컬럼5 컬럼6
Foot1 Foot2 Foot3

HTML요소 사용하기

HTML직접 사용하기

기본적으로 마크다운 문법과 html 문법이 혼용되서 쓰이지 못하도록 되어있다. 아래에 옵션을 사용하면 HTML을 직접 사용가능하다.

kramdown의 문법으로 HTML요소 처리

아래와 같이 markdown문법에 임의에 html attribute, class, id 속성을 줄 수 있다.

> 블럭문구
{: title="Blockquote title"}

> 블럭문구
{: .class1 .class2}

> 블럭문구
{: #custom_id}

아래와 같이 둘러 쌓을 수도 있다.

{:refdef: .c1 #id .c2 title="title"}
둘러쌓아진 문단
다음줄
{: refdef}

주석주기

Table of Content (TOC) 기능

toc기능을 이용하면 본 페이지에 overview로 표시된 것 처럼 자동적으로 페이지의 내용물을 헤더를 navigation해주는 메타 테이블이 자동적으로 생성된다.

{:toc}

를 본문에 넣으면 자동으로 H1~H6의 내용물에 대해서 index 메타 테이블이 생성된다.

만약 제외하고 싶은 내용이 있을 때는 {:no_toc}속성을 주면된다.

### 제외하고 싶은 헤더
{:.no_toc}

추가설명하자면 kramdown은 기본적으로 html요소를 만들때 자동으로 ID를 붙여주는데
이 아이디가 붙은 항목에 대해서만 toc 리스트에 포함시킨다.
옵션사용을 중지하면 자동으로 ID가 붙지 않고 toc 리스트에 포함되지 않은 것이다.

{::options auto_ids="false" /}

Kramdown 온라인 편집기

온라인에서 kramdown으로 마크다운을 작성해보고 확인해 볼 수 있는 싸이트가 있다. CSS가 좀 다르긴하지만 문서작성할 때 요긴하다.

Kramdown 온라인 편집기

  1. 각주1에 대한 설명 내용 부분 (문서 최하단) ↩

  2. 각주2에 대한 설명 내용 부분 (문서 최하단) ↩

kramdown(마크다운) 사용하기 was published on and last modified on .

You might also enjoy (View all posts)