乐趣区

写作利器-Markdown基础编辑器及图床

一、写作排版是个难题

写作是每个人日常生活和工作中必不可少的内容,无论是写博客、写邮件,还是写报告、写接口文档、写项目方案文档。

在使用 Word 或类似编辑工具写作时,想必你一定纠结过字体、字号、间距等等的排版问题吧:)。

Word 这类富文本编辑工具,以所见即所得的方式,为用户提供了大量的可选样式和排版支持。它的功能十分强大,样式选择也足够自由,但也正是因为这样,让没有经验的用户面对排版样式的汪洋,不知所措:

  • 一级标题用什么字号什么字体?
  • 二级辩题用什么字号什么字体?
  • 正文用什么字号什么字体?
  • 正文与前后标题的边距怎么设定?
  • 行间距,字间距,段落间距?
  • ……

由此看来,想要让文字排版成一篇看起来有模有样的文章确实不是一件容易的事,不仅需要掌握一些排版知识,也需要培养基本的排版审美。要是你向我一样有强迫症那就惨了,不停地去调整比对,却总是不尽人意:)。

那有没有这样一个模版,推荐一个好看的样式,让我不用关心各类字体、字号、间距等等的问题,而是可以直接往里头套用?

试试 Markdown 吧。

二、Markdown 是什么

Markdown 是一种标记语言。在写作时,你的所有文字都是没有样式的纯文本,在其中插入若干 Markdown 标记后,被标记的文字便有了样式。样式将会在渲染的时候呈现,并且样式的显示效果由 Markdown 工具决定。

比如,在你所写的文字中,你希望某一行的最终排版呈现一级标题的样式,那就给这行文字加个一级标题的标记;某个地方有两个字需要加粗,那就给这两个字加个粗体标记,最终的排版效果中这两字就会是粗体模样。

Markdown 支持对多种文章元素做标记,包括但不限于:

  • 一至六级标题
  • 粗体
  • 斜体
  • 引用
  • 列表
  • 图片
  • 表格
  • 链接
  • 代码块

当前这篇文章就是用 Markdown 写的。你正在看的这部分内容的 Markdown 形式是这个样子的:

Markdown 是一种标记语言。在写作时,你的所有文字都是没有样式的纯文本,在其中插入若干 Markdown 标记后,被标记的文字便有了样式。样式将会在渲染的时候呈现,并且样式的显示效果由 Markdown 工具决定。比如,在你所写的文字中,你希望某一行的最终排版呈现一级标题的样式,那就给这行文字加个一级标题的标记;某个地方有两个字需要加粗,那就给这两个字加个粗体标记,最终的排版效果中这两字就会是粗体模样。Markdown 支持对多种文章元素做标记,包括但不限于:- 一至六级标题
- 粗体
- 斜体
- 引用
- 列表
- 图片
- 表格
- 链接
- 代码块

这些内容经过渲染之后便是你所看的的效果。

三、Markdown 的使用方法

前面说了,Markdown 其实就是给文章内容作标记,把某处内容标记成什么那它最终就呈现对应的样式,而这些标记是一些简单的符号。

那 Markdown 标记都有哪些,样式效果是怎么的呢?

常用的标记

(1) 二级标题

## 这是二级标题

这是二级标题

(2) 三级标题

### 这是三级标题

这是三级标题

(3) 四级标题

#### 这是四级标题

这是四级标题

(4) 粗体

这是 ** 粗体 **

这是 粗体

(5) 引用

> 这是引用

这是引用

(6) 有序列表

Markdown 中列表有两种:1. 有序列表,像这样带序号的。序号以数字、点、空格组成
2. 无序列表,不带序号的,也就是后面那种

Markdown 中列表有两种:

  1. 有序列表,像这样带序号的。序号以数字、点、空格组成
  2. 无序列表,不带序号的,也就是后面那种

(7) 无序列表

无序列表有两种相同效果的写法:* 用 * 和一个空格开头
- 用 - 和一个空格开头

无序列表有两种相同效果的写法:

  • 用 * 和一个空格开头
  • 用 – 和一个空格开头

一个列表中我们应该始终用同一种写法,不用混用 * 和 –

(8) 链接

[这是链接文本](https://xx.xx/xx)

这是链接文本

(9) 插入图片

![任意图片名称](https://xx.xx/xx)

加载成功时:

加载失败时:

(10) 插入表格

| 表头 1 | 表头 2 |
| --- | --- |
| 单元格 1 | 单元格 2 |
| 单元格 3 | 单元格 4 |
表头 1 表头 2
单元格 1 单元格 2
单元格 3 单元格 4

不常用但可能会用到的标记

(1) 代码块

“`python
print(‘ 代码块表示多行代码,使用 “` 来开头和结尾代码块 ’)
print(‘ 语言标识可选,若有则可自动高亮代码元素 ’)
“`

print('代码块表示多行代码,使用 ``` 来开头和结尾代码块')
print('语言标识可选,若有则可自动高亮代码元素')

(2) 行内代码

这是行内代码 `echo 行内代码嵌入在某一行文本中

这是行内代码 echo 行内代码嵌入在某一行文本中

(3) 一级标题

# 这是一级标题

这是一级标题

(4) 五级标题

##### 这是五级标题
这是五级标题

(5) 六级标题

###### 这是六级标题
这是六级标题

(6) 分割线

---

(7) 斜体

这是 * 斜体 *

这是 斜体

(8) 删除线

这是~~ 删除线~~

这是 删除线

能渲染 Markdown 的编辑器

Markdown 是基于纯文本的,所以你可以直接使用记事本这样的编辑器来写作,但是记事本没法渲染 Markdown 内容,也就没法呈现出最终的排版效果。所以你需要一款能渲染 Markdown 内容的编辑器。

这里为大家推荐几款免费编辑器:

  • Typora,适合所有人,美观,易用。(其官网的演示视频 https://www.typora.io/img/bet…)
  • VS code + markdownlint 插件,适合程序员

另外印象笔记、有道云笔记之类的笔记产品和简书之类的博客平台也支持 Markdown 写作和预览。

图床

之前介绍了 Markdown 插入图片的方式:

![任意图片名称](https://xx.xx/xx)

这里演示的链接是网络链接,其实也可以使用本地图片的的文件路径,形式如下:

![任意图片名称](C:\Documents\sample.png)

如果你的文章只会在本地浏览,那么链接使用本地图片路径没有任何问题,但是如果文章需要分享给别人,或者需要在其他电脑上浏览,那么本地图片路径的方式就不行了,图片会无法正常加载。

通常情况下建议使用网络链接的方式来插入图片。因为这种方式可以跨设备,通用性更好。但是这会带来一个问题:自己的图片该如何上传到网上,并且得到网络链接地址?

云存储作为图床

我们把网络上用来保存上传图片的存储叫做 图床

我们可以使用云上的存储服务作为图床,比如阿里云的 OSS、AWS 的 S3。云存储作为图床有几个好处:

  • 稳定可靠
  • 费用低廉甚至免费
  • 学会之后可用作自己的文件备份系统

这里以阿里云 OSS(其云存储服务)作为示例,简单介绍下如何上传图片并得到该图片的网络链接:

  1. (仅第一次使用时) 首先在阿里云官网(https://aliyun.com)注册阿里云账号(可能需要实名认证),并登陆
  2. 通过网址 https://oss.console.aliyun.com 进入 OSS 控制台(若需要开通服务则选择开通)
  3. (仅第一次使用时) 找到并点击右侧的「新建 Bucket」按钮,输入一个未被占用的名称,「读写权限」选择「公共读」,其他不变,然后「确定」
  4. 页面左侧列表中便可以看到你刚才所设置的存储空间名称,点击进入
  5. 「文件管理」->「上传文件」->「上传文件」
  6. 文件上传后列表中会出现刚才上传的文件条目,点击条目右侧的「更多」->「复制文件 URL」
  7. 至此图片已经上传,并且它的网络链接已经得到,可以在 Markdown 中使用了。值得注意的是,步骤 1. 和 3. 仅在第一次使用时才需要操作

结语

前面总共介绍了 18 种 Markdown 标记,其实常用的也就 10 种左右,这些标记符号都很简单,不出二十分钟便能全部记住。以后在写作的时候请尽量去使用 Markdown,一方面反复的练习会使你牢牢记住各种标记符号,使用时信手拈来;另一方面,Markdown 的使用会大大方便你写作,减少排版带来的负担。请坚信 Markdown 会为你带来生产力的提升。

细心的读者可能发现了,在介绍 Markdown 标记时,「一级标题」和「斜体」这么常见的样式被我列在了「不常用但可能会用到的标记」里,这是怎么回事?其实这两种样式虽然常见,但是按照 Markdown 的中文写作规范,是很少被用到的。写作规范是什么?它定义了什么时候用粗体,什么时候用二级标题,什么时候必须加空格等等的要求,是个指导性的说明。

《写作利器 Markdown:撰写规范》将会为大家介绍 Markdown 中文写作规范。


微信订阅「代码之外的自我修养」,增删改查之外来点有用且有趣的东西!

退出移动版