第4章 文章编辑

4.1 Markdown 简介 31

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

不过沮丧归沮丧,文章还是要认真写。小雅打开发帖界面,小雅已经喜欢上了这个简洁的界面。她明白了这里编辑文章是使用一种叫做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 编辑器 32

小雅在学习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 插入多媒体 33

小雅使用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表情符号 34

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

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

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

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

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

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

4.4 steemit写文排版常用技巧** 35

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

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

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

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

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


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

1、账户页面介绍

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

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

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

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

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

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

3、图文格式

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

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

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

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

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

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

5、正文顶格

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

6、注意空段

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

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

7、学会Markdown

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

8、文末引导

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

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

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

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

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

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

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

     

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

<br>

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



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

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

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

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


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

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

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

  4. 作者:@dapeng,原文链接:https://steemit.com/cn/@dapeng/how-to-insert-emoji-on-steemit

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

  6. 作者:@dapeng,原文链接:https://steemit.com/cn/@dapeng/steemit-markdown