Mac Down几点使用小技巧

Markdown 是一种轻量级的「标记语言」，目前也被越来越多的写作爱好者、撰稿者广泛使用。请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单，常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

这里列举的都是除了Markdown标准语法外一些平时不多见的小技巧，非常实用，可以先学习标准语法再把这个作为补充，如下技巧大多是利用 Markdown 兼容部分 HTML 标签的特性来完成，不一定在所有网站和软件里都完全支持，主要以 GitHub 支持为准.

由于简书的markdown编辑器的限制,很多地方显示效果不尽人意, 具体效果请参考我的博客 It inns

一. 制作能跳转的目录

语法格式: [条目名称](#id), id是要跳转的目的地的id, 我们必须在目的地处设置与此id相同的id.

例如: 我们要跳转到在表格单元格里换行这个地方.

第一步: 设置目录:通过[条目名称](#id)语法设置目录. 在表格单元格里换行;

第二步: 设置跳转目的地:在目的地处通过<h3 id="destinationID"></h3>设置与第一步相同的id(<h3></h3>是3级标题对应markdown语法的###).

完成以上两步之后就能点击第一步设置的目录进行跳转. 试一试吧.

二. 能展开折叠的下拉列表

<details>
  <summary>点击我进行切换展开折叠状态</summary>
    1. 内容一.
    2. 内容二.
    3. 内容三.
</details>

默认展开的列表格式:

<details open>
  <summary>默认展开的列表</summary>
    1. 内容一.
    2. 内容二.
    3. 内容三.
</details>

三. 在段落中插入图片, 并给图片添加点击跳转事件

案例如下:

捐款[<img alt="Donate" src="https://heron-newland.github.io/assets/images/avatar_small.png" height="25px">](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TRTU3UEWEHV92 "Donate").谢谢啦

四. 精准跳转文中任意位置

1. 在目标位置前一行添加标签 <span id=""/>，id值随便写，保持全文唯一性就行，跳转就是靠id识别。
2. 在跳转发起的地方设置跳转链接，格式为 [显示文字](#第1步的id号)

示例代码：

<span id="xxx"/>    <!-- 添加在目标位置 图文混排 前一行 -->
[在表格单元格里换行](#在表格单元格里换行)     <!-- 设置在链接点击的发起地方 -->

五. 行首缩进

直接在 Markdown 里用空格和 Tab 键缩进在渲染后会被忽略掉，需要借助 HTML 转义字符在行首添加空格来实现，'&ensp'; 代表半角空格，'&emsp'; 代表全角空格。

缩进两个汉字示例代码：

    春天来了，又到了万物复苏的季节。

六. 字体-字号-颜色-背景色

Markdown本身不支持修改字体、字号与颜色等功能，但是因为Markdown兼容HTML语法，所以我们可以使用HTML标签来设置。

• face 表示字体；
• color 表示颜色，可取十六进制的值；
• size 表示字号，但是要注意取值范围是 1 - 7，浏览器的默认值是 3；
• bgcolor 表示背景颜色，需借助 table, tr, td 等表格标签来使用；

示例代码：

<font face="微软雅黑">我是微软雅黑</font>
颜色是<font color=red>红色</font>
字号为<font color=#0099ff size=7>7号</font>
<table><tr><td bgcolor=orange>背景色是：orange</td></tr></table>

七. 分割线

可以在一行中用 3 个以上的* 或 - 或 _来建立一个分隔线，行内不能有其他东西，为了兼容其他平台，可以在符号中间插入空格。

示例代码：

* * *
- - -
_ _ _

八. 图文混排

使用 <img> 标签来贴图，然后指定 align 属性。

示例代码：

<img align="right" src="https://www.paypalobjects.com/webstatic/mktg/merchant_portal/button/donate.en.png"/>

这是一个示例图片。

图片显示在 N 段文字的右边。

N 与图片高度有关。

刷屏行。

刷屏行。

九. 控制图片大小和位置

标准的 Markdown 图片标记![]() 无法指定图片的大小和位置，只能依赖默认的图片大小，默认居左。

而有时候源图太大想要缩小一点，或者想将图片居中，就仍需要借助 HTML 的标签来实现了。图片居中可以使用 <div> 标签加 align 属性来控制，图片宽高则用 width 和 height 来控制。

示例代码：

图片默认显示效果：

image

控制图片对齐方式,以及宽高：

<div align="center"><img width="60" height="80" src="https://heron-newland.github.io/assets/images/avatar_small.png"/></div>

还可以只设置图片的宽度或者高度来达到等比缩放的目的：

<div align="center"><img width="100" src="https://heron-newland.github.io/assets/images/avatar_small.png"/></div>

十. 在表格单元格里换行<span id="在表格单元格里换行"></span>

在表格单元格里换行用 HTML 里的 <br /> 实现(简书不支持这样格式)。

示例代码：

Header1	Header2
item 1	1. one<br /> 2. two<br /> 3. three

另外多列表格的表示方式还可以简写，可以去掉前后2个竖线|

示例代码：

Header1	Header2
item 1	1. one
item 2	2. two

<h3 id="destinationID">改变表格内容的对齐方式</h3>

Header1	Header2	Header3
item 1 文字右对齐	1. 文字左对齐	文字居中对齐
item 2	2. two	居中