Markdown常用语法及简书编辑器图片编辑

作者: 短暂瞬间 | 来源:发表于2017-10-28 15:42 被阅读238次

第12篇

一、Markown常用语法

Markdown 是一种易于阅读、易于撰写的纯文字格式的标记语言,可以转换成HTML,越来越多的人用它写文章。简书就支持markdown,在简书预览模式下写作非常直观高效。

常用的语法包括 标题、列表、引用、链接、图片、粗斜体及代码。


1. 标题

井号表示标题,字号随井号数量增多而变小,一个是一级,最多6级。一般到4级就足够使用了。

标题写法

# 一级标题
## 二级标题
### 三级标题
#### 四级标题

标题显示效果

一级标题

二级标题

三级标题

四级标题


2. 列表

列表分两种,有序列表和无序列表。

有序列表写法

阿拉伯数字+小数点+空格,空格不能丢。而且数字写错也没关系,markdown会自动修正为正确顺序。

1. 第一条
3. 第二条
0. 第三条
8. 第四条

有序列表显示效果

  1. 第一条
  2. 第二条
  3. 第三条
  4. 第四条

无序列表写法

有3种写法,减号+空格、加号+空格、星号+空格,空格不能丢。两种写法同时用的时候,无序列表的行距不一样。

- 锄禾日当午
- 汗滴禾下土
+ 千山鸟飞绝
+ 万径人踪灭
* 白毛浮绿水
* 红掌拨清波

无序列表显示效果

  • 锄禾日当午
  • 汗滴禾下土
  • 千山鸟飞绝
  • 万径人踪灭
  • 白毛浮绿水
  • 红掌拨清波

列表嵌套写法

子列表前加4个空格。

1. 有序列表第一个:
    - 无序列表A
        1. A 的有序子列表1
        1. A 的有序子列表2
    - 无序列表B
2. 有序列表第二个:

列表嵌套显示效果

  1. 有序列表第一个:
    • 无序列表A
      1. A 的有序子列表1
      2. A 的有序子列表2
    • 无序列表B
  2. 有序列表第二个:

3. 引用

引用写法

> 引用内容
引用内容第二行
> 第三行
>>引用内嵌套内容

引用显示效果

引用内容
引用内容第二行
第三行

引用内嵌套内容


4. 链接

链接写法

包含两种,文字链接和网址链接,链接必须添加http:// 。

 [谷歌](http://www.google.com)
<http://www.google.com>或http://www.google.com

链接显示效果

谷歌
http://www.google.comhttp://www.google.com


5. 图片

插入图片不需要按钮,只需要使用 [图片上传失败...(image-de431e-1528961338209)] 这样的语法即可,等于在文字链接前面加一个感叹号,方便记忆。

图片写法

图片名称可以为空。

![图片名称](https://img.haomeiwen.com/i11857/31d8162766cd39c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

图片显示效果

图片名称

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://…………?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

图片链接的末尾数字就是图片宽度,通过这个数字可以改变图片大小。最佳数字是620。

修改前

![71QDSdukUCL.jpg](https://img.haomeiwen.com/i11857/76326f352c2afe1e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
71QDSdukUCL.jpg

修改后

![蒲公英科学绘本](https://img.haomeiwen.com/i11857/76326f352c2afe1e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/620)
蒲公英科学绘本

图片排版

如果有多图同行排列的需求,可以结合表格语法实现。

| 左边 | 右边 | 
| :--: | :--: |
| ![8801534.jpg](https://img.haomeiwen.com/i11857/01cbf3fb27bdff77.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/620)  | ![蒲公英科学绘本](https://img.haomeiwen.com/i11857/76326f352c2afe1e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/520)|

图片排版效果

左边 右边
8801534.jpg 蒲公英科学绘本

三、参考资料

如何切换至 Markdown 编辑器
献给写作者的 Markdown 新手指南
Markdown语法说明

相关文章

  • markdown写作和排版

    设置-默认编辑器-Markdown编辑器 markdown的语法 标题 这是最为常用的格式,在 Markdown ...

  • 简书编辑模式的几种简单常用语法

    简书Markdown编辑模式的几种简单常用语法01 简书Markdown编辑模式的几种简单常用语法02 简书当前M...

  • Mardown---编辑模式

    简书文章编辑可以使用Markdown编辑器 -点击设置--基础设置 将常用编辑器 markdown 选中即可,...

  • 简书 Markdown 教程

    简书Markdown编辑模式设置 登陆简书首页 点击页面左下角的编辑按钮 选择常用的编辑器为Markdown(切换...

  • Markdown

    Markdown编辑简书 初次使用Markdown语法编辑器,感觉其语法和很多语言相识,简书中有篇文章对其介绍比较...

  • 简书如何插入代码样式

    1、登录简书账号,找到设置编辑器为Markdown编辑器 更详细的关于简书的Markdown的语法结构,请参考Ma...

  • 如何在简书上写代码文章

    1.设置为Markdown 编辑器 登录简书账号--设置--基础设置--常用设置--常用编辑器(Markdown)...

  • Markdown 新手入门

    1.设置为Markdown 编辑器 登录简书账号--设置--基础设置--常用设置--常用编辑器(Markdown)...

  • Markdown常用语法及简书编辑器图片编辑

    第12篇 一、Markown常用语法 Markdown 是一种易于阅读、易于撰写的纯文字格式的标记语言,可以转换成...

  • Markdown 第二步

    简书 > 设置 > 选择常用的编辑器 > 选中 markdown,但 点击“写文章”无法实现 Markdown 语...

网友评论

  • 半沐:很实用,收藏了👍
  • 锦梭:你好,前辈!我也是007的参与者,很想学习你时文章的排版方法,刚看了,但遗憾的是~没看懂……可以把你的微信号留下来吗?
    短暂瞬间:rockyjia
  • 地表最强程序员小白:为什么我找不到markdown的预览模式
    短暂瞬间:@地表最强程序员小白 http://www.jianshu.com/p/UsAsfW 先切换到markdown编辑器,然后在编辑页面右上角“切换到预览模式”

本文标题:Markdown常用语法及简书编辑器图片编辑

本文链接:https://www.haomeiwen.com/subject/jzmjpxtx.html