markdown高级写作技巧汇总

2023-08-09 14:43:11 浏览数 (1)

1 代码diff

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

代码语言：javascript复制
// 数组去重
const unique = (arr)=>{
-	 return Array.from(new Set(arr))
   return [...new Set(arr)]
}

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

代码语言：javascript复制
```diff
// 数组去重
const unique = (arr)=>{
-	 return Array.from(new Set(arr))
   return [...new Set(arr)]
}
```

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

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

代码语言：javascript复制
<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 效果

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

原始写法：

代码语言：javascript复制
- [ ] 待完成
-  [x] 已完成
- [ ] ~~未完成~~

3 图片设置宽高

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

代码语言：javascript复制
![](https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png)

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

可使用 img 标签，原始写法

代码语言：javascript复制
<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 标签并且加上宽高。

代码语言：javascript复制
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> 标签

代码语言：javascript复制
<details>
<summary>展开查看规范</summary>
这是展开后的内容1
</details>

5 锚点链接

一种页面内的超链接。

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

实现方式

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

点击我跳转到目录树

代码语言：javascript复制
[点击我跳转到目录树](#目录树)
名称">② HTML 语法 <a href="#id">名称</a>

名称

代码语言：javascript复制
<a href="#目录树">名称</a>

6 目录树

直接在文章使用 [TOC]

会自动转成：

代码语言：javascript复制
<div class="table-of-contents">
	<ul>
		<li><a href="">代码diff</a></li>
		...
	</ul>
</div>

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

7 换行

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

代码语言：javascript复制
<br>

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

markdown 公众号 数组 语法 原理

0 人点赞