markdown高级写作技巧汇总

1 代码diff

如果你做过代码 Code Review，对下面这种效果肯定很熟悉

// 数组去重
const unique = (arr)=>{
-	 return Array.from(new Set(arr))
+  return [...new Set(arr)]
}

这种代码的增删对比效果就是通过 diff 来做的，原始代码如下

```diff
// 数组去重
const unique = (arr)=>{
-	 return Array.from(new Set(arr))
+  return [...new Set(arr)]
}
```

在 Markdown 中，```用来表示代码块，跟在后面的是语言类型，比如 js、java 和 diff 等

上面的 diff 代码最终在 html 中会转换成下面这段（不过在不同转化器中转换效果会有所差异），最终通过修改样式达到上面的效果。

<pre><code>"//&nbsp;数组去重"<br>"const unique = (arr)=>{"<br><span class="deletion">"-  return Array.from(new Set(arr))"</span><br><span class="addition">"+  return [...new Set(arr)]"</span><br>"}"<br></code>
</pre>

2 待办事项

很多 Demo 代码都会实现一个 TodoList，我们用 Markdown 来做一个，实现下面这种 Todo 效果

• 待完成
• 已完成
• 未完成

原始写法：

- [ ] 待完成
-  [x] 已完成
- [ ] ~~未完成~~

3 图片设置宽高

原始写法如下，只有 ![]()

![](https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png)

但图片宽高不受限，生成给定宽高的图片：

可使用 img 标签，原始写法

<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=500px height=200px />// 写法二，自动缩放
<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=40% />

因为 ![]() 转化成 html 后就变成 img 标签，所以直接在 Markdown 中写 img 标签并且加上宽高。

bash
复制代码// 原始 markdown 语法
![图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13973f2a07bb45feb159aa2584997913~tplv-k3u1fbpfcp-zoom-1.image)// 转化成 html 后语法
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13973f2a07bb45feb159aa2584997913~tplv-k3u1fbpfcp-zoom-1.image" alt="图片描述">

4 折叠

展开查看规范 请关注 [公众号【JavaEdge】](https://mp.weixin.qq.com/s/PVGz50qE1S4xsEsmypVp-g)

用到 <details>和 <summary> 标签

<details>
<summary>展开查看规范</summary>
这是展开后的内容1
</details>

5 锚点链接

一种页面内的超链接。

锚点链接就是点击后会跳转到对应的锚点位置，想到链接跳转就能想到 <a></a> 标签

实现方式

① Markdown 原始写法 [名称](#id)

点击我跳转到目录树

[点击我跳转到目录树](#目录树)

② HTML 语法 <a href="#id">名称</a>

名称

<a href="#目录树">名称</a>

6 目录树

直接在文章使用 [TOC]

会自动转成：

<div class="table-of-contents"><ul><li><a href="">代码diff</a></li>...</ul>
</div>

存在兼容性问题，Github 不支持，可使用 github-markdown-toc 库自动生成，它原理就是自动生成锚标记，然后就可以页面内跳转。

7 换行

Typora换行后发到 github 发现并没有什么卵用，其实这时候使用 CSS 的 <br> 标签。

<br>

上面这一行就是换行效果了。