Post
목차
마크다운에 대해 알아보기 Cover Image

Markup

Markdown

마크다운에 대해 알아보기

2022. 3. 28.

2022. 4. 6.

마크다운

2004년 John Gruber(Aaron Swartz가 도움)가 개발했으며 일반 텍스트 문서를 XHTML(또는 HTML)로 변환하기 위한 구문 설명 및 Perl 스크립트(Markdown.pl)로 2004년에 출시하였습니다. (개발 당시 일반 텍스트 형식의 이메일에서 가장 큰 영감을 얻었다고 합니다.)

이 후, 일부는 구문을 확장한 형태로, 일부는 HTML 이외의 문서로 변환되는 등 다양한 언어로 확장 개발되었습니다.

웹사이트에서 HTML의 문서 작성을 대체하는 것으로 시작하였으나, 현재는 전세계 수백만명의 사람들이 문서를 작성할 때 사용하고 있습니다.

마크다운의 확장자는 .md 또는 .markdown 두가지를 사용할 수 있지만, .md가 압도적으로 많이 쓰이고 있습니다.

공식 사이트: https://daringfireball.net/projects/markdown

TL; DR

Markdown 1Markdown 2View
# Heading 1Heading 1
------------

Heading 1

## Heading 2Heading 2
========

Heading 2

### Heading 3

Heading 3

#### Heading 4

Heading 4

##### Heading 5
Heading 5
###### Heading 6
Heading 6
> Blockquote
>> Blockqute Depth 2.
Blockquote
Blockquote Depth 2.
- List
- List
- List		* List
* List
* List
  • List
  • List
  • List
1. One
2. Two
3. Three		1) One
2) Two
3) Three
  1. One
  2. Two
  3. Three
`Inline Code`Inline Code
```
# code block
print '3 backticks or'
print 'indent 4 spaces'
```
# code block
print '3 backticks or'
print 'indent 4 spaces'
---***
[Moroo Blog](https://blog.moroo.dev)[Moroo Blog][blog]
⋮
[blog]: https://blog.moroo.dev		Moroo Blog
-Italic-*Italic*Italic
__Bold__**Bold**Bold
![Moroo Logo](/assets/moroo.svg)[Moroo Logo][logo]
⋮
[logo]: /assets/moroo.svg		Moroo Logo

마크다운 철학

마크다운의 철학은 가능한 한 읽기 쉽고 쓰기 쉽게, 그러나 가독성 있게 입니다.

마크다운으로 작성한 문서는 그 자체가 일반 텍스트 문서로써 그대로 게시(출판)할 수 있어야 한다는 개념으로 마크다운을 다른 경량 마크업들과 구별되는 것이 바로 이 철학에서 나오는 가독성입니다.

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

(Markdown의 구문에 대한 최우선 설계 목표는 가능한 한 읽기 쉽게 만드는 것입니다. 마크다운 형식의 문서는 태그나 지정된 서식들이 보이지 않고 문서 자체가 일반 텍스트처럼 보여서 수정없이 있는 그대로 게시할 수 있어야 한다는 개념입니다.)

https://daringfireball.net/projects/markdown/ 발췌...

예를 들어, *단어*처럼 단어 주위의 별표시는 그 자체가 단어를 강조한 것처럼 보입니다. 그리고 그것을 변환하면 Bold 처리가 됩니다.

아래는 AsciiDoc의 샘플 내용으로 AsciiDoc으로 작성한 문서와 마크다운으로 작성한 문서를 비교한 것입니다.

AsciiDoc

1. List item one.
+
List item one continued with a second paragraph followed by an
Indented block.
+
.................
$ ls *.sh
$ mv *.sh ~/tmp
.................
+
List item continued with a third paragraph.


2. List item two continued with an open block.
+
--
This paragraph is part of the preceding list item.


a. This list is nested and does not require explicit item
continuation.
+
This paragraph is part of the preceding list item.


b. List item b.


This paragraph belongs to item two of the outer list.
--

Markdown

1.  List item one.


    List item one continued with a second paragraph followed by an
    Indented block.


        $ ls *.sh
        $ mv *.sh ~/tmp


    List item continued with a third paragraph.


2.  List item two continued with an open block.


    This paragraph is part of the preceding list item.


    1. This list is nested and does not require explicit item continuation.


       This paragraph is part of the preceding list item.


    2. List item b.


    This paragraph belongs to item two of the outer list.

위의 두 문서를 수정없이 현재 그대로 게시(출판)한다고 했을 때 AsciiDoc은 문서로써의 가독성이 현저히 떨어지고 가공 없이는 게시(출판)이 불가능해 보이는 반면, 마크다운은 그 자체로도 문서의 서식이 잘 갖추어져 있어서 어떤 가공 없이도 게시(출판)가 가능해 보입니다.

마크다운 목적

마크다운 구문으로 대체할 수 있는 HTML의 태그는 극히 일부로, 마크다운의 구문은 HTML 태그들의 하위 집합인 셈입니다. 따라서, 마크다운이 HTML과 같거나 HTML을 대체할 수 있는 것은 압니다.

마크다운의 목적은 산문을 쉽게 읽고, 쓰고, 편집할 수 있게 하는 것으로 HTML이 출판의 개념이라면 마크다운은 쓰기의 개념으로 마크다운은 HTML에서 텍스트로 전달할 수 있는 문제만 해결합니다.

마크다운 안의 HTML 사용

위에 언급한 바와 같이 마크다운의 구문은 HTML 태그의 하위집합입니다. 따라서, 마크다운 구문으로 할 수 없는 것들은 HTML 태그를 그대로 사용하면 됩니다.

HTML 블록 내 마크다운 구문 처리

마크다운 안에서 HTML 태그를 사용할 때는 HTML 블록 안에서 마크다운 구문을 사용할 수 없습니다.

This is a regular paragraph.


<table>
  <tr>
    <td>*Foo*</td>
  </tr>
</table>


This is another regular paragraph.

위의 예시에서 <td>사이의 *Foo*는 Bold 처리가 되지 않습니다. Bold 처리를 하고 싶다면 <td><b>Foo</b></td>와 같이 직접 <b> 태그를 추가하면 됩니다.

Block-level 태그 처리

유일한 제약 사항으로는 블록 수준의 HTML 요소들(<div>, <table>, <pre>, <p> 등)을 마크다운 안에서 사용할 때는 시작과 끝을 빈 줄로 감싸서 다른 내용들과 분리해야 하며, 블록의 시작과 끝은 탭이나 공백으로 들여쓰지 않아야 합니다.

예를 들어, 마크다운 내에 <table>을 추가한다고 하면 아래와 같이 위, 아래 문장 사이에 빈 줄을 추가하여 분리시켜야 합니다.

This is a regular paragraph.


<table>
  <tr>
    <td>Foo</td>
  </tr>
</table>


This is another regular paragraph.

Span-level 처리

Span-level의 HTML 태그들(<span>, <cite>, <del> 등)은 마크다운 내에 어디든 사용이 가능합니다. 마크다운 구문으로 표현이 가능한 태그들도 마크다운 형식 대신 HTML 태그로 사용할 수도 있습니다.

주로 사용하는 것은 이미지로 마크다운 구문으로 이미지를 구현할 경우 이미지 크기를 지정할 수가 없어서 이미지 크기를 지정해야 하는 경우 HTML 태그인 <img>를 직접 사용하는 경우가 많습니다.

마크다운 이미지 구문

![Alt text](/path/to/img.jpg 'Optional title')

HTML 이미지 태그

<img
  alt="Alt text"
  src="/path/to/img.jpg"
  title="Optional title"
  width="100"
  height="100"
/>

HTML 특수문자에 대한 자동 이스케이프 처리

HTML에서는 이미 사용중이거나 사용 예정으로 잡아둔 문자들이 있습니다. 이러한 문자들은 사용이 불가능해서 이를 문자 엔티티(Character Entity)라고 하는 것으로 대체해서 사용합니다.

이 중에 마크다운에서는 <, & 는 같은 경우 각각 HTML 태그의 시작 및 링크 주소에서 많이 사용되므로 따로 이스케이프 처리를 하지 않아도 자동으로 이스케이프 처리를 해줍니다.

CharacterDescriptionEntity NameEntity Number
<less than&lt;&#60;
&ampersand&amp;&#38;

따라서, 마크다운 안에서는 < 및 &를 그대로 사용하면 됩니다.

다만 주의하셔야 하는 점이 위에 언급한 바와 같이 HTML 블록 안에서는 마크다운 구문을 사용 할 수 없으므로 각각 &lt;와 &amp;로 직접 이스케이프 처리를 해주어야 합니다.

마크다운 구문점에 대한 이스케이프 처리

위의 상황과 반대로 마크다운에서도 구문점으로 사용하는 문자들이 있는데 이는 마크다운 내에서 직접 사용을 할 수가 없습니다. 예를 들어 반지름이 10인 원의 넓이를 구하는 식인 10*10*3.14=314를 마크다운 내에서 그대로 작성하면 10103.14=314 이런식으로 마크다운 구문이 적용되어서 원치 않는 결과가 발생됩니다.

따라서, 이렇게 마크다운 구문점으로 사용하는 문자들을 리터럴 문자 그대로 보여주고자 하는 경우 백스페이스키인 \를 앞에 사용해 주면 됩니다.

위의 예를 다시 들면, 10*10*3.14=314를 작성하고자 한다면 10\*10\*3.14=314 이렇게 사용하면 됩니다.

마크다운 기본 문법(구문)

단락 및 줄바꿈

단락

마크다운에서 단락을 만들려면 문장과 문장 사이에 하나 이상의 빈줄을 추가하면 됩니다. 이는 HTML에서 <br />로 단락을 구분 짓는 것이 아닌 Block-level로 구분하여 단락을 짓는 방식입니다.

[예시]

첫번째 문장과 두번째 문장 사이에 단락을 추가하고 싶으면


이런식으로 문장 사이에 빈줄을 추가하면 됩니다.


이렇게 빈줄 여러개를 추가해도 단락은 하나밖에 생성되지 않습니다.

[결과]

첫번째 문장과 두번째 문장 사이에 단락을 추가하고 싶으면

이런식으로 문장 사이에 빈줄을 추가하면 됩니다.

이렇게 빈줄 여러개를 추가해도 단락은 하나밖에 생성되지 않습니다.

줄바꿈

마크다운에서는 <br />을 줄바꿈으로 사용하는데 이를 마크다운에서 사용하기 위해서는 줄바꿈을 하고 싶은 위치에서 두개 이상의 공백을 추가하고 개행(Return 입력)을 하면 됩니다.

(아래 예시에 있는 문장 중 첫번째 줄을 전체 선택하거나 끝까지 드래그 해보시면 뒤에 두개 이상의 공백을 확인할 수 있습니다.)

[예시]

마크다운에서 줄바꿈을 사용하고 싶으면    
이렇게 2개 이상의 공백을 추가하면 됩니다.

[결과]

마크다운에서 줄바꿈을 사용하고 싶으면
이렇게 2개 이상의 공백을 추가하고 개행(Return 입력)을 하면 됩니다.

Headers (헤더)

NameMarkdownHTML
Header 1# {title}<h1>{title}</h1>
Header 2## {title}<h2>{title}</h2>
Header 3### {title}<h3>{title}</h3>
Header 4#### {title}<h4>{title}</h4>
Header 5##### {title}<h5>{title}</h5>
Header 6###### {title}<h6>{title}</h6>

마크다운의 기본 구문에서는 아래 두가지 방식을 사용할 수 있습니다.

Setext

Setext 방식은 <h1>은 등호(=)를, <h2>는 대시(-)를 문장 다음 줄에 밑줄 형태로 사용해서 구현할 수 있으며 Setext 방식으로는 <h1>, <h2> 만 구현할 수 있어서 대중적으로 사용하지는 않습니다. (= 또는 - 갯수에 상관없이 작동합니다.)

[예시]

# H1 제목입니다.


## H2 제목입니다.

[결과]

H1 제목입니다.

H2 제목입니다.

atx

atx 방식은 해시(#)의 갯수를 헤더 태그들인 <h1> ~ <h6> 6가지의 태그 숫자와 매칭해서 <h1>은 #으로 <h2>는 ##으로, <h3>은 ###과 같은 식으로 구현합니다.

[예시]

# H1 제목입니다.


## H2 제목입니다.


### H3 제목입니다.


#### H4 제목입니다.


##### H5 제목입니다.


###### H6 제목입니다.

[결과]

H1 제목입니다.

H2 제목입니다.

H3 제목입니다.

H4 제목입니다.

H5 제목입니다.
H6 제목입니다.

선택적으로 atx 스타일은 문장 마지막에 해시(#)를 추가하여 닫을 수 있습니다. 이는 따른 추가적인 기능없이 오로지 가독성을 위한 것입니다.

[예시]

# H1 제목입니다.


## H2 제목입니다.


### H3 제목입니다.

[결과]

H1 제목입니다.

H2 제목입니다.

H3 제목입니다.

BlockQuote (인용)

NameMarkdownHTML
BlockQuote> {content}<blockquote>{content}</blockquote>

마크다운은 인용을 위해 이메일 스타일인 > 문자를 사용합니다. 모든 줄 앞에 > 추가하면 됩니다.

[예시]

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

[결과]

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

BlockQuote 중복

BlockQuote(인용)은 > 문자를 연속으로 사용하는 방식으로 중복 사용이 가능합니다.

[예시]

> BlockQuote(인용)은 중복으로 사용 가능합니다.
>
> > 이중 중복
> >
> > > 삼중 중복
> > >
> > > > 이런식으로 중복이 가능합니다.

[결과]

BlockQuote(인용)은 중복으로 사용 가능합니다.

이중 중복

삼중 중복

이런식으로 중복이 가능합니다.

BlockQuote 안에서 마크다운 문법 사용하기

BlockQuote 안에서 마크다운 문법을 얼마든지 사용 가능합니다.

[예시]

> **BlockQuote(인용) 안에서 마크다운 문법을 사용할 수 있습니다.**
>
> 1. `첫번째` 순서
> 2. `두번째` 순서
>
> [Moroo Blog](https://blog.moroo.dev) 이런식으로 링크 사용도 가능합니다.

[결과]

BlockQuote(인용) 안에서 마크다운 문법을 사용할 수 있습니다.

  1. 첫번째 순서
  2. 두번째 순서

Moroo Blog 이런식으로 링크 사용도 가능합니다.

Lists (목록)

마크다운에서는 순서가 있는 목록(번호)과 순서가 없는 목록(기호)을 지원합니다.

Ordered List (순서가 있는 목록)

NameMarkdownHTML
Ordered List1. {list}<ol><li>{list}</li></ol>

순서가 있는 목록은 숫자 다음에 마침표(.)로 사용이 가능합니다. 하위 목록은 탭으로 구현합니다.

[예시]

1. 첫번째 항목
   1. 첫번째 목록의 첫번째 하위 항목
   2. 첫번째 목록의 두번째 하위 항목
2. 두번째 항목
3. 세번째 항목

[결과]

  1. 첫번째 항목
    1. 첫번째 목록의 첫번째 하위 항목
    2. 첫번째 목록의 두번째 하위 항목
  2. 두번째 항목
  3. 세번째 항목

순서는 작성한 순번과 상관없이 1번부터 순차적으로 채번됩니다.

[예시]

1. 첫번째 항목
   1. 첫번째 목록의 첫번째 하위 항목
   1. 첫번째 목록의 두번째 하위 항목
3. `3`으로 적어도 `2`로 자동 채번됩니다.
4. `3` 다음인 `4`로 적었어도 자동 채번으로 인해 `3`으로 변경됩니다.
2. 숫자가 적어도 해당 순번에 맞게 `4`로 채번됩니다.

[결과]

  1. 첫번째 항목
    1. 첫번째 목록의 첫번째 하위 항목
    2. 첫번째 목록의 두번째 하위 항목
  2. 3으로 적어도 2로 자동 채번됩니다.
  3. 3 다음인 4로 적었어도 자동 채번으로 인해 3으로 변경됩니다.
  4. 숫자가 적어도 해당 순번에 맞게 4로 채번됩니다.

Unordered List (순서가 없는 목록)

NameMarkdownHTML
Unordered List- {list}
* {list}
- {list}		<ul><li>{list}</li></ul>

정렬되지 않은 목록은 별표( * ), 더하기( + ), 하이픈( - ) 세가지로 사용 가능합니다. 마찬가지로 탭을 이용하여 하위 목록을 구현할 수 있으며 표시자를 혼합해서 사용해도 됩니다.

[예시]

- Color
  * Red
  * Green
  * Blue
- Animal
  * Cat
  * Dog

[결과]

  • Color
    • Red
    • Green
    • Blue
  • Animal
    • Cat
    • Dog

Code (코드)

코드 블록은 블록안에 있는 텍스트를 문자 그대로 해석합니다. 따라서 태그, 마크업, 코드 등을 작성할 때 유용하게 사용할 수 있습니다.

Inline Code (인라인 코드)

NameMarkdownHTML
Inline Code`{source}`<code>{source}</code>

인라인 코드는 문자 사이에 작성할 수 있으며 키보드 1번 왼쪽에 있는 ` 문자 한개를 사용하며 구현할 수 있습니다. HTML로 변환 시 <code> 태그로 래핑됩니다.

[예시]

- `<a>` 태그는 href 속성으로 이동할 수 있는 하이퍼링크를 만들어 주는 태그입니다.
- 자바스크립트에서는 `const now = new Date();`로 현재 시간을 구할 수 있습니다.

[결과]

  • <a> 태그는 href 속성으로 이동할 수 있는 하이퍼링크를 만들어 주는 태그입니다.
  • 자바스크립트에서는 const now = new Date();로 현재 시간을 구할 수 있습니다.

Code Block (코드 블록)

NameMarkdownHTML
Code Block```{source}```<pre><code lang="{language}">{source}</code></pre>

코드 블록은 주로 여러줄로 작성된 코드를 표현하기 위해 사용되며, ` 세개를 사용하여 ```로 구현합니다. HTML로 변환 시 <pre><code></code></pre> 태그로 래핑됩니다. (코드 블록은 다른 문법들과 다르게 끝에 ```로 다시 닫아 주어야 합니다.)

최근에는 ```typescript 처럼 ``` 바로 뒤에 작성하려는 코드의 언어명을 입력하여서 구문 강조를 해주기도 합니다.

[예시]

```typescript
class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;
  }
}


interface Person {
  firstName: string;
  lastName: string;
}


function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}


let user = new Student('Jane', 'M.', 'User');


document.body.textContent = greeter(user);
```

[결과]

class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;
  }
}


interface Person {
  firstName: string;
  lastName: string;
}


function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}


let user = new Student('Jane', 'M.', 'User');


document.body.textContent = greeter(user);

ℹ️ 정보
코드 발췌: Typescript - Class

Horizontal Rolles (수평선)

NameMarkdownHTML
Horizontal Rolles--- , ***, ___<hr />

화면상에 가로로 긴 줄을 출력해며, 단락과 단락을 나누는 듯 레이아웃을 구분할 때 많이 사용합니다.

⚠️ 주의 수평선을 추가하기 위해 ---와 같이 하이픈 세개를 텍스트 바로 밑에 추가할 경우 수평선이 아닌 헤더 1로 변경되니 하이픈(-)으로 사용하지 않거나, 항상 한칸 띄어놓고 사용하셔야 합니다. (Setext)

[예시]

단락 1 (헤더로 변환)
---


단락 2


---


단락 3


---


단락 4 (한칸을 띄우면 수평선으로 변환)

[결과]

단락 1 (헤더로 변환)

단락 2

단락 3

단락 4 (한칸을 띄우면 수평선으로 변환)

일반 방식

NameMarkdownHTML
Anchor[{title}]({url})<a href="{url}">{title}</a>

대괄호[]와 소괄호()를 이용해서 링크를 생성합니다. 대괄호안에는 링크의 타이틀을 입력하고 소괄호 안에는 링크의 url을 입력합니다. 소괄호() 안에 url 다음 한칸 띄우고 따옴표" 사이에 title 속성을 입력할 수도 있습니다.

[예시]

- [Moroo Blog](https://blog.moroo.dev)
- 이 [링크](https://blog.moroo.dev '타이틀 속성')에 마우스를 올리면 타이틀 속성이 표시됩니다.

[결과]

  • Moroo Blog
  • 이 링크에 마우스를 올리면 타이틀 속성이 표시됩니다.

위 두개의 링크에 대한 HTML은 아래와 같습니다.

<ul>
  <li>
    <a href="https://blog.moroo.dev">Moroo Blog</a>
  </li>
  <li>
    <a href="https://blog.moroo.dev" title="속성 타이틀">링크</a>
  </li>
</ul>

참조 방식

NameMarkdownHTML
Anchor사용: [{title}][{id}]
참조: [{id}]: {url}		<a href="{url}">{title}</a>
Anchor사용: [{title}][]
참조: [{title}]: {url}		<a href="{url}">{title}</a>

링크를 생성하는 또다른 방식으로는 참조 방식이 있는데 이것은 문서 내 임의의 위치에 id와 url을 세트로 하는 링크 목록을 만들고 이렇게 만들어 둔 링크를 다른 곳에서 id로 참조해서 url을 가져오는 방식입니다. (title과 id가 동일한 경우 id를 생략할 수 있습니다.)

이 참조 방식은 동일한 링크를 여러곳에서 사용할 때 유용하며 마크다운 문서 내 링크 주소가 한 곳에 모두 모여 있어서 문서 내 흐름을 방해하지 않습니다.

여기서 임의로 만들어둔 링크 목록은 HTML로 전환 시 제거되어 화면에는 표시되지는 않습니다.

[예시]

[Moroo Blog][blog] _(아래 참조는 결과 화면에서는 제거가 되어 보이지 않습니다.)_


.
.
.


[blog]: https://blog.moroo.dev

[결과]

Moroo Blog (아래 참조는 결과 화면에서는 제거가 되어 보이지 않습니다.)

. . .

Emphasis (강조)

NameMarkdownHTML
em*{content}*
_{content}_		<em>{content}</em>
strong**{content}**
__{content}__		<strong>{content}</strong>

마크다운에서는 *와 _로 강조 표시를 해 줄 수 있습니다. HTML로 변환 시 한개만 사용했을 때는 <em>로, 두개를 사용하였을 경우 <strong>으로 각각 변환됩니다.

[예시]

*한개*만 사용했을 때는 `<em>`으로 변환되며,
**두개**를 사용했을 때는 `<strong>`으로 변환됩니다.

[결과]

한개만 사용했을 때는 <em>으로 변환되며, 두개를 사용했을 때는 <strong>으로 변환됩니다.

Image (이미지)

NameMarkdownHTML
Image![{alt}]({source})<img src="{source}" alt="{alt}" />
Image사용: ![{alt}][{id}]
참조: [{id}]: {source}		<img src="{source}" alt="{alt}" />

이미지 사용법은 앞에 느낌표!를 붙이는 거 빼곤 링크 사용법과 거의 동일합니다. 느낌표!로 시작해서 대괄호[] 안에는 Alt 속성 값을 넣고, 소괄호()안에는 이미지 소스를 넣으면 됩니다. (소스 뒤에 따옴표"를 이용하여 타이틀 속성을 추가할 수 있습니다.)

[예시]

![Moroo Logo](/assets/moroo.svg 'Moroo Blog Logo')

[결과]

Moroo Logo

앞서 Span-level 처리에서 말했다시피 마크다운에서 이미지 처리 시 width 및 height를 지정할 수가 없습니다. 그래서 이미지 같은 경우에는 대부분 마크다운 문법이 아닌 <img /> HTML 태그를 직접 사용하곤 합니다.

[예시]

<img
  src="/assets/moroo.svg"
  alt="Moroo Logo"
  width="20"
  height="20"
  title="Moroo Blog Logo"
/>

[결과]

Moroo Logo

Common Mark

2004년 처음 John Gruber가 마크다운을 개발하고 벌써 18년이라는 세월이 흘렀습니다. 초기 마크다운의 모호성으로 인하여 여러 파생들이 생겨났으며 이로 인하여 같은 마크다운 문서라 하지라도 어디서 어떻게 구문 분석을 했는지에 따라서 그 결과가 서로 다르게 나왔습니다. (같은 마크다운 문서일지라도, Github, Slack, Jira, Notion 등 다양한 플랫폼에서 서로 다르게 구문이 분석되거나 분석 자체가 실패하기도 합니다.)

이에, 마크다운 구문을 공식적으로 지정하고자 Common Mark 프로젝트가 진행중입니다.

ℹ️ 정보
https://commonmark.org에서 발췌...

Why is CommonMark needed? John Gruber’s canonical description of Markdown’s syntax does not specify the syntax unambiguously.

In the absence of a spec, early implementers consulted the original Markdown.pl code to resolve these ambiguities. But Markdown.pl was quite buggy, and gave manifestly bad results in many cases, so it was not a satisfactory replacement for a spec. Markdown.pl was last updated December 17th, 2004.

Because there is no unambiguous spec, implementations have diverged considerably over the last 10 years. As a result, users are often surprised to find that a document that renders one way on one system (say, a GitHub wiki) renders differently on another (say, converting to docbook using Pandoc). To make matters worse, because nothing in Markdown counts as a “syntax error,” the divergence often isn’t discovered right away.

There’s no standard test suite for Markdown; MDTest is the closest thing we have. The only way to resolve Markdown ambiguities and inconsistencies is Babelmark, which compares the output of 20+ implementations of Markdown against each other to see if a consensus emerges.

We propose a standard, unambiguous syntax specification for Markdown, along with a suite of comprehensive tests to validate Markdown implementations against this specification. We believe this is necessary, even essential, for the future of Markdown.

That’s what we call CommonMark.

마무리

지금까지 마크다운에 대해서 알아보고 문법에 대해 배워봤습니다.

개인적으로 저는 마크다운이 배우기 쉽고, 사용하기 편리하며 여러 플랫폼에서 사용 가능한 점이 좋아서 좋아합니다. 마크다운만 잘 사용하셔도 어느 플랫폼에서든 문서 작성을 쉽게 하실 수 있을거라 생각합니다.

추후 기회가 되면 Common Mark(cmark)와 GitHub Flavored Markdown(GFM) 에 대해 포스팅 해보겠습니다.

감사합니다. 👋

참고한 사이트

Comments

Sub Category

Markdown (3)