[CSS] 완전 기초 마크다운 신텍스 Markdown Syntax Cheat Sheet / 마크다운 문법으로 티스토리 블로그 글쓰기

2/26/2018 Archive

---

 

This page lists all Markdown syntax that Markable supports. Because we use different engines to convert Markdown syntax in live preview and backend server, there're some syntax only supported on server side, that means they cannot be converted correctly in live preview.

For more details and explanations of the syntax, please visit Markdown Syntax Page.

---

Setext-style headers

Input:

This is an H1

=============

 

This is an H2

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

Output:

This is an H1

This is an H2

---

Atx-style headers

Input:

# Header 1 #

## Header 2 ##

### Header 3 ### (Hashes on right are optional)

#### Header 4 ####

##### Header 5 #####

###### Header 6 ######

Output:

Header 1

Header 2

Header 3

Header 4Header 5Header 6

---

Blockquotes

Input:

> This is the first level of quoting.

>

> > This is nested blockquote.

>

> Back to the first level.

Output:

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

---

List

Input:

Unordered list 1

 

* Red

* Green

* Blue

 

Unordered list 2

 

+ Red

+ Green

+ Blue

 

Unordered list 3

 

- Red

- Green

- Blue

 

Ordered list 1

 

1. Bird

2. McHale

3. Parish

 

Ordered list 2

 

1. Bird

1. McHale

1. Parish

 

Ordered list 3

 

3. Bird

2. McHale

1. Parish

Output:

Unordered list 1

• Red

• Green

• Blue

Unordered list 2

• Red

• Green

• Blue

Unordered list 3

• Red

• Green

• Blue

Ordered list 1

1. Bird

2. McHale

3. Parish

Ordered list 2

1. Bird

2. McHale

3. Parish

Ordered list 3

1. Bird

2. McHale

3. Parish

---

Emphasis

Input:

*single asterisks*

 

_single underscores_

 

**double asterisks**

 

__double underscores__

Output:

single asterisks

single underscores

double asterisks

double underscores

---

Link

Input:

This is [an example](http://example.com/ "Title") inline link.

 

[This link](http://example.net/) has no title attribute.

Output:

This is an example inline link.

This link has no title attribute.

---

Auto Link

Input:

<http://markable.in>

 

<hi@markable.in>

Output:

http://markable.in

hi@markable.in

 

---

Image

Input:


 


 

![Alt text][id]

[id]: url/to/image "Optional title attribute"

 

![Google Logo][googlelogo]

[googlelogo]: http://www.google.com.hk/intl/zh-CN/images/logo_cn.png

Output:

---

Horizontal Rules

Input:

* * *

***

*****

- - -

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

Output:

---

---

---

---

---

Footnote

NOTE: Table syntax is only supported on server side.

Input:

Footnotes[^1] have a label[^label] and a definition[^!DEF].

 

[^1]: This is a footnote

[^label]: A footnote on "label"

[^!DEF]: The definition of a footnote.

Output:

Footnotes1 have a label2 and a definition3.

---

Table

NOTE: Table syntax is only supported on server side.

Input:

| Left align | Right align | Center align |

|:-----------|------------:|:------------:|

| This | This | This |

| column | column | column |

| will | will | will |

| be | be | be |

| left | right | center |

| aligned | aligned | aligned |

 

* Colon used for alignment (right versus left)

Output:

Left align	Right align	Center align
This	This	This
column	column	column
will	will	will
be	be	be
left	right	center
aligned	aligned	aligned

 

---

Code

Input:

`print` is a python method.

Output:

print is a python method.

---

Code Fencing

Use ``` to wrap code section and you won't need to indent manually to trigger a code block.

Input:

```

This is a code block.

No need to indent manually.

```

Output:

This is a code block.

No need to indent manually.

Tasklist

- [ ] Task 1

- [x] Task 2

- [x] Task 3

Output:

• Task 1

• Task 2

• Task 3

---

1. This is a footnote ↩

2. A footnote on "label" ↩

3. The definition of a footnote. ↩

---

마크다운 문법으로 티스토리 블로그 글쓰기

2013.12.16 14:36 - Posted in 블로그 관련 정보

 

 

요즘 마크다운 문법을 활용하여 포스트를 작성하는데 푹 빠져있습니다. 주로 사용하는 문법은 몇개 한정되어 있긴 합니다만 쓰면 쓸수록 편리하고 재미가 있네요. 아직 적응 중이라서 완벽하게 활용한다고 볼 순 없지만 조금씩 익숙해지는 맛도 있습니다. 좀 찾다보니 마크다운을 지원하는 다양한 글쓰기 어플리케이션들이 있더군요. 제가 사용하던 율리시스 3는 걸음마 수준이었습니다. 좀 더 강력하고 다양하게 확장할 수 있으면서도 편리한 방법을 사용할 수 있는 앱들도 참 많았습니다. 어떤 앱을 쓰든간에 자기 자신에게 잘 맞는 시스템을 선택하는데 중요할텐데, 저는 최근에는 MOU라는 시스템이 마음에 들어 적극적으로 사용하고 있는 중입니다. 미리보기가 실시간으로 적용되는데다가 여러가지 테마가 있고, CSS를 수정할 수 있다는 장점이 있습니다. 심지어 무료입니다. 단 한가지 단점이라고 한다면 바인더 형태로 많은 파일들을 관리할 수 없다는 것이더군요. 이것은 doo라는 프로그램을 연동하여 클라우드와 연계시켜 놓고 사용해보고 있습니다. 버전관리는 나름 괜찮게 되는 것 같은데 파일이 중복 저장되고 제목이 아닌 본문이 검색이 되지 않는 문제 등 몇 개의 사용상에 나타날 수 있는 오류가 있어서 아직은 좀 지켜보고 있는 중입니다.

그동안 정갈하고 딱 정리된 포스팅, 그리고 다양한 CSS 효과들을 다수 활용하는 블로거분들을 보면서... 참 대단하다고 생각했는데, 알고보니 대체로 마크다운을 활용한 포스팅이더군요. 티스토리가 자체적으로 마크다운을 지원하진 않고 있어서 마크다운 편집기에서 HTML로 변환하여 티스토리 에디터의 HTML 형식에 붙여넣기를 해야하는 살짝의 번거로움이 있는 건 사실입니다.

지금 율리시스는 아주 간략한 마크다운을 쓰기 위해서만 사용중입니다. 주로 칼럼을 쓰거나 단순 텍스트 위주로 구성된 글을 쓸 때 괜찮은 것 같습니다. 칼럼 형태의 포스트는 주로 텍스트가 콘텐츠가 되기 때문입니다.

MOU 같은 경우에는 칼럼 등을 제외한 기타 다른 형태의 포스트에서 활용 중입니다. 어떤 서비스의 소개라든지 활용 방법이라든지 같은 것들이지요. 앞으로도 율리시스 3를 활용한 칼럼 형태의 포스트와 MOU을 활용한 서비스가 주력이 될 듯 보입니다.

다행스럽게도 이번 반응형 웹 스킨인 Skeleton이 마크다운 문법을 다양하게 지원하고 있어서 궁합이 좋습니다. 좀 더 좋은 글을 쓰고, 그 글을 좀 더 보기 좋도록 만드는 것에 많은 시간을 쏟고 있는데, 이것이 어떤 부메랑 효과로 돌아올지는 아무도 알 수 없어서 오히려 흥미로운 느낌입니다.

이번에 좀 더 확장하여 개인 폴더 트리 및 정보 데이터 관리 마인드맵을 수정 중입니다. 1차로 얼마전에 블로그에서 오픈(MAC으로 정보와 자료를 처리하고 관리하는 방법(개인 데이터베이스 구축 구조화) 한 적이 있는데, 좀 더 수정을 보고 있습니다. 이번에 추가된 마크다운 파일(.md 형태)와 함께 사진, 음악 등이 추가될 듯 보입니다.

마크다운에서 이야기가 좀 삼천포로 빠진 것 같은데,  결론은 마크다운 좋아요. ^^