使用Markdown来让你的文章更易于阅读、更美观

in #cn8 years ago (edited)

为什么要写这篇文章?

一篇好的文章,除了内容上乘、言之有物外,排版也很重要。
虽说酒香不怕巷子深,但是对于文章而言,如果排版一团糟,会让人根本没有阅读的欲望。
那么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)

Image of Yaktocat

  • 高端技能: 插入链接

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

语法:
[提示文字](链接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标签
steemitsteemit
photography摄影
life生活
introduceyourself自我介绍
mathematics数学
  • 高端技能:插入分割线

****


进一步的学习和了解

你或许会问, @oflyhigh 你咋知道这么多功能呢?
其实我知道的只是九牛一毛呀,如果想了解更多,我们一起来学习吧!
有些Markdown的语法在steemit支持的不是很好,所以除了多学还要多摸索哦。

Markdown官网
Mastering Markdown
Writing on GitHub / Basic writing and formatting syntax

我是 @oflyhigh
因为国内网络的原因,一直未能玩转各类社交媒体,终日混迹于QQ空间和微信朋友圈。
希望在这里结识更多的朋友。

Sort:  

翻译不容易,有心。有辛苦. 0.01是少了点,也就这么多了

不错。我正想翻译一个Markdown的用法呢。谁知道怎么收藏文章?比如这一篇文章。

我习惯用WordPress先写好,再提交至Steemit, 我正在写一个插件wordpress submit to steemit 的button

我是查看WordPress发布后的html源代表,再在线转到markdown语法,再贴到steemit上,非常干净清爽。

怎么操作

还有这个技能,这个比较好,刚才看了Markdown编辑器,那些使用技巧看到头都大了,还是直接在线转换比较好。

好办法。

Nice @oflyhigh
Shot you an Upvote :)

好帖!比我在百度找到的介绍 MarkDown 语法的文章更专业!

我也是看了一些文章,觉得很乱
另外一些功能这里还不支持,所以就自己整理一下。
边学,边玩边分享

讲排版的文章拍版就是好!

重温了一下,又学习了不少。

哈哈,见笑啦,因为要插入示例,所以感觉还是很乱的

html就蛮好用的,有点网站经验的人就懂点。

但是语法规则比较麻烦一些,一般人搞不明白。

太强大了!我都是直接用html的。哪个更好?有什么讲究吗?

个人觉得dreamweaver最强大,所见即所得,边写边看。

太复杂了

Coin Marketplace

STEEM 0.30
TRX 0.12
JST 0.032
BTC 60147.86
ETH 2985.82
USDT 1.00
SBD 3.83