笔记-Markdown常用语法

其实应该很早就已经接触到了Markdown这种简洁却彪悍的标记语言，比如Github的README.md，只不过被不走心的我当作txt文档来用了。直到前个看到一位大神的读书列表清单，觉得很新奇，就有意识地查阅了一些语法，瞬间被吸引到了。本文便记录部分常用的语法。

1、标题 #

<!-- MD -->
## this is heading level 2
<!-- HMTL -->
<h2>this is heading level 2</h2>

2、列表 

(1)无序列表 +/-/*

<!-- MD -->
* Fruit
    + Apple
    + Banana
    + Orange
* Food
* Animal
<!-- HMTL -->
<ul>
<li>Fruit
    <ul><li>Apple</li>
    <li>Banana</li>
    <li>Orange</li></ul>
</li>
<li>Food</li>
<li>Animal</li>
</ul>

(2)有序列表 数字.

<!--  MD -->
1. Apple
1. Banana
1. Orange
<!-- HMTL -->
<ol>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ol>

3、引用 >

<!-- MD -->
> I hope this post proves helpful to someone else that encounters the problem.
> > It was almost as frustrating to find the culprit the second time … 
<!-- HTML -->
<blockquote>
    <p>I hope this post proves helpful to someone else that encounters the problem.</p>
    <blockquote>
        <p>It was almost as frustrating to find the culprit the second time … </p>
    </blockquote>
</blockquote>

4、代码块 `

<!-- MD -->
```javascript
testData = ' - time:' + new Date().getTime() + ' <br> ';
localStorage.setItem("test", testData);
```
<!-- HTML -->
<pre><code class="javascript">testData = ' - time:' + new Date().getTime() + ' &lt;br&gt; ';
localStorage.setItem("test", testData);
</code></pre>

5、强调 */_

<!-- MD -->
This is the *emphasis* code. and That is the most **important** part.
<!-- HTML -->
<p>This is the <em>emphasis</em> code. and That is the most <strong>important</strong> part.</p>

6、超链接 [text] (url title) / [text] [id] .. [id]: url title

(1)内联方式：

<!-- MD -->
This is [inline-link](http://daringfireball.net/projects/markdown/dingus "Title-md demo") inline link.
<!-- HTML -->
<p>This is <a href="http://daringfireball.net/projects/markdown/dingus" title="Title-md demo">inline-link</a> inline link.</p>

(2)引用方式：

<!-- MD -->
This is [ref-link] [ref-1] reference-style link.
[ref-1]: http://daringfireball.net/projects/markdown/dingus  "Title-md demo"
<!-- HTML -->
<p>This is <a href="http://daringfireball.net/projects/markdown/dingus" title="Title-md demo">ref-link</a> reference-style link.</p>

7、图片 ![text] (url title) -- 两种方式同超链接

<!-- MD -->
![Alt text](/path/to/img.jpg "Optional title")
<!-- HTML -->
<img alt="Alt text" src="/path/to/img.jpg" title="Optional title">

8、图片 :name:

<!-- MD -->
:+1:
<!-- HTML -->
<img align="absmiddle" alt=":+1:" class="emoji" height="20px" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f44d.png" title=":+1:" width="20px">

9、脚本引用 [^id]

<!-- MD -->
Footnotes[^fnote-1] are added in-text like so ...
[^fnote-1]: 
Footnotes are detailed explanation.  
There are always long conents in the footnotes.
<!-- HTML -->
<p>Footnotes<sup id="fnref:fnote-1"><a class="footnote-ref" href="#fn:fnote-1" rel="footnote">1</a></sup> are added in-text like so …</p>
<div class="footnote">
    <hr>
    <ol>
        <li id="fn:fnote-1">
            <p>Footnotes are detailed explanation.<br>
            There are always long conents in the footnotes.&nbsp;<a class="footnote-backref" href="#fnref:fnote-1" rev="footnote" title="Jump back to footnote 1 in the text">↩</a></p>
        </li>
    </ol>
</div>

 

附：使用sublime预览MD文件

安装 :

Ctrl + Shift + P | PCI | Markdown Preview

预览快捷键：(Package Control Messages [To preview] 说明)

{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }

 

参考：

https://daringfireball.net/projects/markdown/syntax

https://rephrase.net/box/word/footnotes/syntax/

http://www.cnblogs.com/hnrainll/p/3514637.html

http://blog.csdn.net/kaitiren/article/details/38513715

http://www.webpagefx.com/tools/emoji-cheat-sheet/

https://www.macstories.net/roundups/sublime-text-2-and-markdown-tips-tricks-and-links/

http://note.youdao.com/share/?id=b2ea64a76aa487a67ea504f70b1bb914&type=note#/