外贸建站 台州,wordpress 手机域名,微信小说分销平台,广告传媒公司的网站应该怎么做文章目录 1 代码diff2 待办事项3 图片设置宽高4 折叠5 锚点链接实现方式① Markdown 原始写法 [名称](#id)② HTML 语法 名称 6 目录树7 换行 1 代码diff
如果你做过代码 Code Review#xff0c;对下面这种效果肯定很熟悉
// 数组去重
const unique (arr){
- return A… 文章目录 1 代码diff2 待办事项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 中会转换成下面这段不过在不同转化器中转换效果会有所差异最终通过修改样式达到上面的效果。
precode//nbsp;数组去重brconst unique (arr){brspan classdeletion- return Array.from(new Set(arr))/spanbrspan classaddition return [...new Set(arr)]/spanbr}br/code
/pre2 待办事项
很多 Demo 代码都会实现一个 TodoList我们用 Markdown 来做一个实现下面这种 Todo 效果 待完成 已完成 未完成
原始写法
- [ ] 待完成
- [x] 已完成
- [ ] ~~未完成~~3 图片设置宽高 原始写法如下只有 ![]()
但图片宽高不受限生成给定宽高的图片 可使用 img 标签原始写法
img srchttps://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png width500px height200px /// 写法二自动缩放
img srchttps://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png width40% /因为 ![]() 转化成 html 后就变成 img 标签所以直接在 Markdown 中写 img 标签并且加上宽高。
bash
复制代码// 原始 markdown 语法
// 转化成 html 后语法
img srchttps://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
/details5 锚点链接 一种页面内的超链接。 锚点链接就是点击后会跳转到对应的锚点位置想到链接跳转就能想到 a/a 标签
实现方式
① Markdown 原始写法 [名称](#id)
点击我跳转到目录树
[点击我跳转到目录树](#目录树)② HTML 语法 a href#id名称/a
名称
a href#目录树名称/a6 目录树
直接在文章使用 [TOC]
会自动转成
div classtable-of-contentsullia href代码diff/a/li.../ul
/div存在兼容性问题Github 不支持可使用 github-markdown-toc 库自动生成它原理就是自动生成锚标记然后就可以页面内跳转。
7 换行
Typora换行后发到 github 发现并没有什么卵用其实这时候使用 CSS 的 br 标签。
br上面这一行就是换行效果了。
