vs code编辑markdown 实时预览

r囧r小猫 2022-05-20 03:11 469阅读 0赞

方法很简单，  
1、新建一个 readme.md 文件 ，用vs code打开  
2、按 F1 输入 markdown 选择下图的选项即可

![这里写图片描述][70]

\#markdown 基本语法

## 1、标题 ##

///下划线模式
    
    这是h1
    ======
    这是h2
    ------
    #这是h1
    ######这是h6

## 2、区块类 ##

> 用单箭头表示 >

## 3、无序列表 ##

实现方式

*  可以用 + 号

*  也可以用 - 号

*  还可以用 \* 号
    
     *  二级
        
         *  三级

*  用一个空格隔开

## 4、有序列表 ##

1.  用阿拉伯数字+ 英文的标点
2.  就是这样，也用单个空格隔开
    
    1.  这是二级
    2.  二级第二个
        
         *  符号前面4个空格

1.  用阿拉伯数字+ 英文的标点
    2.  就是这样，也用单个空格隔开
    	1. 这是二级
    	2. 二级第二个
    	    - 符号前面4个空格

## 5、连接 ##

用\[\]后面跟包有链接的小括号 `[qiphon](https://blog.csdn.net/qiphon3650)`[qiphon][] 中括号中的是显示的文字

## 6、加粗 ##

**这是加粗**的实现现 `**这是加粗**`

\#\#7、斜体  
*这是斜体* 的实现方式 `*斜体*`  
\#\#8、图片  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i9S4sfOs-1572161169694)(https://avatar.csdn.net/D/1/5/3\_qiphon3650.jpg “qiphon”)\]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzURixJm-1572161307501)(https://avatar.csdn.net/D/1/5/3_qiphon3650.jpg "qiphon")]

## 9、表格 ##

<table> 
 <thead> 
  <tr> 
   <th align="right">Tables</th> 
   <th align="center">Are</th> 
   <th>Cool</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="right">col 3 is</td> 
   <td align="center">right-aligned</td> 
   <td>$1600</td> 
  </tr> 
  <tr> 
   <td align="right">col 2 is</td> 
   <td align="center">centered</td> 
   <td>$12</td> 
  </tr> 
 </tbody> 
</table>

| Tables        | Are           | Cool  |
    | ------------- |:-------------:| -----:|
    | col 3 is      | right-aligned | $1600 |
    | col 2 is      | centered      |   $12 |

## 10、分隔线 ##

--------------------

这是分隔线 ，只需要3个\*号

## 11、代码段， ##

上面的例子展示实际东西用的都是代码段，6个反引号实现 \`

\#\#Markdown　Extra　定义列表语法：

项目１  
项目２  
: 定义 A  
: 定义 B

项目３

定义 C

定义 D

项目１
    项目２
    :   定义 A
    :   定义 B
    
    项目３
    :   定义 C
    
    :   定义 D

## 可以渲染序列图： ##

张三李四嘿，小四儿, 写博客了没?李四愣了一下，说：忙得吐血，哪有时间写。张三李四

可以渲染序列图：
    
    //```mermaid
    sequenceDiagram
    //张三->>李四: 嘿，小四儿, 写博客了没?
    //Note right of 李四: 李四愣了一下，说：
    //李四-->>张三: 忙得吐血，哪有时间写。
    //```

### 流程图： ###

Created with Raphaël 2.2.0开始我的操作确认？结束yesno

[序列图语法][Link 1]  
[流程图语法][Link 2]

[70]: /images/20220520/8a8f8bdeb0b345e79d5d2a763bf1f93f.png
[qiphon]: https://blog.csdn.net/qiphon3650
[Link 1]: http://bramp.github.io/js-sequence-diagrams/
[Link 2]: http://adrai.github.io/flowchart.js/