Markdown常用语法及简书图片编辑
一、Markdown常用语法
Markdown 是一种易于阅读、易于撰写的纯文字格式的标记语言,可以转换成HTML,越来越多的人用它写文章。简书就支持markdown,在简书预览模式下写作非常直观高效。
常用的语法包括 标题、列表、引用、链接、图片、粗斜体及代码。
1. 标题
井号表示标题,字号随井号数量增多而变小,一个是一级,最多6级。一般到4级就足够使用了。
标题写法
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
标题显示效果
一级标题
二级标题
三级标题
四级标题
2. 列表
列表分两种,有序列表和无序列表。
有序列表写法
阿拉伯数字+小数点+空格,空格不能丢。而且数字写错也没关系,markdown会自动修正为正确顺序。
1. 第一条
3. 第二条
0. 第三条
8. 第四条
有序列表显示效果
- 第一条
- 第二条
- 第三条
- 第四条
无序列表写法
有3种写法,减号+空格、加号+空格、星号+空格,空格不能丢。两种写法同时用的时候,无序列表的行距不一样。
- 锄禾日当午
- 汗滴禾下土
+ 千山鸟飞绝
+ 万径人踪灭
* 白毛浮绿水
* 红掌拨清波
无序列表显示效果
- 锄禾日当午
- 汗滴禾下土
- 千山鸟飞绝
- 万径人踪灭
- 白毛浮绿水
- 红掌拨清波
列表嵌套写法
子列表前加4个空格。
1. 有序列表第一个:
- 无序列表A
1. A 的有序子列表1
1. A 的有序子列表2
- 无序列表B
2. 有序列表第二个:
列表嵌套显示效果
- 有序列表第一个:
- 无序列表A
- A 的有序子列表1
- A 的有序子列表2
- 无序列表B
- 无序列表A
- 有序列表第二个:
3. 引用
引用写法
> 引用内容
引用内容第二行
> 第三行
>>引用内嵌套内容
引用显示效果
引用内容
引用内容第二行
第三行引用内嵌套内容
4. 链接
链接写法
包含两种,文字链接和网址链接,链接必须添加http:// 。
[谷歌](http://www.google.com)
<http://www.google.com>或http://www.google.com
链接显示效果
谷歌
http://www.google.com或http://www.google.com
5. 图片
插入图片不需要按钮,只需要使用图片MD语法即可,等于在文字链接前面加一个感叹号,方便记忆。
图片写法
图片名称可以为空。
![图片名称](http://xxx.com/abd.jpg)
图片显示效果
6. 粗斜体
粗斜体写法
*我是斜的*
**我是粗的**
***斜加粗***
粗斜体显示效果
我是斜的
我是粗的
斜加粗
7. 代码
代码写法
使用一个或三个 ` 将代码包起来即可。这个符号不是分号,是Esc键下面,感叹号前面的那个键。
hello,world.
class PostsController < ApplicationController
def index
posts = Post.all
render json: posts
end
end
代码块显示效果
hello,world.
class PostsController < ApplicationController
def index
posts = Post.all
render json: posts
end
end
8. 其他语法
换行、分隔符、符号转义、表格
写法
换行:如果另起一行,只需在当前行结尾加 2 个空格,如果是要起一个新段落,只需要空出一行即可。
分隔符:新起一行输入三个减号-或星号*
***
---
* * *
*****
- - -
符号转义:如果需要用到# 等符号,但又不想它被转义,可以在这些符号前加反斜杠,如 # \ 避免被转义。
**加粗加粗** \*\*不想这里的文本被加粗\*\*
表格:一般写文章不常用,使用竖线 | 代表表格框线即可。
| A列 | B列 | C列 | D列 |
|--|--|--|--|
| 2 | 3 |2 | 3 |
| 2 | 3 | 2 | 3 |
| 2 | 3 | 2 | 3 |
| 2 | 3 | 2 | 3 |
显示效果
- 分隔符
- 转义字符
加粗加粗 **不想这里的文本被加粗**
- 表格
A列 | B列 | C列 | D列 |
---|---|---|---|
2 | 3 | 2 | 3 |
2 | 3 | 2 | 3 |
2 | 3 | 2 | 3 |
2 | 3 | 2 | 3 |
二、简书编辑器图片编辑
上传
直接拖拽到编辑区域,支持多张图片同时上传。
修改图片名称和大小
上传至简书的图片地址格式为
![图片名称](http://xxx.com/ab2.jpg)
图片链接的末尾数字就是图片宽度,通过这个数字可以改变图片大小。最佳数字是620。
修改前
![71QDSdukUCL.jpg](xxx.com/ab2.jpg)
修改后
![蒲公英科学绘本](xxx.com/ab2.jpg)
图片排版
如果有多图同行排列的需求,可以结合表格语法实现。
| 左边 | 右边 |
| :--: | :--: |
| ![8801534.jpg](xxx.com/ab1.jpg) | ![蒲公英科学绘本](xxx.com/ab2.jpg)|
图片排版效果
左边 | 右边 |
---|---|