前端开发知识

简书中Markdown使用攻略

2017-05-16  本文已影响569人  毹毹

接触简书也有段时间了,但是一直使用的编辑文档格式是富文本,对于代码格式的显示真的大写的尴尬,今天看了一篇大神的分享,果断设置

编辑器的选择

1 看下富文本和markdown的简单区分:

富文本 markdown
简书的默认编辑器即为「富文本编辑器」,「富文本编辑器」有一条功能栏 Markdown 是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,使我们专心于码字
优点:心理上易入门,操作类似于word 优点:心理上易入门,操作类似于word

2 Markdown相对来说多了列表和表格(代码风格也比较容易结束)

markdown |
----|------
斜体 |删除线| 引用 |标题| 外链
图片| 分割线| 视频| 列表| 表格

3 富文本功能简介

富文本功能简介

富文本由于类似于我们平时常用的编辑器,很容易上手,所以这里不多赘述。

4 Markdown详解

学习使用markdown首先需要记住这几个符号,很多标记都是由下面这几个符号来表示,引导

这几个符号 # * > [] () | - ~ :

4.1标题(#+空格)

在 Markdown 中,你只需要在文本前面加上 # +空格即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题,总共六级,只需要增加 # 即可,标题字号相应降低。例如:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

如下图:


markdown标题形式
4.2列表(-,1.+空格)

无序列表(-+空格):

- 文本1
- 文本2
- 文本3

有序列表(1.+空格)文字前面加上 1. 2. 3. .....就可以了

  1. 文本
  1. 文本
  2. 文本
列表形式
4.3链接和图片(! [] () 感叹号+中括号+小括号)

在 Markdown 中,插入链接不需要其他按钮,你只需要使用 显示文本 这样的语法即可,

例如:

[简书](http://www.jianshu.com)
简书

在 Markdown 中,插入图片不需要其他按钮,你只需要使用 ![](图片链接地址)这样的语法即可,例如:

![](https://img.haomeiwen.com/i259/0ad0d0bfc1c608b6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

图片形式
4.4引用(>+空格)

在我们写作的时候经常需要引用他人的文字,这个时候引用这个格式就很有必要了,在 Markdown 中,你只需要在你希望引用的文字前面加上 > 就好了,例如:

> 说好的幸福呢
说好的幸福呢

引用的案例截图:

引用形式
4.5粗体和斜体(* ,**)

Markdown 的粗体和斜体也非常简单,用两个 *包含一段文本就是粗体的语法,用一个* 包含一段文本就是斜体的语法。例如:

*我是斜体哦*

我是斜体哦
**我是粗体哦**
我是粗体哦

斜体加粗显示为:

***我是斜体+粗体哦***
我是斜体+粗体哦

斜体和粗体
4.6代码引用(`+空格,```+空格)

需要引用代码时,如果引用的语句只有一段,不分行,可以用 ` 将语句包起来。
如果引用的语句为多行,可以将```置于这段代码的首行和末行。
代码引用的案例截图:

代码引用形式
4.7表格(| :- 竖线+冒号+短线 需要换行)

相关代码:

| Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 |

显示如下:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

相关代码:

如下
`dog | bird | cat
----|------|----

foo | foo | foo
bar | bar | bar
baz | baz | baz`

显示效果

dog bird cat
foo foo foo
bar bar bar
baz baz baz

表格的多表现形式

代码如下:
|表格|表格|表格| |:---|:---:|---:| |冒号在左边表示左对齐|冒号两边都有表示居中|冒号在右边表示右对齐|

显示结果:

表格 表格 表格
冒号在左边表示左对齐 冒号两边都有表示居中 冒号在右边表示右对齐
4.8显示链接中带括号的图片

代码如下:
![][1]
[1]: http://latex.codecogs.com/gif.latex?\prod%20\(n_{i}\)+1

4.9分割线,删除线(***三个星号,~ 两个波浪线)

分割线:

代码

***

显示效果:

你以为你是谁,迷路了就算了


好吧,无所谓了,无所谓

删除线

代码
~~左右两个波浪出现删除线,也叫中划线~~

效果显示

左右两个波浪出现删除线,也叫中划线

soAll _

参考文章
简书小白必看,如何优雅而有逼格地写作!
献给写作者的 Markdown 新手指南

上一篇下一篇

猜你喜欢

热点阅读