Typora Markdown 参考

2019-04-03  本文已影响0人  大漠白杨JS

概览Overview

MarkdownDaring Fireball创建; 原始指南就在这里。但是,它的语法因不同的解析器或编辑器而异。Typora正在用于GitHub Flavored Markdown

[TOC]

块元素

段落和换行符

段落只是一行或多行连续的文本。在markdown源代码中,段落由两个或多个空行分隔。在Typora中,您只需要一个空行(按Return一次)即可创建一个新段落。

Shift+ Return可创建单个换行符。大多数其他markdown解析器将忽略单换行符,因此为了使其他markdown解析器识别换行符,您可以在行的末尾留下两个空格,或者插入<br/>

标题

标题use 1-6 hash (#) characters at the start of the line, corresponding to header levels 1-6. For example:

在行的开关使用1-6个#字符,对应标题级别1-6。例如:

# This is an H1

## This is an H2

###### This is an H6

在Typora中,输入'#'后跟标题内容,Return按键将创建标题。

引用文字

Markdown使用电子邮件样式>字符进行块引用。它们表示为:

> 这是一个包含两段的块引用。这是第一段。
>
> 这是第二段。 Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.



> 这是另一个带有一个段落的块引用。有三个空行分隔两个块引用。

在Typora中,输入'>'后跟您的引用内容将生成一个引用块。Typora将为您插入正确的“>”或换行符。通过添加额外级别的“>”嵌套块引号(另一个块引用内的块引用)。

清单

输入* list item 1将创建一个无序列表 - *符号可以替换为+-

输入1. list item 1将创建一个有序列表 - 其降序源代码如下:

## un-ordered list
*   Red
*   Green
*   Blue

## ordered list
1.  Red
2.  Green
3.  Blue

任务列表

任务列表是标记为[]或[x](未完成或完成)项目的列表。例如:

- [ ] a task list item
- [ ] list syntax required
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed

您可以通过单击项目前面的复选框来更改完成/未完成状态。

(围栏)代码块

Typora仅支持GitHub Flavored Markdown中的围栏。不支持markdown中的原始代码块围栏。

使用围栏很简单:输入``` 之后按回车键,在```之后添加一个可选的语言标识符,我们将通过语法高亮显示它:

Here's an example:

​```
function test() {
  console.log("notice the blank line before this function?");
}
​```

syntax highlighting:
​```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
​```

数学块

您可以使用MathJax渲染LaTeX数学表达式。

要添加数学表达式,请输入$$并按“回车”键。这将触发一个接受Tex / LaTex源的输入字段。例如:

\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix}

在markdown源文件中,math块是由一对'$$'标记包装的LaTeX表达式:

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$

你可以在这里找到更多细节。

表格

输入| First Header | Second Header |return按键。将创建一个包含两列的表。

创建表后,将焦点放在该表上将打开表格的工具栏,您可以在其中调整表格,对齐或删除表格。您还可以使用上下文菜单来复制和添加/删除单个列/行。

表的完整语法如下所述,但没有必要详细了解完整语法,因为表的markdown源代码是由Typora自动生成的。

在markdown源代码中,它们看起来像:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

您还可以在表格中包含内联Markdown,例如链接,粗体,斜体或删除线。

最后,通过在标题行中包含冒号(:),您可以将该列中的文本定义为左对齐,右对齐或居中对齐:

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

最左侧的冒号(:)表示左对齐的列; 最右侧的冒号(:)表示右对齐的列; 两侧的冒号(:)表示中心对齐的列。

脚注

您可以这样创建脚注[^脚注]

[^脚注]: 这儿 是**脚注**的文本

将产生:

你可以这样创建脚注[1]

将鼠标悬停在“脚注”上标上可查看脚注的内容。

水平分割线

在空行上输入***---按下return将绘制一条水平线。


YAML Front Matter

Typora现在支持YAML Front Matter。在文章顶部输入---,然后按Return以引入元数据块。或者,您可以从Typora的顶部菜单中插入元数据块。

目录(TOC)

输入[toc]Return按键,创建一个“目录”节。TOC从文档中提取所有标题,并在增加/修改文档内容时自动更新其目录内容。

Span 元素

Span类型将在键入后立即解析和呈现。将光标移动到这些span元素的中间会将这些元素扩展为markdown源。下面是每个span元素的语法说明。

链接

Markdown支持两种链接样式:内联和引用。

在这两种样式中,链接文本由[方括号]分隔。

要创建内联链接,请在链接文本的结束方括号[ ]后立即使用一组常规括号()。在括号内,将URL指向要指向的链接,以及链接的可选标题,标题用引号括起来。样式[ ]( ),例如:

这是带标题的 [an example](http://example.com/ "Title") 内联链接.

[This link](http://example.net/) 无title属性.

将产生:

这是 示例 行内链接. (<p>This is <a href="http://example.com/" title="Title">)

此链接 没有title属性. (<p><a href="http://example.net/">This link</a> has no)

内部链接

您可以将href设置为标题,这将创建一个书签,允许您在单击后跳转到该部分。例如:

命令(在Windows上:Ctrl)+单击此链接将跳转到标题块元素。要查看如何编写,请移动光标或单击该按钮以按下该键以将元素展开为markdown源。

参考链接

参考样式链接使用第二组方括号,在其中放置您选择的标签以标识链接:

这是[示例][id] 参考样式链接.

然后,在文档中的任何位置,您可以单独在一行上定义链接标签,如下所示:

[id]: http://example.com/  "这里是可选标题属性"

在Typora中,它们将被渲染为:

这是示例 参考样式链接.

隐式链接名称快捷方式允许您省略链接的名称,在这种情况下,链接文本本身将用作名称。只需使用一组空的方括号 - 例如,将“Google”字词链接到google.com网站,您只需编写:

[Google][]
然后定义链接

[Google]: http://google.com/

在Typora中,单击该链接将展开它以进行编辑,并且Ctrl+Click在Web浏览器中打开超链接。

网址URLs

Typora允许您将URL作为链接插入,用<括号括起来>

<i@typora.io> 成为i@typora.io.

Typora还会自动链接标准网址。例如: www.google.com.

图片Images

图像具有与链接类似的语法,但它们在链接开始之前需要额外的字符!。插入图像的语法如下所示:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

您可以使用拖放操作从图像文件或Web浏览器插入图像。您可以通过单击图像来修改markdown源代码。如果使用拖放操作添加的图像与您当前正在编辑的文档位于同一目录或子目录中,则将使用相对路径。

如果您使用markdown构建网站,则可以用YAML Front Matters中的 typora-root-url属性,在本地计算机上为要预览的图像指定URL前缀。例如,在YAML Front Matters中输入typora-root-url:/User/Abner/Website/typora.io/,那么[图片上传失败...(image-dae27-1554293656078)]将作为[图片上传失败...(image-a26c4a-1554293656078)]在Typora中处理。

你可以在这里找到更多细节。

强调Emphasis

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. Text wrapped with one * or _ will be wrapped with an HTML <em> tag. E.g:

Markdown将星号(*)和下划线(_)视为强调的指示器。包装在*_中的文本将用HTML <em>标签包装。例如:

*单星号*

_单下划线_

输出:

单星号

单下划线

GFM将忽略单词中的下划线,这通常用于代码和名称,如下所示:

wow_great_stuff

do_this_and_do_that_and_another_thing.

要在其他地方成对使用*或_,可以反斜杠转义:

\*this text is surrounded by literal asterisks\*

Typora建议使用*符号表示强调。

加粗Strong

A double * or _ will cause its enclosed contents to be wrapped with an HTML <strong> tag, e.g:

两个 *_将导致其包含的内容用HTML <strong>标记包装,例如:

**double asterisks**

__double underscores__

输出t:

双星号

双下划线

Typora建议使用**符号。

代码Code

要指示代码的内联,请使用反引号(`)进行包装。与预格式化的代码块不同,内联代码表示正常段落中的代码。例如:

Use the `printf()` function.

将产生:

使用printf() 函数.

删除线Strikethrough

GFM添加语法来创建删除线文本,标准Markdown中缺少该文本。

~~Mistaken text.~~ 变成Mistaken text.

下划线Underlines

下划线由原始HTML提供支持。

<u>Underline</u> 变成 <u>Underline</u>.

表情符号Emoji :smile:

使用语法输入表情符号:smile:

用户可以通过ESC按键触发表情符号的自动完成建议,或者在首选项面板上启用后自动触发表情符号。此外,在菜单栏(macOS)中转到Edit- > 也可以支持直接输入UTF-8表情符号字符Emoji & Symbols

内联数学公式Inline Math

要使用此功能,请先在偏好设计面板 - > Markdown选项卡中启用它。然后,用$包装TeX命令。例如:$\lim_{to \infty} \exp(-x)=0$ 将被作为LaTeX命令渲染为公式:lim_{to \infty} \exp(-x)=0

要触发内联数学公式的内联预览:输入“$”,然后ESC按键,然后输入TeX命令。

你可以在这里找到更多细节。

下标Subscript

要使用此功能,请先在偏好设置面板 - > Markdown选项卡中启用它。然后,用于~包装下标内容。例如:H~2~OX~long\ text~/ H2O xlong text

上标Superscript

要使用此功能,请先在偏好设置面板 - > Markdown选项卡中启用它。然后,^用来包装上标内容。例如:X^2^。x2

突出Highlight

要使用此功能,请先在偏好设置面板 - > Markdown选项卡中启用它。然后,用于==包装高亮内容。例如:==highlight==。==highlight==

HTML

您可以使用HTML来设置纯Markdown不支持的内容。例如,用于<span style="color:red">this text is red</span>添加红色文本。<span style="color:red">this is red</span>

嵌入内容Embed Contents

有些网站提供基于iframe的嵌入代码,您也可以将其粘贴到Typora中。例如:

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

视频Video

您可以使用<video>HTML标记嵌入视频。例如:

<video src="xxx.mp4" />

其他HTML支持

你可以在这里找到更多细节。

<div>
<i class="sprite sprite-github"></i>
<i class="sprite sprite-gmail"></i>
<i class="sprite sprite-linkedin"></i>
<i class="sprite sprite-stackoverflow"></i>
<i class="sprite sprite-tumblr"></i>
<i class="sprite sprite-twitter"></i>
</div>
<style>

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: inline-block;
}

.sprite-github {
    width: 30px;
    height: 30px;
    background-position: -5px -5px;
}

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}

.sprite-linkedin {
    width: 30px;
    height: 30px;
    background-position: -5px -45px;
}

.sprite-stackoverflow {
    width: 30px;
    height: 30px;
    background-position: -45px -45px;
}

.sprite-tumblr {
    width: 30px;
    height: 30px;
    background-position: -85px -5px;
}

.sprite-twitter {
    width: 30px;
    height: 30px;
    background-position: -85px -45px;
}

</style>

  1. 这儿是脚注文本,生成网页时将在页末生成此文字。

上一篇下一篇

猜你喜欢

热点阅读