第4章 文章编辑

4.1 Markdown 简介 ³¹

小雅经历了盗号风波，辛苦赚的钱全飞了，这让小雅很沮丧。

不过沮丧归沮丧，文章还是要认真写。小雅打开发帖界面，小雅已经喜欢上了这个简洁的界面。她明白了这里编辑文章是使用一种叫做Markdown的语法。起初她不是很习惯这种方法，这种敲代码式的写作方式她不是很习惯。但是慢慢地用着用着，她发现了这种方法的优势——编辑文章既快速又不用担心跨平台格式变化的问题，慢慢地变得喜欢上这种写作方式了。

不过小雅对Markdown也还只是略懂皮毛，她见过很多大神的文章编辑的美轮美奂、精妙无比。她暗暗下了决心，要熟练的使用Markdown，要写出文排版舒服同时内涵深刻的文章。

---

相信有不少人和小雅一样，对steemit上的排版都觉得有些难上手吧？接下来让我们一起来学习一下steemit的排版技巧吧！

一篇好的文章，除了内容上乘、言之有物外，排版也很重要。

虽说酒香不怕巷子深，但是对于文章而言，如果排版一团糟，会让人根本没有阅读的欲望。

那么Steemit都支持那些排版方式呢？

1. 使用编辑器

steemit的发表页面有一个内置的编辑器，支持设置标题、斜体、粗体、添加链接、插入图片等功能。

这个编辑器是把用户的设置转换成HTML代码的。

但是以我的使用体验，这个非常不方便，排版费时费力还不美观。

2. 直接插入HTML

另外一种方法是在编辑页面中，直接插入HTML代码。

比如 一下代码产生一个列表：

<ol>
<li>好好学习</li>
<li>天天向上</li>
</ol>

效果如下：

1. 好好学习
2. 天天向上

好吧，看起来还不错。至少我们又有一种办法排版。

但是，对于熟悉HTML语法的用户，敲入一堆的<和>以及一堆的标签，有没有感到厌烦？

对于不熟悉HTML语法的用户，更是犹如面对一堆天书。

3. 使用Markdown

既然编辑器和插入HTML都不那么理想，那有没有既功能强大，又便于输入的排版方法呢？

当然有啦，这就是本文要说的，steemit支持的第三种排版方式：使用Markdown！

Markdown是什么

Markdown是什么呢？引用Mastering Markdown中的介绍：

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like #or *.

简单的说，Markdown就是控制网络上文本样式的一种方式。控制文档如何显示，包括但不限于：设置文字粗体或斜体格式、添加图像、创建列表。通常，只需在正常的文本中加入一些非字母字符，比如#or *.

Markdown语法

说了这么多，你是不是有些迫不及待的想了解如何使用Markdown啦？

Let’s go! 下边会直接列出一些大家感兴趣的内容。

---

高端技能： 插入图像

看别人的文章图文并茂，羡慕否？掌握了插图技能，你也可以。

语法：
![提示文字](图片URL)
例子：
![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

高端技能： 插入链接

有时候需要在文章中插入一些链接，比如要推荐一些文章或者说明你引用的文章的出处等。

语法：
[提示文字](链接URL)
例子：
[Steemit 思考： 自媒体、大V、明星来袭，小作者该何去何从?](https://steemit.com/steemit/@oflyhigh/steemit-v)

Steemit 思考： 自媒体、大V、明星来袭，小作者该何去何从?

高端技能三： 使用列表

需要说明一些步骤之类的，使用列表看起来会更清晰明朗。

列表分为无序列表和有序列表。

无序列表（以及子列表项）：

* Item 1
* Item 2
  * Item 2a
  * Item 2b

• Item 1
• Item 2
• Item 2a
• Item 2b

有序列表（以及有序列表无序列表混排）：

1. Item 1
2. Item 2
   * Item 2a
   * Item 2b

1. Item 1
2. Item 2

• Item 2a
• Item 2b

高端技能： 使用标题

# 大号标题
## 二号标题
###### 六号标题

高端技能：文字格式

这是一段普通文字，请关注 @oflyhigh
*这是一段斜体文字，请关注 @oflyhigh*
**这是一段粗体文字，请关注 @oflyhigh**
_这是一段斜体文字，请关注 @oflyhigh_
__这是一段粗体文字，请关注 @oflyhigh__
**这是_粗体中嵌入了斜体_的混排文字，请关注 @oflyhigh**

这是一段普通文字，请关注 @oflyhigh

这是一段斜体文字，请关注 @oflyhigh

这是一段粗体文字，请关注 @oflyhigh

这是一段斜体文字，请关注 @oflyhigh

这是一段粗体文字，请关注 @oflyhigh

这是_粗体中嵌入了斜体_的混排文字，请关注 @oflyhigh

高端技能：使用引用

使用引用其实就是在引用的段落或者每一行前加一个>

@oflyhigh 在[这篇文章](https://steemit.com/steemit/@oflyhigh/steemit-v)曾经说过：
> 赚钱不是steemit的主题，社交才是。

他还说：
> 发个帖子，顺便推销一下自己也是无可厚非的，这样不算厚脸皮的。

@oflyhigh 在这篇文章曾经说过：

赚钱不是steemit的主题，社交才是。

他还说：

发个帖子，顺便推销一下自己也是无可厚非的，这样不算厚脸皮的。

高端技能：插入代码

在正常文本中嵌入代码：

PHP是世界上最好的语言，`<? echo ("Hello World!"); ?>` 一个世界你好诞生了。

PHP是世界上最好的语言，<? echo ("Hello World!"); ?> 一个世界你好诞生了。

插入一整段代码，或者让文本保存原样：

```
PHP是世界上最好的语言，`<? echo ("Hello World!"); ?>` 一个世界你好诞生了。
```

效果如下：

PHP是世界上最好的语言，`<? echo ("Hello World!"); ?>` 一个世界你好诞生了。

使用表格

The popular tags on steemit.com (with Chinese translation) /steemit流行标签附中文翻译 以上文章使用了表格进行排版，把热门流行标签的中英文对比放一起，更为直观。

steemit流行标签附中文翻译
tags|标签
------------|------------
steemit|steemit
photography|摄影
life|生活
introduceyourself|自我介绍
mathematics|数学

steemit流行标签附中文翻译

tags	标签
steemit	steemit
photography	摄影
life	生活
introduceyourself	自我介绍
mathematics	数学

高端技能：插入分割线

****

---

4.2 Typora 编辑器 ³²

小雅在学习Markdown语法的时候突然想到了一个事情，既然Markdown可以跨平台使用，那么是不是有跨平台的Markdown编辑器可以使用呢？这些编辑器可以用在Steemit上吗？

抱着这些疑问，小雅开始寻找第三方的文章编辑器。这一找，还真的让小雅找到了很多第三方的Markdown编辑器，有好几个还是跨平台无论电脑手机都可以使用，还同步云保存。这一发现让小雅喜出望外，第三方的文章编辑器不仅功能强大，而且也非常的容易使用，唯一的不便之处就是文章发表在Steemit的时候图片需要重新上传。

有了第三方的文章编辑工具，小雅的文章质量一下子大大的提高了。

---

Steemit 上很多新手或许会和小雅一样，不习惯或者不习惯默认的 markdown 编辑器。在此，我郑重推荐一款免费开源、老少咸宜的编辑器：Typora。有了她，让你从此爱上markdown。Typora 从0.9.39 版开始，有了中文版。打开 Typora，默认是英文界面。点击菜单栏 File - Preference - language，选择中文，不用保存，关掉 Typora。下次打开时，就是中文界面啦。

适合新手

我是 markdown 的重度用户，用了很多年，尝试过很多 Markdown 编辑器。比较常见的是双栏布局：左边敲源码，右边显示渲染结果。我以前在自己博客上推荐过桌面版 MarkdownPad，网页版的 StackEdit，Dillinger，国产的麻花编辑器等均属此类。我博客的留言区也算是其中之一，只不过是上下栏。在这些双栏编辑器里，最优秀的当属 StackEdit，是Google Drive 的官方御用编辑器，有丰富的工具栏和快捷键，很适合新手。

不过，自从遇见 Typora，我就彻底抛弃上述所有软件了。Typora 完全颠覆了我对 markdown 编辑器的固有看法。

Typora 是单栏布局。它虽然顶部没有工具栏，但只要点击右键，工具栏就出现了，非常适合新手。并且，是“所见即所得”：输入格式标记后，光标一离开，就立刻显示为想要的样子。

等熟练之后，就无需右键工具栏，丰富的快捷键可以实现各种格式。ctrl + b 是粗体，ctrl + i 是斜体，ctrl + shift + i 是插入图片， ctrl + k 是插入超链接。常用的就这么几个。不常用的，点菜单栏就看得见。

Typora 是自动保存的。再也不怕死机、断电造成辛辛苦苦写好的文字丢失了！

据说每篇帖子在 1000 到 2000 字最好？Typora 右下角即时显示当前的字数。

强大的拷贝粘贴功能

在 markdown 里输入表格不够爽。你可以在 Excel 输入，然后拷贝粘贴到 Typora 里，就直接转成表格了。甚至网页上的表格，只需拷贝粘贴到 Excel 里，再从 Excel 里拷贝粘贴到 Typora 里就行了。

如果你想给一段文字加上超级链接，只需拷贝链接，然后选中文字，按一下ctrl + k，链接就添上了。

如果拷贝的是带超级链接的文字，那么粘贴到 Typora 里时，自动带上了超级链接。

上面讲的是从外拷贝东西往 Typora 里粘贴。你还可以从 Typora 拷贝东西往外贴，直接转换成html或纯文本格式。

让老手惊讶

在 Theme 菜单栏里，可以更换编辑器的主题。

View 菜单里，可以选择不同的视图。大纲视图（Outliine）会显示各级标题，文件视图（Articles）会显示当前文件夹所有 markdown 文件预览，而文件树视图（File Tree）则显示了文件夹和文件的树状结构列表。

你可以选择打字机（Typewriter）模式，或使用快捷键 ctrl+shift+t。这个模式下，光标永远处在编辑窗口的正中间一行，让你的颈椎永远处于最舒服的状态。也可以选择焦点（Focus）模式，帮助你将注意力集中在当前行。按 F11 可以进入全屏模式，有利于专心写作。

你还可以选择源代码模式，只需按 ctrl + / ，或点击左下角的 </> 即可。

上面介绍的功能已经够多，不过仍然不全。你还可以很方便的插入数学公式，脚注，目录。当然，这些格式未必被 steemit 支持，但是你可以导出为 HTML，pdf，Word使用。还有更多功能，等你去发现。

而且，Typora 竟然是免费的，开源的，跨平台的！Windows ，mac 和 linux 平台都可以用！

这么好的编辑器，不推荐，根本忍不住。来试一下吧，告诉我你的体验。

4.3 插入多媒体 ³³

小雅使用Markdown语法已经越来越上手了，文章的排版也越来越美观了。小雅对自己的进步表示很开心，不过她可不是就这样就会满足的女人，她又开始研究新的玩意儿——在文章里面插入多媒体。

小雅觉得在文章里面适当的插入图片和视频会让文章增色不少，她还想着给文章配个背景音乐，不过她怕声音太嘈杂影响别人心情，加音乐的想法也只是想想就算了。小雅想要在文章里面插入视频，她发现Steemit里面有个专门上传视频的地方叫做Dtube，她尝试着在这里录制了一个视频插入到了文章里面。一切都弄完好，她仔细的检查了几回，效果非常好，比她想象中的还要好，她满意的点了“POST”按钮，期待着粉丝的点赞。

4.3.1 插入动图 gif

往帖子里插入 gif 动图的方法与插入普通图片完全相同。如果是本地的动图，只需把动图文件拖入 steemit.com 发帖的编辑窗口即可。如果是网上的动图，那么只需使用markdown 插入图片的语法即可：

![](图片链接)

下面是个例子：

![](https://steemitimages.com/0x0/https://steemitimages.com/DQmXbiU6jS6D53RA2sUDX63K2511ENqzJUe3ak81dwf3v56/2017-07-25_sunset.gif)

4.3.2 嵌入视频

steemit.com 支持两家网站的视频嵌入到帖子里：youtube 和 vimeo。其中，youtube最为常用，插入方法很简单：直接把视频的超级链接粘贴到帖子里即可。下面是个例子：

@dapeng 的吉他口琴弹唱：
https://www.youtube.com/watch?v=N4rTR2WTLsM

视频的播放窗口会嵌入帖子里。点击上面的播放键就可以直接播放了。

这种插入方法优点是省事，缺点是移植性差：只有 steemit 等少数几个网站会把帖子里这个网址自动渲染成嵌入视频。如果把帖子的文本原样贴到别的软件或网站的话，多半只会显示这个链接。从通用性的角度考虑，比较安全的做法是使用标准的嵌入代码。

在上述示例的 youtube 视频播放页，点击播放窗口右下方的“分享”按钮，在弹出窗口点击“嵌入”，就会出现一段嵌入代码。

<iframe width="560" height="315" src="https://www.youtube.com/embed/N4rTR2WTLsM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

把这段代码复制粘贴到帖子里即可。

对于其他视频网站，steemit 暂不支持直接嵌入，只能将视频的链接粘贴到帖子里。

4.3.3 嵌入音频

steemit.com 仅支持一家网站的音频嵌入到帖子里：SoundCloud 。方法如下：

1. 搜索或上传音乐或声音。
2. 打开目标声音的页面。
3. 点击 ‘share’ 按钮。
4. 点击窗口顶部的 ‘Embed’，就得到了代码。
5. 将代码拷贝粘贴到帖子里。

例如，搜索“成都 dapeng”，得到的嵌入代码是：

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/347459247&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

将这段代码粘贴到帖子里，点击上面的播放键就可以直接播放了。

对于其他音频网站，steemit 暂不支持直接嵌入，只能将音频的链接粘贴到帖子里。

4.3.4 如何输入emoji表情符号 ³⁴

Steemit 支持输入表情符号，是我在点击编辑器下方的 Markdown Styling Guide 后看到的。按照说明，照理说只要输入 :smile:，就应该显示😀。但是我试了，不灵。换个浏览器也不行。🙁

如果是在手机上输入，事情倒是简单了，直接输入表情符号就行。不过，在电脑上如何实现？

这里介绍个方法，不仅可以往帖子里，还可以往回复里、标题里添加。😜

方法很简单：访问网站 https://emojikeyboard.org/，找到需要的符号，鼠标左键单击，然后粘贴到需要的地方就行了！🆗

表情符号有没有必要？非常有必要。在现实生活里说话时，我们辅以表情、动作等肢体语言，从而能表达感情色彩。而在网上仅靠文字交流的话，有时候很难判断感情色彩。一句脏话，说给朋友听的时候可以增进亲密；一句赞美，说给对手听的时候可能被认为是嘲讽。语言有复杂性，每个人解读的结果跟预先的设定有关。加上表情符号，其实就是为了展示你的预设，展示你对对方的态度是敌是友。一般情况下，一用表情符号，就显得轻松随意，表示是朋友。

表情符号跟插图有什么区别？表情符号是融于文字中的，有时候起的是标点符号的作用。表情符号要用得恰到好处，不可不用，不可滥用。就像饮酒，小饮怡情，大饮伤身。

4.4 steemit写文排版常用技巧** ³⁵

小雅今天去菜市场买菜，发现众多菜档中有一档最为突出。这档菜贩把菜堆的整整齐齐，还按照菜的颜色进行了分类，远远看去，充满了韵律的美感。

小雅在一边观察了一下，这档菜的价格比旁边的都贵一点，不过这档菜的生意明显菜旁边的好很多。

这给了小雅一个领悟，自己在Steemit上的文章不也一样吗？小雅登陆自己的主页查看了一下自己文章。她发现自己特别用心排版的文章明显看的人比较多，点赞数也比较多。

小雅想着，看来文章排版也要讲究艺术，先不说内容，要是文章的文字都密密麻麻的，谁会有兴趣看呢？

想到这里，小雅默默的点开了中文区几个大佬的文章，开始学习大神们的文章排版艺术。

---

好的排版能让你的文章增色不少，如果你是像小雅一样好学而上进，就跟着我们来一起学习排版的技巧吧！

1、账户页面介绍

steemit具有社交性，账户页面的介绍很重要，需要通过几行字准确传达下你的相关信息，职业、兴趣、写作范畴等，还可以表明你所在的城市。

比如，我自己的介绍：“桥梁设计师、不务正业，爱写俩文字”。地址是“中国武汉”。通过几行文字说明我所在的城市，职业，以及写作是工作之外业余的兴趣。

简单的介绍，让follow你的人可以大概了解你，让同样兴趣的可以找到你。比如最近就人看到我的页面介绍，联系上我，在steemit这个世界里，竟然也找到武汉的土木同行，也是难得。

2、个人主页不建议链接图片

个人主页蓝色的背景是可以换成图片的，我之前试过，但是鉴于国内打开steemit的网络不好，很多主页链接的图片会经常刷不出来。

当图片刷不出来时，这样反而会影响页面的文字显示，同时也影响打开的速度。体验很不好。所以，个人建议国内用户不要链接图片。

3、图文格式

一篇文章最好是图文格式。图文格式的文章，在自己主页的列表显示上也会显得整齐，偶尔一篇非图文的，总感觉有些想狗子啃的一样，很不美观。

在内容上，一张合适的图片可以提升阅读体验。图片大小建议布满文章，比如本文的第一张图片，在横向上布满。之前有文章提到图片的最佳尺寸，我自己的经验是很少依据尺寸去具体剪裁，只是凭感觉控制，控制好图片的高度，太高的图片影响屏读的体验。

4、标题和第一行文字很重要

好的标题可以吸引人，它的重要性就不多说。有时，我们会用双语的标题，我自己的体验来说，对于汉语及英语的双语标题，建议把主要的受众语言放在前面，比如主要是汉语的人阅读，那么我就把汉语放前面，英语放后面。

文字发表后，会在steemit世界里显示，往往能显示标题以及第一行的部分文字，所以要利用好这点。通过第一行的几句开头，往往会吸引一些注意力。

我经常看到些文章，第一行就几个字，然后就换行了，这样可能少了一些获取大家注意力的机会。

5、正文顶格

我们一直接触到的写作规范都是开头空两字符，那是主要在纸质阅读时代习惯。在屏幕阅读时代，我们看文字都是一屏屏的刷，对于手机屏横向宽度小，开头空两行，给人感觉很不整齐，阅读体验差。

6、注意空段

不要整篇文章几千字就两三段，这是我们纸质阅读写作的习惯，以前写作文也是标准的三段式。屏读时代，需要考虑刷屏时，阅读的停顿。

个人建议尽量不要超过四行，超过四行选择合适的断句换行。

7、学会Markdown

Markdown一定要学会，可以改善文字阅读的体验，比如，对于观点类文章，可以通过加粗，重点标示出文章要表达的观点，但不宜满屏加粗，觉得这也重要，那样是重点。最好提炼出一两句话加粗，来表达文章的重点。

8、文末引导

文章结束后，可以加一句标签类的句子，可以介绍自己，可以引导关注和点赞等。这类文字前，可以通过markdown的语法“- - -”增加一根分割线。

当然，内容最重要，排版是为了提升阅读体验，以上仅为个人观点和一些经验，很多观点也许前辈们已经提到过。希望对大家有帮助。

4.5 中文段首加空格和增加段落间距 ³⁶

如果想为中文段首增加空格，以及改变段落间的间距，简单，使用中文的全角空格即可。

一般的中文输入法都有上述设置界面。点一下弯月符号（或快捷键shift+空格）就变成满月，这就是全角。此时按空格键，就会输入一个汉字宽度的空白。所以，段首输入两个全角空白就行了。

不过，如果是紧跟在非普通文本（全文第一段，插图，代码等）后面，这种方法会失效，那么可以在全角空格前面加上个<br>就行了。

一般来说，在markdown编辑器里输入全角空格后再换行，就会多插入一行空白。下面我们用这种方法输入一行空白。

　　 　　

但连续几个空行 steemit 就不支持了。那么可以输入：

<br>

也同样是插入一个空行。输入几个<br>就插入几个空行。下面，我们插入两个空行。

<br>其实是 html 语言的代码。“全角空格”是html界的魔法占位符。善用“全角空格”这个小魔法，就可以实现诸如　　对　　齐　　等其他功能。

要想使用复杂的格式，就需要复杂的命令或按钮来排版，容易偏离对内容的关注。而 steemit 使用的 markdown 语法，在内容和形式之间达到了最微妙的平衡，让你用最简单的指令，实现日常99%以上的排版需求。

不过，markdown 也尊重其他1%用户的特殊需求。原则上，markdown 支持 html，所以，要想对你的帖子的格式进行复杂排版，那么就学习 html 吧，少年！

中文段首空格原本是用来印刷时方便划分自然段的。在网络时代，自然段完全可以通过段落间距看得出来，所以段首空格丧失了原本的意义。不过，作为对纸质书和印刷时代的怀念，用一下段首空格，不失为一种情怀吧。

---

31. 作者：@oflyhigh，编辑：@dapeng，原文链接：https://steemd.com/cn/@oflyhigh/markdown， 略有改动。↩

32. 作者：@dapeng;小故事:@maiyude;原文链接：https://steemit.com/cn/@dapeng/markdown-steemit-tips-the-best-markdown-editors↩

33. 作者：@dapeng;小故事:@maiyude;原文链接：https://steemit.com/cn/@dapeng/insert-gif-embed-video-and-audio↩

34. 作者：@dapeng，原文链接：https://steemit.com/cn/@dapeng/how-to-insert-emoji-on-steemit↩

35. 作者：@yellowbird，编辑：@dapeng，小故事:@maiyude,原文链接：https://steemd.com/cn/@yellowbird/3aeewa-steemit↩

36. 作者：@dapeng，原文链接：https://steemit.com/cn/@dapeng/steemit-markdown↩