markdwon语法与Typora

　　我也是在视频中看到别人的操作，不知道这是个什么玩意？ 直到无意间看到了markdown，才意识到其他人用的是markdown。

       当你看到一个人使用类似

　　![blockchain](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/ u=702257389,1274025419&fm=27&gp=0.jpg "区块链")

  的语法插入了一张图片，使用类似   

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

   的语法生成了一段高亮语法显示的代码块，他可能使用的就是Markdown。

 

        我不打算去学markdwon语法与Typora，只是找了2篇还算不错的文章，先扫扫盲，真的有用到的时候再去学习一下。

　　Markdown基本语法  原文：https://www.jianshu.com/p/335db5716248

提到Markdown，很多人首先想到的是简单、Easy等等。的确，Markdown为简单而生。Markdown是由一个叫 JOHN GRUBER 的哥们发明的，它的语法用一篇文章就可以说完。不相信吗？让我们来试试看...

基础语法

标题

Markdown支持6种级别的标题，对应html标签 h1 ~ h6

# h1
## h2
### h3
#### h4
##### h5
###### h6

以上标记效果如下：

h1

h2

h3

h4

h5
h6

除此之外，Markdown还支持另外一种形式的标题展示形式，其类似于 Setext 标记语言的表现形式，使用下划线进行文本大小的控制

这是一级标题
===
这是二级标题
---

使用这种方式处理标题仅有两种表现形式，即一级标题和二级标题。遗憾的是，简书并不支持这种语法。因此，我们用一张图来展示效果：


 
 

这种处理方式在Github的一些开源工程上面比较常见，显而易见的缺点是：文字大小控制级别有限。

段落及区块引用

需要记住的是，Markdown其实就是一种易于编写的普通文本，只不过加入了部分渲染文本的标签而已。其最终依然会转换为html标签，因此使用Markdown分段非常简单，前后至少保留一个空行即可。

而另外一个比较常见的需求就是，我们可能希望对某段文字进行强调处理。Markdown提供了一个特殊符号>用于段首进行强调，被强调的文字部分将会高亮显示

> 这段文字将被高亮显示...

以上标记显示效果如下：

这段文字将被高亮显示...

插入链接或图片

Markdown针对链接和图片的处理也比较简单，可以使用下面的语法进行标记

[点击跳转至百度](http://www.baidu.com)
![图片](https://upload-images.jianshu.io/upload_images/703764-605e3cc2ecb664f6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

以上标记显示效果如下：

点击跳转至百度

 
图片

 

注： 引用图片和链接的唯一区别就是在最前方添加一个感叹号。

列表

Markdown支持有序列表和无序列表两种形式：

  • 无序列表使用*或+或-标识
  • 有序列表使用数字加.标识，例如：1.
* 黄瓜
* 玉米
* 茄子

+ 黄瓜
+ 玉米
+ 茄子

- 黄瓜
- 玉米
- 茄子

1. 黄瓜
2. 玉米
3. 茄子

以上标记显示效果如下：

  • 黄瓜
  • 玉米
  • 茄子
  • 黄瓜
  • 玉米
  • 茄子
  • 黄瓜
  • 玉米
  • 茄子
  1. 黄瓜
  2. 玉米
  3. 茄子

注：这里比较有趣的地方是，对于有序列表，Markdown将只关注你的第一个项目的数字编号。例如：如果第一个项目编号是3，以此类推，第二个项目应该是4，最终将显示为3、4、5。而如果你指定了第一个编号，后面的编号指定错误也没有关系，Markdown将只在乎你的第一个项目编号。

使用列表的一些注意事项

如果在单一列表项中包含了多个段落，为了保证渲染正常，*与段落首字母之间必须保留四个空格

*    段落一

     小段一
*    段落二

     小段二

以上标记显示效果如下：

  • 段落一

    小段一

  • 段落二

    小段二

另外，如果在列表中加入了区块引用，区域引用标记符也需要缩进4个空格

* 段落一
    > 区块标记一
* 段落二
    > 区块标记二
  • 段落一

    区块标记一

  • 段落二

    区块标记二

注：记住一个原则，如果在和列表配合使用的时候出现了问题，就缩进一次，四个空格或者一个制表符代表一次缩进。如果一次缩进没有解决问题，那就两次。

分隔线

有时候，为了排版漂亮，可能会加入分隔线。Markdown加入分隔线非常简单，使用下面任意一种形式都可以

***
---

产生分隔线的语法要求比较松，符号之间添加空格也可以。

强调

有时候，我们希望对某一部分文字进行强调，使用*或_包裹即可。使用单一符号标记的效果是斜体，使用两个符号标记的效果是加粗

*这里是斜体*
_这里是斜体_

**这里是加粗**
__这里是加粗__

这里是斜体
这里是斜体

这里是加粗
这里是加粗

高级用法

插入代码块

Markdown在IT圈子里面比较流行的一个重要原因是，它能够轻松漂亮地插入代码。

方法是，使用反引号`进行包裹即可。如果是行内代码引用，使用单个反引号进行包裹

这是一段var x = 3行内代码

如果插入一整段代码，需要至少使用两个以上反引号进行包裹， 看效果：

fun (x: Int, y: Int): Int {
  return x + y
}

注：很多人不知道怎么输入反引号。在英文模式下，找到键盘最左侧esc键下面的第一个键点击即可。

插入表格

表格是Markdown语法中比较复杂的一个，其语法如下：

表头|条目一|条目二
:---:|:---:|:---:
项目|项目一|项目二

以上标记显示效果如下：

表头条目一条目二
项目 项目一 项目二

注：三个短斜杠左右的冒号用于控制对齐方式，只放置左边冒号表示文字居左，只放置右边冒号表示文字居右，如果两边都放置冒号表示文字居中。

其它

特殊符号处理

Markdown使用反斜杠\插入语法中用到的特殊符号。在Markdown中，主要有以下几种特殊符号需要处理：

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

例如，如果你需要插入反斜杠，就连续输入两个反斜杠即可：\\ => \ 。

注：在内容中输入以上特殊符号的时候一定要注意转义，否则将导致内容显示不全，甚至排版混乱。

如何给文字上色

使用Markdown的同学最郁闷的地方恐怕就是不能给文字添加颜色了。事实上，Markdown的最初目标就是为纯写作而生的。因此，它并没有考虑文字颜色这一点。所以，单纯使用Markdown设置文字颜色已经做不到了。但你可以这样做：

  1. 先用Markdown编辑完成
  2. 导出为html，在需要上色的部分手动添加标签<font color='#ff0000'></font>保存即可。

Markdown软件推荐

如果你是一个Mac用户，我推荐你使用开源的 MacDown：

 
Macdown

 

如果你愿意花钱的话，一些收费产品其实更好。例如：Byword，Ulysses，Typora等等都很不错。

日常使用，我就用Macdown。写书，我就用Ulysses。

简单总结

Markdown是一门比html更简单的标记语言，其主要用于日常写作。最终通过相应的编辑器或者脚本转换成html用于页面渲染。如果你是一个作家，或者是一个程序员，Markdown对你来说是一门必备的技能。掌握Markdown真的很简单，如你所见，这篇文章使用了这么短的篇幅就已经将Markdown的语法全部介绍完了。

不过，由于Markdown基础语法的限制，出现了一些针对Markdown语法的加强版本。它支持的语法特性更多，但这不是我们这篇文章的讨论范围。如果你希望快速掌握Markdown，很简单，动起来吧！


　

Typora

平台：多平台（macOS、Windows、linux）

这是一款极致简洁的 markdown 编辑器。简洁到什么程度呢？它甚至连编辑工具栏都没有！

Typora Markdown 语法   原文链接： https://www.jianshu.com/p/aad81020f0e6

第一章 块元素（Block Elements）

1.1 段落和行结束（Paragraph and line breaks）

大多数 markdown 解析器忽略单行分隔符，为了上其他 markdown 解析器识别行分隔符，可以在末尾使用两个空格，或者插入 </br>

1.2 标题（Headers）

标题有6个等级，用 # 号表示

# 标题1
## 标题2
### 标题3
#### 标题4
##### 标题5
###### 标题6

1.3 引用（Blockquotes）

使用 > 字符，表示引用

> This is a blockquote with two paragraphs. This is first paragraph.
>
> This is second pragraph.Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.



> This is another blockquote with one paragraph. There is three empty line to seperate two blockquote.

This is a blockquote with two paragraphs. This is first paragraph.

This is second pragraph.Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
This is another blockquote with one paragraph. There is three empty line to seperate two blockquote.

1.4 列表（Lists）

输入 * 将会创建一个无序列表，也可以使用 + 或者 -

* Red
* Green
* Blue
  • Red
  • Green
  • Blue

输入 1. 将会创建有序列表

1.  Red
2.  Green
3.  Blue
  1. Red
  2. Green
  3. Blue

1.5 任务列表（Task List）

用 [ ] 或者 [X] 未完成，完成）表示列表，通过点击复选框来更改状态（完成/未完成）

- [ ] a task list item
- [ ] list syntax required
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed
 
1.5任务列表.png

1.6 代码块（Code Blocks）

使用 ``` <语言> 按回车键，将会对代码进行高亮

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

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

1.7 数学（Math Blocks）

可以使用MathJax呈现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}
$$

\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}

1.8 表格（Tables）

使用 | First Header | Second Header | 按回车键，将会创建2列的表格

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

还可以使用 : 号，来设置文字对齐方式

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

1.9 脚注（Footnotes）

使用 [^footnote] 创建脚注.
[^footnote]: Here is the *text* of the **footnote**.
然后，可以把鼠标停留在脚注中，查看内容

You can create footnotes like this[1].

生产环境，可以像这样使用
You can create footnotes like this[^1].
[^1]: Here is the *text* of the **footnote**.

You can create footnotes like this[2].

1.10 横线（Horizontal Rules）

输入 *** 或者 --- 后，按回车键

---

1.11 目录（Table of Contents -- TOC）

输入 [toc] ，按回车键

 
1.11目录.png

第二章 Span 元素（Span Elements）

2.1 链接（Links）

文字描述包含在 [] 内，链接地址包含在 () 内，() 要紧接着 [] 后面

This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.

This is an example inline link.

This link has no title attribute.

2.1.1 引用链接（Reference Links）

引用链接样式，使用两个 []

This is [an example][id] reference-style link.

Then, anywhere in the document, you define your link label like this, on a line by itself:

[id]: http://example.com/  "Optional Title Here"

This is an example reference-style link.
Then, anywhere in the document, you define your link label like this, on a line by itself:

Type 简化了使用方法，如下

[Bing][]
And then define the link:

[Bing]: http://bing.com/

Bing
And then define the link:

2.2 图片（Images）

在链接格式前面添加 ! ，如下

![timg.jpg](https://upload-images.jianshu.io/upload_images/6226097-1613f3353bb9ec89.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
timg.jpg

2.3 强调（Emphasis）

对应 HTML 的 <em> 标签

*single asterisks*

_single underscores_

single asterisks
single underscores

如果像使用 * 号，在 * 号前使用 \

\*this text is surrounded by literal asterisks\*

*this text is surrounded by literal asterisks*

2.4 加粗（Strong）

**double asterisks**

__double underscores__

double asterisks
double underscores

2.5 代码（Code）

在文章中现实代码，用 ` 号表示

Use the `printf()` function.

Use the printf() function.

2.6 删除线（Strikethrough）

~~Mistaken text.~~

Mistaken text.

2.7 下划线（Underlines）

下划线由 HTML 提供

<u>Underline</u>
 
2.7下划线.png

2.8 Emoji 表情（Emoji）

用两个 : 号包含单词，或者在 编辑 -> 表情与符号 中选择

:happy:
 
2.8Emoji.png

2.9 内联数学（Inline Math）

这个功能默认是关闭的，如果要打开这个功能（以 Mac 版本为例），选择 Typora -> 偏好设置 -> markdown 标签，勾选内联公式复选框

$\lim_{x \to \infty} \exp(-x) = 0$

下面是简书风格，typora 与之类似
\lim_{x \to \infty} \exp(-x) = 0

2.10 下表（subscript）

这个功能默认是关闭的，如果要打开这个功能（以 Mac 版本为例），选择 Typora -> 偏好设置 -> markdown 标签，勾选下标复选框

H~2~O

H2O

2.11 上标（Superscript）

这个功能默认是关闭的，如果要打开这个功能（以 Mac 版本为例），选择 Typora -> 偏好设置 -> markdown 标签，勾选上标复选框

X^2^

X2

2.12 高亮（Highlight）

这个功能默认是关闭的，如果要打开这个功能（以 Mac 版本为例），选择 Typora -> 偏好设置 -> markdown 标签，勾选高亮复选框

==highlight==
 
2.12高亮.png

第三章 HTML

可以使用 HTML 样式来写 Markdown，比如

<span style="color:red">this text is red</span>
 
3.1嵌入内容.png

3.1 嵌入内容（Embed Contents）

<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>
 
3.1.png

3.2 视频（Video）

<video src="xxx.mp4" />

附录 A 官方文档

Typora 官方文档

附录 B Markdown 文档

简书 Markdown 语法

  1. Here is the text of the footnote. ↩

  2. 这里是脚注 1 的内容。. ↩

　　

 

       

 

posted on 2019-03-17 18:09  lnlvinso  阅读(848)  评论(1)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 lnlvinso
Powered by .NET 8.0 on Kubernetes