Typora-Mac

2017-07-31  本文已影响0人  erlingmusan

MarkDown-Typora-Mac

[TOC]

1. 概述

1.1. 宗旨

Markdown的目标是实现「易读易写」。

Markdown语法受到一些既有text-to-HTML格式的影响，包括Setext、atx、Textile、reStructuredText、Grutatext和EtText，而最大灵感来源其实是纯文本电子邮件的格式。

1.2. 兼容 HTML

不在Markdown涵盖范围之内的标签，都可以直接在文档里面用HTML撰写。不需要额外标注这是HTML或是Markdown；只要直接加标签就可以了。

这是一个普通段落。
<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>
这是另一个普通段落。

请注意，在HTML区块标签间的Markdown格式语法将不会被处理。比如，你在HTML区块内使用Markdown样式的强调会没有效果。

1.3. 特殊字符自动转换

在HTML文件中，有两个字符需要特殊处理：<和&。<符号用于起始标签，&符号则用于标记HTML实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是<和&。

&字符尤其让网络文档编写者受折磨，如果你要打「AT&T」 ，你必须要写成「AT&T」。而网址中的&字符也要转换。比如你要链接到：

http://images.google.com/images?num=30&q=larry+bird

你必须要把网址转换写为

http://images.google.com/images?num=30&q=larry+bird

才能放到链接标签的href属性里。不用说也知道这很容易忽略，这也可能是HTML标准检验所检查到的错误中，数量最多的。

类似的状况也会发生在<符号上，因为Markdown允许兼容 HTML，如果你是把<符号作为HTML标签的定界符使用，那Markdown也不会对它做任何转换，但是如果你写：

4 < 5

Markdown 将会把它转换为：

4 < 5

不过需要注意的是，code范围内，不论是行内还是区块，<和&两个符号都一定会被转换成HTML实体，这项特性让你可以很容易地用Markdown写HTML code（和HTML相对而言，HTML语法中，你要把所有的<和&都转换为HTML实体，才能在HTML文件里面写出HTML code。）

2. Key

3. 区块元素

3.1. 内容目录

在段落中填写 [TOC] 以显示全文内容的目录结构。

3.2. 段落和换行

Return

Shift + Return

3.3. 标题

Header 1
========

Header 2
--------

or

# Header 1
## Header 2
###### Header 6

3.4. 区块引用

Angle brackets > are used for block quotes.
Technically not every line needs to start with a > as long as
there are no empty lines between paragraphs.
Looks kinda ugly though.

Block quotes can be nested.

Multiple Levels

Most markdown syntaxes work inside block quotes.

Here is the code:

> Angle brackets `>` are used for block quotes.  
Technically not every line needs to start with a `>` as long as
there are no empty lines between paragraphs.  
> Looks kinda ugly though.
> > Block quotes can be nested.  
> > > Multiple Levels
>
> Most markdown syntaxes work inside block quotes.
>
> * Lists
> * [Links][arbitrary_id]
> * Etc.

3.5. 列表

Here is the code:

* Lists must be preceded by a blank line (or block element)
* Unordered lists start each item with a `*`
- `-` works too
    * Indent a level to make a nested list
        1. Ordered lists are supported.
        2. Start each item (number-period-space) like `1. `
        42. It doesn't matter what number you use, I will render them sequentially
        1. So you might want to start each line with `1.` and let me sort it out
  1. [x] I can render checkbox list syntax
  1. [ ] I don't support clicking checkboxes directly in the html window

3.6. 代码区块

Inline code is indicated by surrounding it with backticks:
`Inline code`
``Code with `backticks` `` (mind the spaces preceding the final set of backticks)
多段代码换行+三个`

print('a')

多段代码换行+三个~

var s = "JavaScript syntax highlighting";
alert(s);

s = "Python syntax highlighting"
print s

换行+tab

print('This is a code block')

3.7. 分隔线

*** or ---

4. 区段元素

4.1. 链接

uranusjr@gmail.com
<uranusjr@gmail.com>
http://macdown.uranusjr.com
<http://macdown.uranusjr.com>
Macdown Website
[Macdown Website](http://macdown.uranusjr.com "Title") (The title is optional)

4.2. 引用

Make a link [a link][arbitrary_id] then on it's own line anywhere else in the file:
[arbitrary_id]: http://macdown.uranusjr.com "Title"

If the link text itself would make a good id, you can link like this [like this][], then on it's own line anywhere else in the file:
[like this]: http://macdown.uranusjr.com

4.3. 强调

Strong: **Strong** or __Strong__ (Command-B)
Emphasize: *Emphasize* or _Emphasize_[1] (Command-I)

4.4. 图片

![](path/or/url/to.jpg "Optional Title")
![Alt Image Text][image-id]
on it's own line elsewhere:
[image-id]: path/or/url/to.jpg "Optional Title"

4.5. 表格

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

You can align cell contents with syntax like this:

Left Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1

The left- and right-most pipes (|) are only aesthetic, and can be omitted. The spaces don’t matter, either. Alignment depends solely on : marks.

4.6. 脚注

Text prior to footnote reference.[^2]
[^2] Comment to include in footnote.

H~2~O, X~long\ text~

H2O

Xlong text

5. 高级

5.1. 数学

$ 表示行内公式：

质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。

$$ 表示整行公式：

$$E=mc^2$$

访问 MathJax 参考更多使用方法。

5.2. 序列图

主流支持seq，typora支持sequence

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

更多语法参考：序列图语法

5.3. 流程图

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

更多语法参考：流程图语法

5.4. Mermaid

Sequence

%% Example of sequence diagram
  sequenceDiagram

    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end

更多语法参考：Mermaid-Sequence

Flowchart

graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

更多语法参考：Mermaid-Flowchart

Gantt

%% Example with slection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
    
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
    
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
    
        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h
    
        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

更多语法参考：Mermaid-Gantt

6 其它

6.1. 语法表格列表

The following is a list of optional inline markups supported:

Option name Markup Result if enabled
Intra-word emphasis So A*maz*ing So A maz ing
Strikethrough ~~Much wow~~ Much wow
Underline [2] _So doge_ <u>So doge</u>
Quote [3] "Such editor" "Such editor“
Highlight ==So good== ==So good==
Superscript hoge^(fuga) hogefuga
Autolink http://t.co http://t.co
Footnotes [^4] and [^4]: and footnote[^4]

4You don't have to use a number. Arbitrary things like [^footy note4] and [^footy note4]: will also work. But they will render as numbered footnotes. Also, no need to keep your footnotes in order, I will sort out the order for you so they appear in the same order they were referenced in the text body. You can even keep some footnotes near where you referenced them, and collect others at the bottom of the file in the traditional place for footnotes.

Markdown支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

6.2. Jekyll front-matter

---
title: "Macdown is my friend"
date: 2014-06-06 20:00:00
---

6.3. 特殊符号 HTML Entities Codes

© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·

X² Y³ ¾ ¼ × ÷ »

18ºC " '

6.4. Emoji表情 :smiley:

Blockquotes :star:

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:

  1. If Underlines is turned on, _this notation_ will render as underlined instead of emphasized ↩

  2. If Underline is disabled _this_ will be rendered as emphasized instead of being underlined. ↩

  3. Quote replaces literal " characters with html <q> tags. Quote and Smartypants are syntactically incompatible. If both are enabled, Quote takes precedence. Note that Quote is different from blockquote, which is part of standard Markdown. ↩

上一篇下一篇

猜你喜欢

热点阅读