Markdown

lastmod 2026-08-03created 2016-10-2958 edits

Markdown is a type of markup language created by John Gruber and Aaron Swartz. Its advantage is that it is easy both to read and to write. Gruber also wrote a Perl script that converts documents written in Markdown to HTML. The file extension is .md.

Basic Syntax

These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.

# H1
## H2
### H3

1. First item
2. Second item
3. Third item

- First item
- Second item
- Third item

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

term
: definition

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Syntax

• A complete summary of MarkDown usage

Header

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

Heading 1 (h1) and heading 2 (h2) can also be written as follows.

제목 1
======

제목 2
------

Emphasis

Converted to <em>, <strong>, and <del> tags respectively.

To underline text, use the <u></u> tag directly.

이텔릭체는 *별표(asterisks)* 혹은 _언더바(underscore)_를 사용하세요.
두껍게는 **별표(asterisks)** 혹은 __언더바(underscore)__를 사용하세요.
**_이텔릭체_와 두껍게**를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~를 사용하세요.
<u>밑줄</u>은 `<u></u>`를 사용하세요.

Links

Converted to <a>.

[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](../users/login)

[Dribbble][Dribbble link]

[GitHub][1]

문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[Dribbble link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"

Images

Converted to <img>. Similar to links, but prefixed with !.

![대체 텍스트(alternative text)를 입력하세요!](http://www.gstatic.com/webp/gallery/5.jpg "링크 설명(title)을 작성하세요.")

![Kayak][logo]

[logo]: http://www.gstatic.com/webp/gallery/2.jpg "To go kayaking."

Linking an image

Wrap the Markdown image code in link code.

[![Vue](/images/vue.png)](https://kr.vuejs.org/)

Inline code highlighting

`background`혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

Block code highlighting

Type ` three or more times and also write the code language.

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

.list > li {
  position: absolute;
  top: 40px;
}

function func() {
  var a = 'AAA';
  return a;
}

$ vim ./~zshrc

s = "Python syntax highlighting"
print s

No language indicated, so no syntax highlighting. 
But let's throw in a tag.

<h3 markdown="1">
인용문 (BlockQuote)
</h3>
<p markdown="1">
`<blockquote>` 태그로 변환됩니다.
</p>
```md
인용문(blockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_

BREAK!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩된 인용문 1
>>> 중중첩된 인용문 2
>>> 중중첩된 인용문 3

Horizontal Rule

Enter three or more of any of these symbols.

---
(Hyphens)

***
(Asterisks)

___
(Underscores)

Line Breaks

동해물과 백두산이 마르고 닳도록 
하느님이 보우하사 우리나라 만세   <!--띄어쓰기 2번-->
무궁화 삼천리 화려 강산<br>
대한 사람 대한으로 길이 보전하세

Table

Mixing html inside markdown can work sometimes. In your particular case, it won't work cleanly:

| <td colspan=1>Layer 1  | <td colspan=1>Layer 2   | Layer 3 |
| ---------------------- | ----------------------- | --------- |
| <td rowspan=4>L1 Name  | <td rowspan=2>L2 Name A | L3 Name A |
|                        |                         | L3 Name B |
|                        | <td rowspan=2>L2 Name B | L3 Name C |
|                        |                         | L3 Name D |

Github Markdown

• Basic writing and formatting syntax - GitHub Docs

Autolinked references and URLs

• Autolinked references and URLs - GitHub Docs

See also

• Jekyll
• Octopress
• reStructuredText
• Markdown.js
• Novel Writer - Markdown editor for novelists
• ghostwriter
• LiaScript - create online courses with Markdown
• Mermaid - GitHub starts supporting Mermaid diagrams in Markdown
• LetsMarkdown - open-source collaborative tool for simultaneous Markdown editing
• typst - markup-based typesetting system
• pandoc
• Marked
• markdown-it - Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed (javascript)
• NotesHub - cross-platform, Markdown-based note-taking app
• MarkItDown - Python tool that converts files and Office documents to Markdown (Microsoft)
• YAML frontmatter
• Python-Markdown
• Presenterm - Markdown slideshows in the terminal
• markdown-to-slides - web app that converts Markdown into slides
• Mermaid - draw flowcharts as code on top of Markdown.
• lychee (link checker) - fast asynchronous link checker written in Rust
• Defuddle - open-source HTML-to-Markdown alternative to Readability
• Quarkdown - modern Markdown-based typesetting system
• Showmaker - program that turns Markdown into slides
• OverType - Markdown WYSIWYG editor based on a plain textarea
• mdream - convert any site into clean Markdown and llms.txt
• Tasks.md - self-hostable task management board based on Markdown files
• Typst - markup-based typesetting system
• Runme - CLI tool that turns code blocks in Markdown into runnable workflows
• QMD - quick Markdown search
• Marp - converts Markdown into presentations such as PDF or HTML.
• mdvi - CLI-based Markdown viewer
• defuddle - extracts any web page into Markdown
• mq - jq-style Markdown query language
• satteri - high-performance Markdown and MDX processor for the JavaScript ecosystem

Favorite site

• GitHub Guides - Mastering Markdown
• Adopting Markdown-based documentation
• How to write markdown
• (Velog) Markdown syntax, HTML tag - shows the HTML TAG corresponding to each Markdown element.

Markdown Guide

• [Recommended] Basic Syntax | Markdown Guide
• Extended Syntax | Markdown Guide
• Markdown Cheat Sheet | Markdown Guide

Tip

• Adding self-updating screenshots to documentation | GeekNews
  • [Original] interblah.net - Self-updating screenshots
  • SCREENSHOT comments in Markdown hold directives such as the target path, capture method, and CSS selector, and the build process reads them and fills them in with actual images