点赞再看,养成习惯,微信搜索【高级前端进阶】关注我。
本文 GitHub https://github.com/yygmind 已收录,有一线大厂面试完整考点和系列文章,欢迎 Star。
最近在学习的时候看到了 Markdown 代码 diff 高亮的效果,感觉挺有意思的。突然发现还有这么一个好玩的用法,然后我就想着整理一波 Markdown 的高级用法,下面是我整理的一些内容,如果还没用过 Markdown 这些技巧,快来试试吧。
代码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>
"//&a

本文介绍了 Markdown 的高级用法,包括代码diff展示、创建待办事项、设置图片宽高、实现折叠效果、创建锚点链接、自动生成目录树以及正确换行的方法。通过这些技巧,可以提升 Markdown 文档的呈现效果和功能性。
最低0.47元/天 解锁文章
991

被折叠的 条评论
为什么被折叠?



