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

in HIVE CN 中文社区last year (edited)

当年刚刚加入这里,一头雾水,什么都不懂,只能一点点地学习和摸索。摸索一段时间后,总算成小小白进化成了小白,有了一丁点的经验,开始装专家啦。

image.png
(图源 :pixabay)

加入两个月以后,我撰写了这样一篇文章《使用Markdown来让你的文章更易于阅读、更美观》,帮助大家了解以及更好地使用Markdown。

不得不说当初为了学习Markdown以及撰写文章,耗费了很多心血,不过现在回头再看,内容和排版方面还有很多值得改进的地方。

所以我重新排版了这篇文章,做了一些调整,并增删一些内容,让文章更易阅读,让Markdown学习起来更加容易。

以下是正文:


为什么要写这篇文章?

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

那么hive.blog都支持那些排版方式呢?

1. 使用编辑器

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

你可以通过点击撰写文章区域上边的1680925429555.png来启用编辑器功能。

启用之后编辑区域上方会多出如下按钮:
image.png

简单来讲这个编辑器就是把用户的设置转换成HTML代码,新用户用这个编辑器进行一些简单的排版还是很方便的,但是相对而言功能不够强大。

2. 直接插入HTML

除了使用编辑器外,还有一种方法是在编辑页面中直接插入HTML代码。比如可以通过插入以下代码插入一个列表。

示例代码


<ol>
    <li>列表项1:好好学习</li>
    <li>列表项2:天天向上</li>
</ol>

效果展示


  1. 列表项1:好好学习
  2. 列表项2:天天向上

看起来还不错,至少我们又掌握了一种排版方法。

但是,对于熟悉HTML语法的用户,敲入一堆的<>以及一堆的标签,有没有感到厌烦?对于不熟悉HTML语法的用户,则更是犹如面对一堆天书。

3. 使用Markdown

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

当然有啦,这就是本文要说的,hive.blog支持的第三种排版方式:使用Markdown!

(注:很多前端以及HIVE区块链的DAPP都支持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)

示例代码

[活动:HIVE独立日快乐 & 我为HIVE送祝福](https://hive.blog/hive-105017/@oflyhigh/hive-and-hive)


效果展示
活动:HIVE独立日快乐 & 我为HIVE送祝福

必备技能:插入引用内容

当你想在自己的文章中引用别人的内容时,最好是通过插入引用的方式以避免被当成Copy&Paste侵权。

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

示例代码

@oflyhigh 在[这篇文章](https://hive.blog/hive-105017/@oflyhigh/ai-aigc)曾说过:
> 在HIVE上,也可以分享AI创作的各种新技术各种心得体验等等。***但是不能将AI创作的内容完全发到HIVE上来,当成自己创作的内容骗取收益;更不能使用基于AIGC的机器人发帖。***

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


效果演示
@oflyhigh这篇文章曾说过:

在HIVE上,也可以分享AI创作的各种新技术各种心得体验等等。但是不能将AI创作的内容完全发到HIVE上来,当成自己创作的内容骗取收益;更不能使用基于AIGC的机器人发帖。

他还曾说过:

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

必备技能: 使用标题

给文章的不同段落加上标题,会让文章的逻辑结构更加清晰,便于读者阅读和理解。

示例代码


# 这是大号标题
## 这是二号标题
###### 六号标题(想用几号就在前边加几个#号)

效果展示


这是大号标题

这是二号标题

六号标题(想用几号就在前边加几个#号)

必备技能:文字格式

通过设置文字的不同格式,可以突出重点,一目了然。

示例代码


普通文字,请关注 @oflyhigh
*斜体文字,请关注 @oflyhigh*
**粗体文字,请关注 @oflyhigh**
***斜体加粗文字,请关注 @oflyhigh***
**粗体中_嵌入了斜体_的混排,请关注 @oflyhigh**

效果展示


普通文字,请关注 @oflyhigh
斜体文字,请关注 @oflyhigh
粗体文字,请关注 @oflyhigh
斜体加粗文字,请关注 @oflyhigh
粗体中嵌入了斜体的混排,请关注 @oflyhigh


必备技能:插入分割线

可以通过以下任何一种方式插入分割线

语法

----
****

效果展示



高端技能:使用列表

当我们需要说明一些步骤之类的,在文章中使用列表看起来会更清晰明朗。

列表分为无序列表和有序列表并支持子项目,我们来通过一个单一的例子包含这些元素。

请注意有序列表前的数字变化(代码中的数字,以及实际展示效果中的排序数字),很有趣哦。

示例代码


* Item 1(无序列表条目1)
* Item 2(无序列表条目2)
  1. Item 2a (子项:有序列表)
  3. Item 2b (子项:有序列表)

效果展示


  • Item 1(无序列表条目1)
  • Item 2(无序列表条目2)
    1. Item 2a (子项:有序列表)
    2. Item 2b (子项:有序列表)

高端技能:插入代码

程序猿专属福利来了,让文章中嵌入的代码可读性更强。

示例代码
在正常文本中嵌入代码:

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


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

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

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

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

高端技能:使用表格

我曾经写过一篇文章,把热门流行标签的中英文对照放一起,使用表格方式展示更为直观。

示例代码


tags|标签
------------|------------
photography|摄影
life|生活
introduceyourself|自我介绍
mathematics|数学
效果展示
tags标签
photography摄影
life生活
introduceyourself自我介绍
mathematics数学

进一步的学习和了解

关于Markdown就先介绍到这里了,有了这几把板斧,想必能解决我们撰写文章时遇到的绝大多数问题。

你或许会问, @oflyhigh 你咋知道这么多功能呢?(呸,脸红不?)其实我知道的只是九牛一毛,如果想了解更多,我们一起来学习吧!文末会列出一些和Markdown有关的参考资料,供大家参考。

相关链接

Sort:  

因为本文使用了一些魔法(HTML&Markdown混排),可能会导致一些DAPP前端支持不好。

建议通过以下链接在https://hive.blog/上阅读:

https://hive.blog/hive-105017/@oflyhigh/6vqjiv-markdown

人工置顶

为啥我点进去看不内容??

要去HIVE.BLOG那边可以看,我试过。

感谢第一时间汇报此问题:)

O哥客气啦,谢谢O哥打赏☺️

见置顶回复:)

我是个憨憨😂

ecency上看不到
只能hive.blog上看到
可能是代码不支持

谢谢友哥解答

真厉害👍👍

太深奥了,学不来🙈,O哥你太厉害了👍

又一次重温了Markdown格式。谢谢O哥

谢谢O哥分享,能帮助新人尽快掌握排版
@xiaotaiyang ,小太阳,可以来学学

🤣先替小太阳谢谢友哥 最近她回家有点事了

灰蒙蒙的一片。什么都没有。
走了,

好奇怪,ecency那边完全看不到内容,只有到Hive.blog这边看就全显示出来了。
怎么会这样。第一次见到这现象

感谢O哥普及,这篇文章真好看!

学习了,后续得好好看看研究下

我只知道,笨抠文字,看来得抽空好好学习下排版。谢谢o哥分享!

Hi, thanks to the translator function, I can enjoy your posts, I use your witness list app on cutehive and was wondering if you have made this code opensource as I would like to learn from it.