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

in cn •  8 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空间和微信朋友圈。
希望在这里结识更多的朋友。

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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

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

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

好主意

  ·  7 years ago 

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

怎么操作

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

好办法。

超棒!

  ·  6 years ago 

请问,我刚刚按照你的方法试了,感觉没用,我看你文本框里有左右上下的箭头,那个是什么啊,在哪里可以找到。

  ·  6 years ago 

你说的是他插入代码框的方法吧?
用 ```前后 括起来就可以了

  ·  6 years ago (edited)

我试过了啊,结果并不理想,比如粗体加斜体的 [ *好像_没用],按照这个方法,但是我看了他的方法是降价,文本格式里也有,但是点开输入后却没有预览框。

  ·  6 years ago 

*有用啊,怎么你说没有用呢?*
有用啊,怎么你说没有用呢?

不过我其实不是很明白你在说什么……什么降价?

  ·  6 years ago 

你这个是不是直接就这样了,还是说你是打开编辑器弄得。

  ·  6 years ago 

应该是我的方法不对吧

  ·  6 years ago 

有用吗,我再试试

  ·  6 years ago 

大神,谢谢

  ·  6 years ago 

我弄白了他这个是怎么弄呢,他这个还是要进入编辑器里的代码块里也就是降价,才能达到这种效果,当你在降价状态时输入代码,是不会有预览框出现的,当你取消降价还原会原来的状态时那种带有上下左右箭头的预览框才会出现。

  ·  8 years ago (edited)

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

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

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

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

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

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

  ·  7 years ago 

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

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

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

太复杂了

不愧是奶普大人!
还没发过文章呢,先来学习学习。

上午去苦力那参观啦
等你们旅游回来我们聚聚

  ·  7 years ago 

本文已收进steemh.org

这个必须顶啊,很有用!

  ·  7 years ago (edited)

支持支持,一年前的牛贴

  ·  8 years ago Reveal Comment

新人学习第一步。赞!

  ·  7 years ago 

学习了,原来我的文本有点不整齐是有原因的。

可不可以搞成公众号或头条更好用的编辑?

新人干货

这个专业性是不是强了点。。。

特别特别棒的干货!我是新人正在学习中!!!!O(∩_∩)O谢谢

感谢oflyhigh的这篇文章,对我这个新手来说,收益不少!

请问一下怎么发视频啊

我了解下来,现在是发不了音视频的,因为这样会导致区块太大。不确定对不对,或许我也是没找到方法,欢迎指正交流!

    还有一个,我觉得很实用的,首行缩进:半角&*ensp;去掉中间的星号,不要忘记了最后的分号;就可以愉快的空格和首行缩进了。

[" "]

图片怎么居中呀?

o哥,这篇是我觉得介绍markdown最棒的帖子,能否授权收到 steem 指南里(开头结尾会略做改动)?

随便用

谢o哥!

  ·  7 years ago 

写的非常详细的markdown教程,我们希望能够把你的文章收录进正在编撰的《steem指南》一书中,希望能够得到你的授权。
你可以在github了解我们的项目:
https://github.com/pzhaonet/steem-guides

随便用啦

  ·  7 years ago 

谢谢!

  ·  8 years ago Reveal Comment