markdown高级写作技巧汇总

男娘i 2024-03-22 23:58 138阅读 0赞

#### 文章目录 ####

*   *  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>
 		"// 数组去重"
 		 
 		"const unique = (arr)=>{"
 		 
 		"- return Array.from(new Set(arr))"
 		 
 		"+ return [...new Set(arr)]"
 		 
 		"}"
 		 
 	</code>
 </pre>

### 2 待办事项 ###

很多 Demo 代码都会实现一个 TodoList，我们用 Markdown 来做一个，实现下面这种 Todo 效果

*  待完成
 *  已完成
 *  未完成

原始写法：

- [ ] 待完成
    -  [x] 已完成
    - [ ] ~~未完成~~

### 3 图片设置宽高 ###

![989e88d754f5401b91d95b8b9d853de7.png][]

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

![](https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f42fe010b9224729afb77164607e1d6d.png)

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

![format_png][]

![989e88d754f5401b91d95b8b9d853de7.png][]

可使用 `img` 标签，原始写法

因为 `![]()` 转化成 html 后就变成 `img` 标签，所以直接在 Markdown 中写 `img` 标签并且加上宽高。

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>` 标签

<details>
 <summary>展开查看规范</summary>
 这是展开后的内容1
 </details>

### 5 锚点链接 ###

> 一种页面内的超链接。

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

#### 实现方式 ####

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

点击我跳转到目录树

##### ② HTML 语法 `<a href="#id">名称</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 的 ` ` 标签。

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

[989e88d754f5401b91d95b8b9d853de7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f42fe010b9224729afb77164607e1d6d.png
[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d634a7a5837f4ea9ae625c43925fcc76.png