。 5,本demo展示了本站点的样式(css)，如果不喜欢，可以通过此demo修改。 6,本demo还包含了markdown的基本语法（红块）。 ``` :smile:本Demo的[Markdown源码](https://raw.githubusercontent.com/jokinkuang/stepbystep/master/_posts/2016-8-24-markdown_demo.md) 目录： {:use_numbered_headers => true} * auto-gen TOC: {:toc} # Kramdown Markdown Syntax # H1 ## H2 ### H3 #### H4 ###### H5 > \# 空格 TEXT or > \- - - - > TEXT > \===== or \----- ## TOC If you create a list, and then set the toc attribute, when rendering Maruku will create an auto-generated table of contents(TOC). TOC was supported by Maruku, and Kramdown implements the Maruku so it also support TOC! > add following to the post > > \* 空格(or 1. 空格) This is a list and would become a table of contents(TOC) and this text will be scraped that you cannot see(it doesn't matter what you write here)! > \{:toc\} > ## blockquote > This is a blockquote. > > This is the second paragraph in the blockquote. > > \> 空格 TEXT > \> 空格 TEXT > \> 空格 TEXT ## italic Some of these words *are emphasized*. Some of these words _are emphasized also_. > \*TEXT\* or \_TEXT\_ ## emphasis Use two asterisks for **strong emphasis**. Or, if you prefer, __use two underscores instead__. > \**TEXT\** or \__TEXT\__ ## inline code inline `code` > \`TEXT\` ## unordered list * Candy. * Gum. * Booze. + Candy. + Gum. + Booze. - Candy. - Gum. - Booze. > \* 空格 TEXT or > \- - - - > \+ 空格 TEXT or > \- - - - > \- 空格 TEXT ## ordered list 1. Red 2. Green 3. Blue > 1. 空格 TEXT > 数字有没有序是没关系的 * A list item. With multiple paragraphs. * Another item in the list. > \* 空格 TEXT ## link This is an [example link](http://example.com/). This is an [example link](http://example.com/ "With a Title"). I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3]. [1]: http://google.com/ "Google" [2]: http://search.yahoo.com/ "Yahoo Search" [3]: http://search.msn.com/ "MSN Search" I start my morning with a cup of coffee and [The New York Times][NY Times]. [ny times]: http://www.nytimes.com/ > \[example link](http://example.com/ "With a Title") or > - - - - > \[example link]\[id] > 空行 > \[id]: http://example.com/ "With a Title" ## image  ![alt text][id] [id]: /w3c/images/avator.jpg "Title" > The same as Link > But start with `!` How to make the image to show center？ 1. CSS cannot 2. javascript can 3. use img in markdown text instead > NOTE kmarkdown 转换图片是直接转换成 \
\
），所以从css角度无法实现图片居中。
# GFM Syntax
```c
int main() {
printf("hello world!");
}
```
> \`\`\`language
> // code here
> \`\`\`
## Task Lists
- [x] @mentions, #refs, [links](), **formatting**, and tags supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item
## Tables
First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
> 表格
> cell1 \| cell2 （ \| 两边要空格）
## SHA references
Any reference to a commit’s SHA-1 hash will be automatically converted into a link to that commit on GitHub.
16c999e8c71134401a78d4d46435517b2271d6ac
mojombo@16c999e8c71134401a78d4d46435517b2271d6ac
mojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac
Issue references within a repository
Any number that refers to an Issue or Pull Request will be automatically converted into a link.
#1
mojombo#1
mojombo/github-flavored-markdown#1
Username @mentions
Typing an @ symbol, followed by a username, will notify that person to come and view the comment. This is called an “@mention”, because you’re mentioning the individual. You can also @mention teams within an organization.
## Automatic linking for URLs
Any URL (like