iOS学习简书 Markdown 编辑器小窝

简书Markdown新手教程

2018-11-30  本文已影响115人  君不器12323

(小白入手必读)

喜欢简书的朋友,每天看着别人写的文章,自己也总会有想去写一些东西的冲动,可是面对简书的文本编辑格式,不少人会望而却步。

我是从三年前就一直关注简书的,也算是老用户了,今天终于决定提起笔开始写作之路。然而要想用简书进行创作,就不能不学习Markdown语法,我这两天在网上查找了一些Markdown语法教程,但并不能解决我书写过程在遇到的所有问题。

所以今天我写下这篇文章,用来给像我一样的小白以指导(本文创作过程中用到的参考同样会附上,以方便大家更快地学习)。


先简单介绍一下Markdown语言

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

由于初始的Markdown语言并不完善,所以Markdown有一系列的衍生版本,用于扩展Markdown的功能(如表格、脚注等)。

这些衍生的版本让Markdown拥有了更多的功能,虽然在一些语法和渲染效果上有改动,但是语法基本上都是相互兼容的。今天我们要讲述的简书编辑器也是衍生版本之一,只不过简书让Markdown语言更加方便实用,这里不得不赞一下幕后的程序员们,O(∩_∩)O哈哈~

当然啦,我们就只是想用这种工具来完成我们的写作,所以很多功能都不是必须要知道的,这里我就只介绍一下写作过程中会用到而且方便使用的集中语法。

好了,不赘述了,赶快进入正文啦!


1.标题


标题是一篇文章必不可少的,也是写作最先接触到的,所以把标题放在第一章节。

例如:
Markdown程序:

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题

得到的渲染结果为:

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

由此例可以看出#符号的个数代表标题的级数,需要三级标题就用三个#号,需要五级标题就用五个#号,以此类推。

(注意!注意!注意!)
#号和标题之间的空格可有可无,不影响效果!

还有一种情况需要特别说明:
为了对称美观,标题后边也可以加空格和#号。

例如:
Markdown语言:

# 这是一级标题 #
## 这是二级标题 ##
### 这是三级标题 ###
### 这是三级标题    ###
### 这是三级标题 ######
### 这是三级标题 ##########

得到的显示为:

这是一级标题

这是二级标题

这是三级标题

这是三级标题

这是三级标题

这是三级标题

标题后空格、#号的添加与否,以及空格和#号个数的多少,均不会影响渲染效果。


2.字体


Markdown语言中的字体的样式主要有正常、倾斜、加粗、加粗倾斜、删除线五种字体样式。
倾斜字体需要在两边各使用一个*或者_
加粗字体需要在两边各使用两个个*
倾斜加粗字体需要在两边各使用三个*
删除线字体需要在两边各使用两个~

例如:
Markdown语言:

This is Normal Type.
*This is Italic Type.*
_This is Italic Type._
**This is Bold Type.**
***This is Italic & Bold Type.***
~~This is Delete Type.~~

得到的显示为:
This is Normal Type.
This is Italic Type.
This is Italic Type.
This is Bold Type.
This is Italic & Bold Type.
This is Delete Type.


3.列表


Markdown支持无序列表有序列表


3.1无序列表和有序列表


3.1.1无序列表

无序列表使用- + *进行列表标记。

例如:
Markdown语言:

- 生命诚可贵,
+ 爱情价更高;
* 若为自由故,
- 两者皆可抛!

得到的显示为:

注意:- + *三种符号是等同的。

3.1.2有序列表

例如:
Markdown语言:

1. 生命诚可贵,
2. 爱情价更高;
3. 若为自由故,
4. 两者皆可抛!

得到的显示为:

  1. 生命诚可贵,
  2. 爱情价更高;
  3. 若为自由故,
  4. 两者皆可抛!

3.1.3有序列表中的无序列表

例如:
Markdown语言:

1. 生命诚可贵,
2. 爱情价更高;
   - 生命诚可贵,
   + 爱情价更高;
3. 若为自由故,
   * 若为自由故,
   - 两者皆可抛!
4. 两者皆可抛!

得到的显示为:

  1. 生命诚可贵,
  2. 爱情价更高;
    • 生命诚可贵,
    • 爱情价更高;
  3. 若为自由故,
    • 若为自由故,
    • 两者皆可抛!
  4. 两者皆可抛!

3.1.4无序列表中的有序列表

例如:
Markdown语言:

- 生命诚可贵,
+ 爱情价更高;
    1. 生命诚可贵,
    1. 爱情价更高;
    1. 若为自由故,
    1. 两者皆可抛!
* 若为自由故,
- 两者皆可抛!

Markdown语言:

- 生命诚可贵,
+ 爱情价更高;
    1. 生命诚可贵,
    2. 爱情价更高;
    3. 若为自由故,
    4. 两者皆可抛!
* 若为自由故,
- 两者皆可抛!

最后得出的渲染效果相同,得到的显示都是:

可以看出:在Markdown语言中,无序列表中的有序列表前的数字序号对列表的渲染效果是没有影响的。

3.1.5有序列表中的有序列表

例如:
Markdown语言:

1. 生命诚可贵,
2. 爱情价更高;
   1. 生命诚可贵,
   2. 爱情价更高;
   3. 若为自由故,
   4. 两者皆可抛!
3. 若为自由故,
4. 两者皆可抛!

得到的显示为:

  1. 生命诚可贵,
  2. 爱情价更高;
    1. 生命诚可贵,
    2. 爱情价更高;
    3. 若为自由故,
    4. 两者皆可抛!
  3. 若为自由故,
  4. 两者皆可抛!

3.1.6无序列表中的无序列表

接下来列举两个文章中常用到的两种无序列表嵌套使用的实例子:

例如:
Markdown语言:

- 生命诚可贵,
+ 爱情价更高;
* - 若为自由故,
- * 两者皆可抛!

得到的显示为:

注意:
上一级和下一级的无序列表混合使用,可以使用在下一级的无序列表前添加三个空格键实现。

例如:
Markdown语言:

- 生命诚可贵,
+ 爱情价更高;
   * 生命诚可贵,
   - 爱情价更高;
      - 若为自由故,
      * 两者皆可抛!
   - 若为自由故,
   * 两者皆可抛!

得到的显示为:


3.2列表缩进


Markdown语法中支持列表项目缩进,只用在第一行内容前使用列表符。

例如:
Markdown语言:

- 莫听穿林打叶声,
何妨吟啸且徐行。
竹杖芒鞋轻胜马,

+ 谁怕?
一蓑烟雨任平生。

得到的显示为:


3.3包含段落的列表缩进


当列表项目中包含多个段落时,每个段落之前都必须缩进4个空格符(一次缩进)。

例如:
Markdown语言:

- 莫听穿林打叶声,
何妨吟啸且徐行。
竹杖芒鞋轻胜马,
一蓑烟雨任平生。

    莫听穿林打叶声,
何妨吟啸且徐行。
竹杖芒鞋轻胜马,
一蓑烟雨任平生

得到的显示为:


3.4包含引用的列表


如果要在列表中进行引用,需要使用>符号进行实现:

例如:
Markdown语言:

- 莫听穿林打叶声,
何妨吟啸且徐行。
竹杖芒鞋轻胜马,
一蓑烟雨任平生。
> 莫听穿林打叶声,
何妨吟啸且徐行。
竹杖芒鞋轻胜马,
一蓑烟雨任平生

得到的显示为:

莫听穿林打叶声,
何妨吟啸且徐行。

竹杖芒鞋轻胜马,
一蓑烟雨任平生


3.5一个特殊情况


这里讲一下\符号的特殊使用(避免在行首出现'数字-句点-空白'的情况,需要在数字之后加上\符号)。

例如:
Markdown语言:

2008. Nowadays, people of all strata begin to ...

2008\. Nowadays, people of all strata begin to ...

得到的显示为:

  1. Nowadays, people of all strata begin to ...

2008. Nowadays, people of all strata begin to ...


4.引用和嵌套


4.1引用


引用是指在说话或写作中引用现成的话,如诗句、格言、成语等,以表达自己思想感情的修辞方法。

在书本的行文中用引号(“ ”和' ')来表示引用,相应的,在Markdown语言中也给了特殊的语言以及渲染效果来表示引用。

例如:
Markdown语言:

> 我愿意是急流,
山里的小河,
在崎岖的路上,
岩石上经过……

得到的显示为:

我愿意是急流,
山里的小河,
在崎岖的路上,
岩石上经过……

在这里,Markdown语言允许我们偷懒,仅需要在第一行中使用>符号就可以一直引用,而不用在每一行引用的内容前都添加>符号,大大方便了我们的使用。同理,>符号后的空格可有可无。

那么,如果想结束引用,该怎么办呢?
答案:可以使用空行来结束内容的引用。

例如:
Markdown语言:

> 我愿意是急流,
山里的小河,

在崎岖的路上,
岩石上经过……

得到的显示为:

我愿意是急流,
山里的小河,

在崎岖的路上,
岩石上经过……


4.2嵌套{#index}


嵌套,指在已有的表格、图像或图层中再加进去一个或多个表格、图像或图层的方法,简单可理解为镶嵌、套用。在Markdown语言中,嵌套表示在引用的内容中引用另外的内容。

例如:
Markdown语言:

> 我愿意是急流,
山里的小河,
> > 在崎岖的路上,
岩石上经过……
> > > 只要我的爱人
是一条小鱼,
> > > > > > > 在我的浪花中
快乐地游来游去

得到的显示为:

我愿意是急流,
山里的小河,

在崎岖的路上,

岩石上经过……

只要我的爱人
是一条小鱼,

在我的浪花中
快乐地游来游去

注意:
如果想结束当前引用返回到上一级的引用,可以先使用空行来结束当前引用,再使用与想返回一级相同数量的>符号来实现。

例如:
Markdown语言:

> 我愿意是急流,
山里的小河,
> > 在崎岖的路上,
岩石上经过……
> > > 只要我的爱人
是一条小鱼,
> > > > 在我的浪花中
快乐地游来游去

> > 在我的浪花中
快乐地游来游去

得到的显示为:

我愿意是急流,
山里的小河,

在崎岖的路上,
岩石上经过……

只要我的爱人
是一条小鱼,

在我的浪花中
快乐地游来游去

在我的浪花中
快乐地游来游去


5.超链接和锚点


Markdown语法提供了三种超链接形式:行内式、参考式和自动链接。


5.1行内式超链接


行内式超链接形式是最常用的,语法如下(链接标题一项可有可无):

[链接文字](链接地址 "链接标题")

链接地址和链接标题之间有一个空格。

例如:
Markdown语言:

欢迎访问[微博](https://weibo.com/);
快速进入[简书](https://www.jianshu.com/ "简书"),开启你的创作;
欢迎来到[知乎](https://www.zhihu.com/ "知乎"),发现更大的世界。

得到的显示为:
欢迎访问微博
快速进入简书,开启你的创作;
欢迎来到知乎,发现更大的世界。


5.2参考式超链接


参考式超链接分为两种,一种是链接文字和链接标记不同,一种是链接文字本身作为链接标记。

链接文字和链接标记不同时,语法分为两部分,Markdown语法如下:
[链接文字][链接标记]
[链接标记]:链接地址 "链接标题"

链接文字本身作为链接标记时,语法也分为两部分,如下:
[链接文字][]
[链接文字]:链接地址

例如:
Markdown语言:

每天我必须会访问的三个网站[简书][1]、[微博][2]、[知乎][3],
除了这三个必须访问的网站,还会访问[喜马拉雅FM][]、[书法之家][]等。

[1]:https://www.jianshu.com/
[2]:https://www.weibo.com/ "微博"
[3]:https://www.zhihu.com/ "知乎"
[喜马拉雅FM]:https://www.ximalaya.com/
[书法之家]:http://www.sfzj123.com/m

得到的显示为:

每天我必须会访问的三个网站简书微博知乎
除了这三个必须访问的网站,还会访问喜马拉雅FM书法之家等。

注意:和所有编程语言一样,Markdown语法中所有的字母和符号都必须是半角符号。


5.3自动链接


自动链接常用来处理网址和邮箱地址等,只需要用<>将网址或者邮箱包括起来就可以了。

例如:
Markdown语言:

<https://www.jianshu.com/>
<https://www.weibo.com/>
<gyf_seu@163.com>

得到的显示为:

https://www.jianshu.com/
https://www.weibo.com/
gyf_seu@163.com


6.分割线


你可以在一行中使用三个以上的*-_来建立一个分割线,行内不能有其他字符。也可以在这三种符号之间加入空格,不影响渲染效果。

例如:
Markdown语言:


---

- - - 

--------

***

* * *

___

_ _ _ _ _

得到的显示为:








这些不同的语法得到的渲染效果都是相同的。


7.图像


简书Markdown图片的创建方式与超链接相似,最常用的方法就是行内式。

行内式的Markdown语法如下:
[图片上传失败...(image-a73492-1543568295086)]

例如:
行内式Markdown语言:

![星空.jpg](https://img.haomeiwen.com/i1401287/46f6c1b0742b2059.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240  "星空 梵高")

得到的显示为:

星空.jpg

8.表格


表格语法说明:

  • 1. 第一行为表头,第二行为分割行(用来分开表头和表格正文行),第三行及以后为正文行;
  • 2. 列与列之间使用符号|隔开;
  • 3. 第二行可以为不同的列指定对齐方向。

例如:
参考式Markdown语言:

|姓名|性别|年龄| 
|-  | :-:| -----| 
|小明|男|5| 
|大黄|男|6| 
|小红|女|4| 
和:
|项目|价格|数量|
|---|:--:|--:|
|计算机|\$1600|5|
|手机|\$12|12|
|管线|\$1|234|

得到的显示为:

姓名 性别 年龄 出生地
小明 5 北京
大黄 6 上海
小红 4 深圳

和:

项目 价格 数量
计算机 $1600 5
手机 $12 12
管线 $1 234

需要值得说明的是:

  • 1. 两个符号|之间,除了需要显示的内容外,可以有空格,空格不影响渲染效果;
  • 2. 第二行使用:来指定列的对齐方向,默认居左显示。

9.待办事宜Todo列表


Markdown语言中可以使用带有[ ][x](未完成或已完成)的列表语法撰写一个待办事宜列表,并且支持子列表嵌套以及混用Markdown语法.

例如:
Markdown语言:


- [ ] **今天的工作**
    - [ ] 做office
    - [ ] 画图
    - [x] 办签证 
    - [x] 办理护照
        - [x] 拍照
        - [x] 公证  

得到的显示为:

注意:语法中可以使用4个空格(一次缩进)来表示上下级从属关系。


10.注脚


在需要添加注脚的文字后边使用[^keyword]来添加注脚。

语法如下:
[^keyword1]
[^keyword2]
[^keyword3]

[^keyword1]:注脚释义。

[^keyword2]:注脚释义。

[^keyword3]:注脚释义。

例如:
Markdown语言:


这是一个注脚[^footnote]的样例。
这是第二个注脚[^footnote2]的样例。
使用Markdown[^2]可以提高书写效率。

[^footnote]:这个注脚只是个例子;

[^footnote2]:这个注脚也是个例子;

[^2]:这个注脚还是个例子;  

得到的显示为:

这是一个注脚[1]的样例。
这是第二个注脚[2]的样例。
使用Markdown[3]可以提高书写效率。

注意:

  1. 注脚前必须有对应的注脚名字(keyword);
  2. 两个注脚之间必须要空一行,否则会失效;
  3. 所有的注脚在渲染结果中都会被自动移到文末。

11.LaTeX公式


11.1行内公式

在Markdown语言中,用$来表示行内公式,例如质能守恒方程可以用一个很简洁的方程式来表达。

例如:
Markdown语言:

$E=mc^2$   

得到的显示为:

E=mc^2

11.2整行公式

Markdown语言中用$$表示整行公式.

例如:
Markdown语言:

$$\sum_{i=1}^n a_i=0$$

$$f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$

$$\sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k}$$  

得到的显示为:
\sum_{i=1}^n a_i=0

f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2

\sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k}

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


12.代码


Markdown支持四十一种编程语言的语法高亮的显示,行号显示。

12.1单行代码

单行代码的显示,需要借助 ` 符号来实现,在单行代码的两段分别使用一个。

例如:
Markdown语言:

`print 'I'm a good boy.`

得到的显示为:

print 'I'm a good boy.

12.2代码块

代码块的显示需要借助三个 ` 符号实现,即在代码块的前后分别使用三个。

非代码示例:

$ sudo apt-get install vim-gnome

Python 示例:

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

JavaScript 示例:

/**
* nth element in the fibonacci series.
* @param n >= 0
* @return the nth element, >= 0.
*/
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}
document.write(fib(10));

由于简书是Markdown原生编辑器衍生出来的一个版本,所以简书编辑器对语法进行了适当的修改,使得简书编辑器更利于文章创作。

很多Markdown语法在简书编辑器中渲染不了,所以本文中只列举了最常用最方便的语法。

时间仓促,多有不足,欢迎大家指正!


  1. 这个注脚只是个例子;

  2. 这个注脚也是个例子;

  3. 这个注脚还是个例子;

上一篇下一篇

猜你喜欢

热点阅读