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) 的形式来添加超链接。比如这个是一个腾讯云的超连接。

[腾讯云](https://www.qcloud.com/) - 控制创意,如此简单

2.2. 参考

2.2.1. 文本参考

如果文档中同一个链接多次使用,可以使用参考的方式。使用中括号可以把一个文本变为引用,如 [爱因斯坦],在文档的后续,需要指明参考文本和参考连接的对应关系:

[爱因斯坦]是一个伟大的科学家。

[爱因斯坦]: http://baike.baidu.com/view/2526.htm

渲染效果:

爱因斯坦是一个伟大的科学家。

2.2.2. 命名参考

如果不同文本要参考同一个链接,可以使用命名参考,其格式为[参考文本][参考名称]。在文档的后续,需要附上参考名称和链接的对应关系。比如

[微积分][Calculus](Calculus)是高等数学中研究函数的[微分](Differentiation)(Differentiation)、[积分][Integration](Integration)以及有关概念和应用的数学分支。

[Calculus]: http://baike.baidu.com/subview/3139/5376279.htm
[Differentiation]: http://baike.baidu.com/view/15986.htm
[Integration]: http://baike.baidu.com/subview/61339/5928878.htm

渲染出来是这样的:

微积分(Calculus)是高等数学中研究函数的微分(Differentiation)、积分(Integration)以及有关概念和应用的数学分支。

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 属性的元素放在了全局变量里。

5.2. 多行代码

使用 ``` 来包裹多行的内容成为代码。

比如:

    ```
      var a = 0;
      var b = 1;
      var c = a + b;
    ```

5.3. 代码高亮

``` 的后面,可以指定代码的类型,如:

   ```js
    var dog = new Dog('dummy');
    dog.bark();

渲染的效果如下:

var dog = new Dog('dummy');
dog.bark();

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

深入理解视觉格式化模型

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

3449
来自专栏程序员的诗和远方

Canvas基础-粒子动画Part4

在之前的文章 Canvas基础-粒子动画Part2 和 Canvas基础-粒子动画Part3 中分别讲了用图片和文字做粒子动画,今天我们来把代码简单整理一下,...

4077
来自专栏Android先生

一种粗暴快速的Android全屏幕适配方案

由于Android碎片化严重,屏幕适配一直是开发中较为头疼的问题。面对市面上五花八门的屏幕大小与分辨率,Android基于dp与res目录名称来适配的方案已无法...

1133
来自专栏木子墨的前端日常

纯css3跑马灯demo

我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡。但是css3样式一般不会。这里主要...

1652
来自专栏移动端开发

iOS 动画笔记 (一)

你也肯定喜欢炫酷的动画! 在APP中,动画就是一个点睛之笔!可以给用户增加一些独特的体验感,估计也有许多的和我一样的,看着那些觉得不错的动画,也就只能流口...

2268
来自专栏前端说吧

css笔记 - transition学习笔记(二)

transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果。

783
来自专栏拂晓风起

【Fanvas技术解密】HTML5 canvas实现脏区重绘

1602
来自专栏偏前端工程师的驿站

CSS魔法堂:Absolute Positioning就这个样

前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还...

2167
来自专栏前端新视界

有趣的 CSS 像素艺术

原文:fun-times-css-pixel-art 译者:nzbin 友情提示:由于国内网络的原因,CodePen可能会打不开或者非常慢,请耐心等待! ...

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

【答疑释惑第十六讲】屏幕上的图片是如何显示出来的?

疑惑一 什么是点阵字库? 点阵字库主要用于简单的嵌入式设备,字体大小一旦选定,就不能变化。比如以前老式手机上的字,一旦选定点阵字库就不能再变化。点阵字库是一个二...

3096

扫码关注云+社区