文章目录
- 1 代码diff
- 2 待办事项
- 3 图片设置宽高
- 4 折叠
- 5 锚点链接
- 实现方式
- ① Markdown 原始写法 `[名称](#id)`
- ② HTML 语法 `名称`
- 6 目录树
- 7 换行
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>
"// 数组去重"
<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 图片设置宽高
原始写法如下，只有 ![]()
但图片宽高不受限，生成给定宽高的图片：
可使用 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 语法
// 转化成 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>
上面这一行就是换行效果了。
