markdown编辑器书写格式说明

GFM 是 Github 拓展的基于 Markdown 的一种纯文本的书写格式。

1. 基础书写格式

1.1. 段落

在 Markdown 中,连续的一行或多行就是一个段落。用空行来进行切段。

这是第一个段落
我跟上面是同一个段落

这是第二个段落

1.2. 大纲

正确地使用大纲,可以帮助 Wiki 系统渲染目录,计算定位锚点,好处多多。

Markdown 中,使用 # 来定义大纲标题,有多少个 #,就表示是几级的大纲。比如:

# 这是一级标题(会生成<h1>标签)

这里是段落内容

## 这里是二级标题(会生成<h2>标签)

这里是段落内容

...

###### 这里是六级标题

这种书写方式非常直观自然。

1.3. 引用内容

引用部分的内容只需要在行首加上 > 就可以了。比如:

> To be or not to be, that is a question.

看起来是这样的:

To be or not to be, that is a question.

1.4. 强调文本

您可以使用加粗斜体来格式化文本内容。

加粗使用: **这种语法**
斜体使用: *这种语法* 或 _这种语法_
还可以混合使用:**加粗文本中的_斜体_**

1.5. 删除线

你可以使用 ~~ 包裹一段文本让它拥有删除效果

这样来~~删除一段文本~~

2. 超链接

2.1. 超链接

通过 [文本](url) 的形式来添加超链接。比如这个是一个百度脑图的超连接。

[百度脑图](http://naotu.baidu.com) - 控制创意,如此简单

3. 列表

3.1. 无序列表

在行首添加 *- 可以开启列表模式,比如

* 第一,...
* 第二,...
* 第三,...

- 首先,...
- 其次,...
- 最后,...

有序列表

在行首添加数字,就可以开启有序列表模式,比如:

1. 打开冰箱
2. 把大象放进去
3. 关上冰箱

3.2. 列表嵌套

在上一级列表的基础上加两个空格,即可嵌套列表

1. 打开冰箱
  1. 用右手打开
  2. 轻轻地打开
2. 把大象放进去
  * 不要吐槽
    * 大象太大
    * 冰箱太小
    * 例子很无聊
3. 关上冰箱

整体效果:

  1. 打开冰箱
    1. 用右手打开
    2. 轻轻地打开
  2. 把大象放进去
    • 不要吐槽
    • 大象太大
    • 冰箱太小
  3. 关上冰箱

4. 表格

表格使用了直观的定义方式,使用 -| 分割行和列。

月份|收入|支出
----|----|---
8   |1000|500
9   |1200|600
10  |1400|650

看起来效果如下:

月份

收入

支出

8

1000

500

9

1200

600

10

1400

650

其中,航标题后的一行使用的横杆数量是不要求的,只是为了排版好看才人工对齐。比如你可以这样来定义上述表格。

月份|收入|之处
-|-|-
8|1000|500
9|1200|600
10|1400|650

你还可以使用 : 指定列的对齐方式。

月份(居中对齐)|收入(右对齐)|支出(左对齐)
:--------------:|-------------:|:------------
8               |1000          |500
9               |1200          |600
10              |1400          |650

看起来效果如下:

月份(居中对齐)

收入(右对齐)

支出(左对齐)

8

1000

500

9

1200

600

10

1400

650

5. 代码

5.1. 行内代码

在文本中使用`包裹的内容会被识别为代码,比如

现在你可以不用 `document.getElementById()` 了,现代浏览器都把复制了 `id` 属性的元素放在了全局变量里。

渲染出来是:

现在你可以不用 document.getElementById() 了,现代浏览器都把复制了 id 属性的元素放在了全局变量里。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏flutter开发者

[Flutter Widget]ExpansionTile

在前面的文章红我们学习了Chip的用法,使用Chip可以很方便的完成对想要的东西打上想要的标签。在文章的最后让大家实现如下的效果

1351
来自专栏移动开发之家

Android图片加载开源库深度推荐,安利Fresco1、Universal-Image-Loader 2、Picasso 3、Glide 4、Fresco

</p> 这里没有广告,这里没有跑分,数据对比Google一下比比皆是,额···那我说什么好(ノಠ益ಠ)ノ彡┻━┻。 对啊,女朋友···呸呸呸,那么就来讲一...

672
来自专栏程序员互动联盟

【专业技术】搜狗歌词窗口如何来实现

大家都见过以前Sogou歌词窗口的样子吧,感觉是歌词的字体直接贴在windows桌面上一样,但是还可以用鼠标控制,这个是怎么做成的呢?其实我也不知道^_^,估计...

35010
来自专栏转载gongluck的CSDN博客

GDI透明贴图

网上下载的图片,有一些会有水印。水印的实现可以用透明贴图来做。透明贴图就是让两张图片合并的时候,重叠的部分中使一些颜色不显示,从而达到透明的效果。 如果用GDI...

4076
来自专栏非典型技术宅

iOS动画系列之三:Core Animation1. 介绍2. 支持的平台3. Core Animation 的继承结构图4. 常见属性和使用步骤

1014
来自专栏小芭乐的专栏

Markdown 编辑器指南

Markdown 是一种轻量级标记语言。语法简单明了,浏览本篇指引文章,学会使用markdown,就可以开始写文章了。markdown编辑器采用左边纯markd...

3912
来自专栏iOS Developer

Bison教你1分钟集成3D无限翻转的Banner

951
来自专栏sunseekers

我想推荐一本书 《CSS 世界》

前段时间张鑫旭老师的《css 世界》出版,之前看过他写的博客,写的挺好的,一直就在思考要不要买?

581
来自专栏HTML5学堂

一步步教你弹性框架-上篇

HTML5学堂:本系列主要在于跟大家分享弹性运动框架的制作方式。弹性运动框架的运动方式类似于弹簧,有一种回弹的效果,在网站中的一些特效当中还是有一些应用的。实现...

3458
来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

991

扫码关注云+社区