程序员，你真的会用 Markdown 吗 ？

Markdown 的使用技巧

​ 平时在看一些文章中，大多都是使用 Markdown 样式的，个人觉得这个 Markdown 使用起来还是很不错的。今天早上上班的时候偶然看到我的同事在 掘金里面写关于 vue 的技术文档，但是他不能很熟悉的使用 Markdown 以至于让整个页面看起来乱糟糟的。我为他整理了一下后，看起来赏心悦目多了。我平时在写博客或是文章时比较喜欢 Markdown , 推荐一款软件：typora 这个软件对于喜欢 Markdown 格式的选手来说，是个不错的选择，里面不仅有丰富的样式，还配置快捷键。不过目前这个软件开始收费了。 BUT BUT BUT，我想这应该难不倒在座的各位。

​ 废话不多说，直接上技巧，

以下都是技巧，没有感情

基本技巧

标题：h1-h6, 只需在需要设置标题的地方 点击 ctrl + 1-6 就可设置对应的标题，倒序大小

加粗：文字粗体，选中文字 ctrl + b ，或 **加粗文字**

斜体：文字斜体，选中文字 ctrl + i ，或 *斜体文字*

下划线：文字下划线 ，选中文字 ctrl + u 或 <u>下划线文字</u>

删除线：文字中间一条线，选中文字 alt + shift + 5 或 ~~删除线文字~~

高亮： ==文字高亮显示==，无快捷键，==在文字前后加上两个等于符号==

注释：，无快捷键，<!--要注释的文字-->

超链接：百度 , ctrl + k [百度](www.baidu.com)

插入图片，直接复制图片，粘贴即可，但是 Markdown 可不会将你的图片转储，而是引用你本地图片的地址，也就是说你把 Markdown 文件中的图片发送到网络上，别人只能看到你的文字，看不到你的图片。

表格

快捷键	操作
Ctrl + T	输入行数，列数

代码块

如何简单方便的使用快捷键，来使用 Markdown 的代码块功能

语言编码

• 在英文输入法模式下，连续点击三次 ``` 键，一般在键盘的左上方，ESC 键的下方
• 输入要使用的代码块的语言
  • 比如 Java ---- ```java
  • 比如 js ---- ```js
  • 比如 shell ---- ```shell
• 打出前缀后，Markdown 就会有相应的提示，随后回车即可

Java

public JSONObject unifiedOrder(OrderRecharge order) {

        // 组织支付渠道请求参数
        JSONObject req = new JSONObject();
        req.put("head", buildRequestHead(order.getPayChannel().equals(OrderRecharge.PAY_CHANNEL_ALIPAY) ? 	aliPayProductId:weChatProductId, "sandpay.trade.pay"));
        req.put("body", buildRequestBody(order));

        // 请求支付接口，返回结果
        JSONObject body = BasePay.requestServer(req, SDK_URL + "/order/pay");

        if (body == null) throw new BaseException("支付渠道返回异常");

        // 验证结果(金额)
        if (order.getAmount().multiply(new BigDecimal(100)).intValue() != body.getIntValue("totalAmount")) {
            log.error("create pay order fail. order amount invalid. {}, {}", order.getAmount(), body);
            throw new BaseException("订单金额不一致");
        }

        // 更新订单支付信息
        order.getPayInfo().put("tradeNo", body.getString("tradeNo"));

        // 返回credential.params
        if (!body.containsKey("credential") || !body.getJSONObject("credential").containsKey("params")) {
            log.error("create pay order fail. not credential.params. {}", body);
            throw new BaseException("支付渠道返回异常");
        }

        return body.getJSONObject("credential").getJSONObject("params");
    }

Js

const values = data.map(item => Number(item[column.property]));

公式

• 简单的数学公式: 输入 $$ 随后 Enter 键回车，或者 快捷键：Ctrl + Shift + M

公式块

流程图

• 在空白处 输入 ``` mermaid 回车后，即可根据公式构建流程图
• mermaid 官网查看更多

graph TD
subgraph  演示一手
狗头客户 --> BOSS
BOSS --> k1(开发1号)
BOSS --> k2(开发2号)
BOSS --> k3(开发3号)
end

演示代码：

 graph TD
 subgraph  演示一手
 狗头客户 --> BOSS
 BOSS --> k1(开发1号)
 BOSS --> k2(开发2号)
 BOSS --> k3(开发3号)
 end

解释：

graph TD; # 其中LR指的是方向
subgraph lll # 子图 
	A --> B # 不同的箭头表示

graph x	graph 解读	指向	指向解读
TB	从上到下	-->	a—>b 带箭头
BT	自下而上	---	a—b 直线
RL	从右到左	--111--	a—打—b 中间文字
aLR	从左到右	A -.111 .->	a.... 锤 ...b 虚线，中间文字
TD	自上而下/与自上而下相同	a --> b & c --> d	a连接b,c 并且 b,c 连接 d

这里不再一 一列举了，感兴趣的话，可以去官网上一探究竟 mermaid-js.github.io/mermaid/

序列图

sequenceDiagram
    par 1  to 2
        1->>2: 你特么干啥呢？
    and 1 to 3
        1->>3: 5号喝不了酒
        par 3 to 1
            3->>1: 你说5号活不了多久？
        and 3 to 5
            3->>5: 1号说你活不了多久
        end
    end

演示代码：

    sequenceDiagram
     par 1  to 2
         1->>2: 你特么干啥呢？
     and 1 to 3
         1->>3: 5号喝不了酒
         par 3 to 1
             3->>1: 你说5号活不了多久？
         and 3 to 5
             3->>5: 1号说你活不了多久
         end
     end

其他语法介绍

来介绍一下我现在正在使用的样式，> 回车 就会在前方生成一条竖杠

引用：'``' 这个引用标识就是在 `` 在符号之间写的内容，都会被引用。

提示：Typora 编辑器是可以自定义样式的，文件 —> 偏好设置 —> 外观 —> 打开主题文件夹 —> 主题名称.css，前端大佬可在这里一显神通。

好了，本期 Markdown 基础说明就写到这里，有疑惑可以在评论区讨论哦，感谢大家观看！