Markdown高级用法
# 代码diff
做过代码 Code Review，对下面这种效果肯定很熟悉
// 数组去重
const unique = (arr)=>{
- return Array.from(new Set(arr))
+ return [...new Set(arr)]
}
1
2
3
4
5
2
3
4
5
这种代码的增删对比效果就是通过 diff 来做的，原始代码如下
```diff
// 数组去重
const unique = (arr)=>{
- return Array.from(new Set(arr))
+ return [...new Set(arr)]
}
```
1
2
3
4
5
6
7
2
3
4
5
6
7
# 待办事项
很多 Demo 代码都会实现一个 TodoList，我们用 Markdown 来做一个，实现下面这种 Todo 效果
- 待完成
- 已完成
未完成
原始写法是下面这样
-空格[空格]空格待完成
-空格[x]空格已完成
-空格[空格]空格~~未完成~~
1
2
3
4
5
2
3
4
5
# 图片设置宽高
只要有 ![]() 就行; 但是这时候的图片宽高是不受限制的;
这时候我们可以使用 img 标签;
<img src='https://p3-juejin.byteimg.com/xxx.image' width=300px height=200px /> // 固定宽高
<img src='https://p3-juejin.byteimg.com/xxx.image' width=40%/>// 自动缩放
1
2
3
2
3
# 折叠
原始写法比较简单，用到了 <details>和 <summary> 标签
<details>
<summary>展开查看规范</summary>
这是展开后的内容1
</details>
1
2
3
4
2
3
4
# 锚点链接
有 2 种方式实现这个效果
- Markdown 原始写法
[名称](#id) - HTML 语法
<a href="#id">名称</a>
[点击我跳转到目录树](#目录树)
<a href="#目录树">名称</a>
1
2
3
2
3
# 目录树
直接在文章中使用 [TOC] 就可以，会转化成下面这种格式
<div class="table-of-contents">
<ul>
<li><a href="">代码diff</a></li>
<li><a href="">待办事项</a></li>
...
</ul>
</div>
1
2
3
4
5
6
7
2
3
4
5
6
7
存在兼容性问题，Github 中并不支持，可以使用 github-markdown-toc 这个库自动生成，其实它的原理就是自动生成锚标记，然后就可以页面内跳转。
上次更新: 2022/04/15, 05:41:26