MarkDown 정리

마크다운 문법 정리

Markdown파일을 작성하기 위해 MarkdownGuide 사이트와 GitLab Markdown 사용가이드를 참고하여 주로사용될 문법위주로 정리하였습니다.

Headings

마크다운에서 기본적으로 html태그에서 지원하는 h1~h6의 태그를 #의 갯수 에 따라 h1~h6과 동일한 내용으로 지원해 줍니다.

문법

츨력

# Header 1 : #1개

Header 1 : #1개

## Header 2 : #2개

Header 2 : #2개

### Header 3 : #3개

Header 3 : #3개

#### Header 4 : #4개

Header 4 : #4개

##### Header 5 : #5개

Header 5 : #5개

###### Header 6 : #6개

Header 6 : #6개

아직 마크다운의 문법에 표준이 정확하지 않습니다. 통일해서 작성을 하는게 좋을 것 같아서 순서가없는 목록은 - 로 통일해서 작성하고, 순서가 있는 목록은 작성하실 때 순차적인 시퀀스로 작성합니다. 예를들면 1. 내용1 2. 내용2 3. 내용3 으로 작성합니다.

순서가 없는 목록
문법
츨력
- 대쉬 - 대쉬2
대쉬
대쉬2
별표 별표2
별표
뱔표2
+ 혼합 * 혼합2 - 혼합3
혼합
혼합2
혼합3

순서가 있는 목록

문법

츨력

1. 내용1 2. 내용2

내용1

내용2

1. 내용1 1. 내용2

내용1

내용2

1. 내용1 5. 내용2 2. 내용3

내용1

내용2

내용3

1. 내용1 2. 내용2 1. 내용2-1 2. 내용2-2 3. 내용3

내용1

내용2

내용2-1
내용2-2

내용3

TODO

일반적으로 알고 계시는 TODO 관련 문법입니다. 체크와 미체크로 나뉘어지며 [x]는 체크를 의미하고, [ ]는 미체크를 의미합니다.

문법

츨력

- [x] 아침 먹기 - [ ] 점심 먹기 - [ ] 저녁 먹기

아침 먹기 점심 먹기 저녁 먹기

Note: [ ]는 => []안에 스페이스(공간) 한개가 있어야 합니다.

굵기

Bold __와 **를 글씨에 앞 뒤 넣어서 글에서 강조를 하기위해 사용 합니다. 대부분 플러그인에서는 **를 주로 사용하므로 **를 사용합니다.

문법

출력

**안녕하세요**

안녕하세요

__안녕하세요__

안녕하세요

안**녕하**세요

안녕하세요

이탤릭체

이탤릭체 _와 *를 글씨에 앞 뒤 넣어서 글에서 기울임을 표시 하기위해 사용 합니다.

문법

출력

*안녕하세요*

안녕하세요

_안녕하세요_

안녕하세요

안_**녕하**_세요

안녕하세요

밑줄 및 취소선

취소선은 ~~를 앞뒤로 앞뒤로 붙여서 사용 합니다. 밑줄은 md 기본문법에서 지원하지 않고 있습니다. 따라서 GitLab에서 보이진 않지만 차후 출력을 위해 HTML or PDF로 변환시 적용하기 위해 태그를 사용하여 나타낼 수 있습니다.

문법

출력

~~취소선입니다~~

~~취소선입니다~~

밑줄입니다

밑줄입니다

링크

HTML의 a태그 와 동일한 기능을 하며, 간편하게 사용할 수 있습니다. [제목](경로) 로 작성을 합니다.

사용법

[구글](https://www.google.com)
[네이버](https://www.naver.com)
<http://www.naver.com>
<abc@naver.com>
[헤드링크](#헤더내용)

출력결과
구글
네이버
http://www.naver.com
abc@naver.com
헤더링크

각주

각주는 플러그인을 통해 MarkDown 파일을 HTML 이나 PDF로 변환할 때 적용되지 않고 있습니다. GitLab에서는 적용되고 있고, MarkDown 기본문법에 해당하므로 적절히 사용하면 될 것 같습니다.

사용법

* 사용법
이미지[^1] 내용확인
네이버주소[^2] 내용확인

* 각주 정의
[^1]: 이미지란 그림이다     
[^2]: 네이버주소는 다음 주소 입니다 http://www.naver.com

출력결과
이미지 내용확인 네이버주소 내용확인

이미지

HTML의 img태그와 동일하며, 이미지를 삽입할 수 있고, 이미지에 링크를 설정할 수 있습니다.

사용법

이미지 : ![제목](상대경로, 절대경로)
  ->![GitLab](https://about.gitlab.com/images/nav/gitlab-logo-color.svg) 
이미지 링크 : `[![제목](이미지링크)](이동할링크)` 
  -> [![GitLab](https://about.gitlab.com/images/nav/gitlab-logo-color.svg)](https://about.gitlab.com/)

출력결과
이미지 :
이미지링크 :

인용

글에서 인용구문을 통해 인용문을 보여줄 수 있습니다.

사용법

> 인용
>> 중첩인용  
>> 안녕하세요  
>> 봉쥬르
>>> 반갑습니다  
>>> 반가워요~

출력결과
인용
중첩인용 안녕하세요 봉쥬르
반갑습니다 반가워요~

테이블(표)

셀 구분 : - (dash)를 3개 이상 나열
: 기호로 정렬 가능
 을 사용하면 개행을 할 수 있습니다.

사용법

| 왼쪽정렬         | 가운데정렬         | 오른쪽정렬 |
|:---------------|:---------------:|-------:|
| column 3 is   | right-aligned | $100  |
| column 2 is   | centered<br/>Hi      | $10   |
| zebra stripes | are neat      | $1    |

출력결과
왼쪽정렬
가운데정렬
오른쪽정렬
column 3 is
right-aligned
$100
column 2 is
centered Hi
$10
zebra stripes
are neat
$1

그외 기능

태그는 css파일(mark.css)에 빨간글씨가 출력되게 미리 정의를 해놨습니다. 즉 css에 의해 적용되는 부분이어서 GitLab에서는 볼드체(굵음) 로 표시됩니다. 즉 HTML or PDF로 출력시에 적용되어 나타나게 됩니다. 또한 태그에 스타일을 직접 적용하면 파일변환 및 yona에는 적용되지만 GitLab 웹상에서 적용이 되지 않습니다.

기능

사용법

개행

빈칸2개

선긋기

---3개이상

왼쪽꺽쇠

<<

오른쪽꺽쇠

>>

빨간글씨

빨간글씨

직접적용

직접적용

Caution: b태그는 css를 통해 빨간글씨가 나오도록 되어있습니다. 따라서 기본 md문법에서는 적용이 안되며, 차후 HTML이나 PDF로 변환시 적용됩니다.

이스케이프

백 슬래시(\)를 사용하여 다음 문자를 이스케이프 할 수 있습니다.

캐릭터

이름

백 슬래시

백틱

별표

밑줄

{}

중괄호

[]

괄호

()

괄호

샾

더하기 부호

마이너스 기호 (하이픈)

점

느낌표

코드블럭

코드블럭은 ``` 로 감싸서 다양한 환경의 스타일을 제공 해줍니다. ```java ``` 으로 설정하면 적절한 스타일을 만들어 줍니다.

사용법

```
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
```

출력결과

  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.
  텍스트 로 내용을 작성합니다.

Java

  ```java
  import java.util.*;
  public class TestClass{
      private String name;
      public final static UTF-8 = "UTF-8";
      public void testMethod(){
          System.out.println("코드블럭 백틱3개씩");
      }
  }
  ```

Java 렌더링 출력결과

import java.util.*;
public class TestClass{
  private String name;
  public final static UTF-8 = "UTF-8";
  public void testMethod(){
      System.out.println("코드블럭 백틱3개씩");
  }
}

JavaScript

  ```javascript
  let a = fucntion (){
      console.log("코드블럭");
  }

  function syntaxHighlighting() {
    let n = 33;
    const s = "hello, 안녕하세요~!!!";
    console.log(s);
  }
  ```

JavaScript 렌더링

let a = fucntion (){
  console.log("코드블럭");
}

function syntaxHighlighting() { 
  let n = 33; 
  const s = "hello, 안녕하세요~!!!"; 
  console.log(s); 
}

html

<a href="https://www.google.co.kr/" target="">GOOGLE</a>

css

.list > ul {
position: absolute;
top: 30px;
size : 50%;
}

bash
```
$ vim ./~zshrc
```
python
```
s = "Python"
print(s)
```

#include <stdio.h>
int main(void)
  printf(%s,"C언어");
  return 0;
}

json

{
"firstName": "John",
"lastName": "Smith",
"age": 25
}

mermaid
```
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```

gantt
  dateFormat  YYYY-MM-DD
  title Adding GANTT diagram functionality to mermaid
  section A section
  Completed task            :done,    des1, 2014-01-06,2014-01-08
  Active task               :active,  des2, 2014-01-09, 3d
  Future task               :         des3, after des2, 5d
  Future task2               :         des4, after des3, 5d
  section Critical tasks
  Completed task in the critical line :crit, done, 2014-01-06,24h
  Implement parser and jison          :crit, done, after des1, 2d
  Create tests for parser             :crit, active, 3d
  Future task in critical line        :crit, 5d
  Create tests for renderer           :2d
  Add to mermaid                      :1d

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

mermaid참고

md에서는 지원되는 내용이라 참고사항으로 링크를 걸었습니다.
HTML이나 PDF로 변환시에는 지원되지 않습니다.

Previous객체지향 NextFirst Agile

Last updated 4 years ago