作为一名开发者，你很可能听说过 HTML，即超文本标记语言（HyperText Markup Language）。

你可能还知道 HTML 是一种用于创建网站的语言 —— 但标记是什么意思？

标记语言是使用标签来定义文本文件中不同元素的语言。大多数人都熟悉的富文本编辑器就是一种允许用户在他们的文件中添加额外的格式、图像和链接的程序。

标记语言使用如下格式的表情标签：

• <p> </p> 是一对段落标签。
• <b> </b> 加粗标签内的文字.

标记语言家族有许多成员，比如 XML、HTML，以及本文的主题：Markdown。

开发人员常用 Markdown 来编写文档 —— 通常在大多数仓库中都有 markdown 格式的文档。例如，这篇文章正是我在 freeCodeCamp 上使用 Markdown 编写的。

那么，让我们看看我们可以用 Markdown 做什么。

免责声明： 没有一个统一的机构或规范来标准化 Markdown —— 只有一些被广泛接受的最佳实践。因此，你可能需要根据使用的 Markdown 解析器来从下面选择不同的内容。

Markdown 速查表

下面是一些最常用的在 Markdown 中操作文本的方法。

如何在 Markdown 中创建标题

Markdown 中有六种样式的标题，从 H1 到 H6。接下来，我将给你演示他们看起来分别是什么样的，以及如何用 Markdown 创建它们。

H1 字体最大，也被通常作为“主标题”，接下来的每个标题的字体都依次变小。

H1 tag

# H1 tag

H2 tag

## H2 tag

H3 tag

### H3 tag

H4 tag

#### H4 tag

H5 Tag

##### H5 tag

H6 tag

###### H6 tag

如何在 Markdown 中增加强调排版

通常，你会将文字加粗、设为斜体，或者添加删除线来强调一段文字。过多的强调组合反而会使文字变得更不清晰，所以请仔细选择你想强调的每一段文字的方式。

Markdown 中还有下标和上标符号，例如，你可以用它们来写化合物的名称，或者是作为数学符号的一部分。

如何把文本加粗：

在文本周围添加两个星号，将使该文本显示为粗体。就像这样：**粗体**。

如何显示斜体文本：

在文本周围添加单个星号，就可以把它设置为斜体显示。像这样：*斜体s*。

如何在特定文字上添加删除线：

如果你想在文本中“划掉一些东西”，你可以用上删除线，比如：~~划掉~~。

如何在 Markdown 中写下标

举个例子，如果你想写水的化学符号，你可以通过输入 H~2~0 来将“2”显示为下标。

渲染后的样式是 H~2~0。

如何在 Markdown 中写上标

假设你想写一个指数或上标。你可以像这样做：X^2^，你将得到 X^2^。

如何用Markdown制作列表

Markdown 中有多种类型的列表，比如有序列表和无序列表。

有序列表通常用于你想按一定顺序进行的步骤（比如按照菜谱煮鸡，直到上菜）。但是对于那些不需要像菜谱那样有顺序的步骤的事情（例如，购物清单）来说，可以使用无序列表。

如何在 Markdown 中制作一个无序列表

这是一个无序列表的样子。

• 辣椒油
• 米饭
• 大葱

Markdown 代码中，在行首用 - 来创建一个无需列表。

- 辣椒油
- 米饭
- 大葱

如何在 Markdown 中制作一个有序列表

这是一个有序列表的样子。

1. 第一项
2. 第二项

Markdown 代码中，在行首用 1. 来创建一个有需列表（译者注：数字编号可以是自己维护的，也可以始终为一个数字，比如 1）。

1. 第一项
2. 第二项

如何在 Markdown 中插入链接

在 Markdown 文档中的两种最常见的链接是超链接和图片。这两种方式都能使你的文章更清晰、更有说服力，你应在适当的时候使用。

下面是文本中的超链接的样子：

Kealan 的网站

这是创建它的 Markdown 代码：

[Kealan 的网站](https://www.kealanparr.com)

你需要把想在超链接上显示的文字放在方括号里（这里是 "Kealan 的网站"），紧接着用小括号包裹指向的 URL。

又比如，你想在一篇文章中加入一张图片，像这个样子：

用以下的记号来写就可以：

![天然岩石景观形成的山谷，绵延到蓝天下的道路交叉处。](https://images.unsplash.com/photo-1660866838784-6c5158c0f979?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80)

这跟普通的超链接相似，只是在方括号前面加上感叹号。

如何在 Markdown 中使用 HTML 代码

你可以直接在 Markdown 文档中使用普通的 HTML（这取决于你所使用的解释器）。

所以你可以随意输入你喜欢的任何有效的 HTML。

如何在 Markdown 中添加分隔符

如果你想通过一根横线来分隔文本中的章节，你可以获得这样的效果：

只需要在一行中键入三个横线：

---

如何用 Markdown 制作表格

表格在你的文章中很方便。要制作一个看起来像这样的表格：

你需要用到这样的标记：

| Name   | Age |
| ------ | --- |
| Kealan | 25  |
| Jake   | 28  |

在制作 Markdown 表格时，唯一你必须注意的问题是，你要保持管道符（|）垂直排列。那么你的表格就会像本文上面的那样。这个图片更能清晰地说明问题。

这显示了一个 Markdown 表格，以 Name 和 Age 为标题，包含两行数值，Kealan、Jake 和 25、28。

如何在 Markdown 中添加代码及语法高亮

如果你为开发者创建文档，在你的 Markdown 中添加代码片段会有很大的帮助。

下面是一个非常简单的 JavaScript 例子，但 Markdown 几乎支持所有的现代编程语言（包括对齐进行语法高亮等）。

console.log('example log')

```javascript  
console.log('example log')  
```

只要输入三个反引号，并加上编程语言的名字，再回车就可以开始写代码了。再用三个反引号来结束代码块。

如何在 Markdown 中添加引用

当你提及别人的作品时，你应该有礼貌地引用他们的作品。一个简单的方法是引用他们的话。

如果你想在 Markdown 中加入引用：

“这是一句话，来自一个非常明智的人” —— 佚名

在行首加上这个符号，就能将其渲染成上面的样子：

> “这是一句话，来自一个非常明智的人” —— 佚名

结语

我希望这篇文章对你来说是一个有用的参考，也希望你能从中学到你以前没见过的 Markdown 新特性。

Markdown 还有很多功能（甚至还没算上你可以创建的 HTML 变体），但本文已经涵盖了最常用的功能。

思考了一段时间，最后想出来了三种方案：

1. 百分比滚动
2. 双屏同时渲染占用面积大的元素
3. 每一行的元素都赋上一个索引，根据索引来精确同步每一行的滚动高度

百分比滚动

假设现在正在滚动 a 屏，那 a 屏的滚动百分比计算方式为：a 屏的滚动高度 / a 屏的内容总高度，用代码表示 a.scrollTop / a.scrollHeight。当滚动 a 屏时，需要手动同步 b 屏的滚动高度，也就是根据 a 屏的滚动百分比算出 b 屏的滚动高度：

a.onscroll = () => {
	b.scrollTo({ top: a.scrollTop / a.scrollHeight * b.scrollHeight })
}

原理就是这么简单，可惜实现效果不太好。

从上面的动图可以看出，当我在第二个大标题处停留的时候，左右双屏的内容是同步的。但当我滚动到第三个大标题时，左右双屏的内容高度已经差了将近 300 像素了。所以说这个方案勉勉强强能用吧，聊胜于无。

双屏同时渲染占用面积大的元素

双屏内容高度不一致，是因为 markdown 同一个元素渲染后的高度和渲染前会有差别。例如一个图片，用 markdown 写就一行代码的事，但渲染出来的图片有大有小，高度几十、几百像素的都有。如果 markdown 的图片代码双屏同时渲染，倒是能解决这个问题。

但是除了图片仍然有不少元素渲染前后的高度是有差距的，虽然没有图片这么夸张。譬如 h1 h2 这种，当文章内容越长，这种小差异带来的问题会越来越大，导致双屏内容高度的差距也会越来越大。所以说这种方案也不是很靠谱。

每一行的元素都赋上一个索引，根据索引来精确精确同步每一行的滚动高度

之前两个方案都属于勉强能用，不够好。现在这个第三方案就比前面两个强多了，几乎能做到精确同步每一行的内容。具体怎么做呢？

第一步，监听 markdown 编辑框的内容变化，为每一个元素赋上一个索引，空行空文本除外。

当把编辑框的 HTML 传给右边的框渲染时，需要把 data-index 赋值给渲染后的元素。这样就能通过 data-index 精确定位渲染前后的同一元素了。

第二步，根据 a 屏的元素滚动高度计算 b 屏上同一索引的元素滚动高度

在 a 屏进行滚动时，需要从上到下遍历 a 屏的所有元素，并且找到第一个在屏幕内的元素。找到第一个在屏幕内的元素 这句话的意思是因为在滚动过程中，有些元素会因为滚动跑到屏幕外面（原来在屏幕内，滚动到屏幕外），这些元素我们是不需要计算的。

判断一个元素是否在屏幕内：

// dom 是否在屏幕内
function isInScreen(dom) {
    const { top, bottom } = dom.getBoundingClientRect()
    return bottom >= 0 && top < window.innerHeight
}

除了判断元素是否在屏幕内，还需要判断这个元素在屏幕内的部分占整个元素高度的百分比。譬如说一个图片的 markdown 字符串，由于滚动的原因，导致一半在屏幕内，一半在屏幕外。为了精确同步，那么渲染后的图片也必须有一半在屏幕内一半在屏幕外。

计算元素在屏幕内的百分比代码：

// dom 在当前屏幕展示内容的百分比
function percentOfdomInScreen(dom) {
	// 已经通过另一个函数 isInScreen() 确定了这个 dom 在屏幕内，所以只需要计算它在屏幕内的百分比，而不需要考虑它是否在屏幕外
    const { height, bottom } = dom.getBoundingClientRect()
    if (bottom <= 0) return 0 // 不在屏幕内
    if (bottom >= height) return 1 // 完全在屏幕内
    return bottom / height // 部分在屏幕内
}

现在我们就可以从上到下遍历 a 屏的所有元素，找到第一个在屏幕内的元素了：

// scrollContainer 即上面说的 a 屏，ShowContainer 是 b 屏
const nodes = Array.from(scrollContainer.children)
for (const node of nodes) {
    // 从上往下遍历，找到第一个在屏幕内的元素
    if (isInScreen(node) && percentOfdomInScreen(node) >= 0) {
        const index = node.dataset.index
        // 根据滚动元素的索引，找到它在渲染框中对应的元素
        const dom = ShowContainer.querySelector(`[data-index="${index}"]`)
		
		// 获取滚动元素在 a 屏中展示的内容百分比
		const percent = percentOfdomInScreen(node)
		// 计算这个对等元素在 b 屏中距离容器顶部的高度
        const heightToTop = getHeightToTop(dom)
        // 根据 percent 算出对等元素在 b 屏中需要隐藏的高度
        const domNeedHideHeight = dom.offsetHeight * (1 - percent)
		// scrollTo({ top: heightToTop }) 会把对等元素滚动到在 b 屏中恰好完全展示整个元素的位置
		// 然后再滚动它需要隐藏的高度 domNeedHideHeight，组合起来就是 scrollTo({ top: heightToTop + domNeedHideHeight })
        ShowContainer.scrollTo({ top: heightToTop + domNeedHideHeight })
        break
    }
}

从动图来看，目前已经做到行内容的精确同步了。

踩坑

有一些元素渲染后会变成嵌套元素，例如表格 table，渲染后的内容层级为：

<table>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>

按照目前的渲染逻辑，假如我写了个表格：

|1|b|
...

那么 |1|b| 上的 data-index 会对应到 table 上。

那这就会有个 bug，当 |1|b| 滚动到 50% 的时候，整个 table 也会滚动到 50%。这个现象如下图所示：

这和我们相要的效果不一样。a 屏连一行的内容都没滚完，b 屏整个内容已经滚动到一半了。

所以像这种嵌套的元素，在打 data-index 标记时，要把它打到真正的内容上。用表格 table 来做示例，就得把 data-index 的标记打在 tr 上。

这样一来，同步滚动就正常了。同理，其他的嵌套元素也一样（譬如 ul ol）。

总结

完整的代码我已经放在 github 上了：

• markdown-editor-sync-scroll-demo

还有在线 DEMO：

• demo1
• demo2
• demo3
• demo4
• demo5
• demo6

如果在线 DEMO 比较慢，可以克隆项目后直接打开 html 文件访问。

在 Markdown 中，有两种格式化代码的方法。你可以使用内联代码，在一行的某些部分周围加上反斜线（`），或者你可以使用代码块，有些渲染器会对其应用语法高亮。

内联代码

你可以使用内联代码格式来强调你所写的一行中的一个小命令或一段语法。

例如，你可能希望提到 JavaScript 的 Array.protoype.map() 方法。通过使用内联代码格式化，可以清楚地看到这是一段代码。你也可以用它来说明一个终端命令，比如 yarn install。

要使用内联代码格式化，只需将你希望格式化的代码用反斜线包起来。在一个标准的 QWERTY 键盘上，可以在 “1” 的左边和 Tab 键的上面找到它。关于键盘上反引号的位置的更多信息，本文下方有介绍。

例如，在 markdown 中写 `Array.prototype.map()` 会呈现为 Array.prototype.map()。

代码块

要写更长或更详细的代码片段，通常最好把它们放在一个代码块内。代码块允许你使用多行，而 markdown 会在它的后台用代码类型的字体渲染。

为了达到这个目的，在你的代码块开始的时候，要有一行三个反引号。这向 markdown 表明你正在创建一个代码块。你将需要用另一行三个反引号来结束，比如：

```
var add2 = function(number) {
 return number + 2;
}
```

将被 markdown 渲染为：

var add2 = function(number) {
  return number + 2;
}

语法高亮

虽然 markdown 本身不支持，但许多 markdown 引擎，包括 GitHub 使用的引擎，都支持语法高亮。这意味着，只要告诉 markdown 你在代码块中使用什么语言，它就会像 IDE 那样添加颜色。

你可以把语言的名字和你开头的三个反引号放在同一行上。在上面的例子中，如果你不在第一行写 ```，而是写 ```js，那么 JavaScript 高亮就会被应用到这个代码块。

var add2 = function(number) {
	return number + 2;
}

语法高亮不仅可以应用于 JavaScript。你可以使用 ```html：

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <h1>Hello World</h1>
  </div>
</div>

```ruby：

"Hello World".split('').each do |letter|
  puts letter
end

或者 ```python：

a, b = 0, 1
while b < 10:
    print(b)
    a, b = a, a + b

请记住，不是所有的 markdown 引擎都会应用语法高亮。

国际键盘上的反引号

在不同的键盘上，反引号的位置可能不同，如果你使用的不是 QWERTY 键盘，可能会很难找到它。这份有用的指南列出了一些寻找回车键的方法，我们将其收集在下面：

QWERTY and QWERTZ：

AZERTY：