vscode的markdown进阶专题

vscode的markdown进阶专题

进阶知识

进阶知识内容需安装Markdown All in One插件

TOC目录

TOC目录就像本文文首的目录标题一样。

本文的一级标题名称为“vscode的markdown进阶专题”，用以下格式定义一级标题名称，会在保存时自动翻译成TOC标题；同时在修改或增加标题时也会自动更新。一般来说，windows的保存键是Ctrl+S。

- [一级标题名称](#一级标题名称)

单选框

- [ ] 单选框
+ [ ] 单选框
* [ ] 单选框
- [X] 单选框选中

生成html

按下Ctrl+shift+p，输入Markdown: Print current document to HTML后会在当前目录下生成html文件。

数学

• markdown数学语法
• markdown的mhchem语法
• markdown数学在线测试
• math-in-markdown

$a+b=c$

$a + b = c$

$$f(x)={\int }_{-\infty }^{\infty }\hat{f}(\xi )e^{2\pi \xi x}d\xi$$

$$
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi \xi x} \,d\xi
$$

快捷键

键	命令
Ctrl + B	切换粗体
Ctrl + I	切换斜体
Ctrl+ Shift+]	切换标题（上层）
Ctrl+ Shift+[	切换标题（下层）
Ctrl + M	切换数学环境
Alt + C	选中/取消选中单选框
Ctrl+ Shift+V	切换预览
Ctrl+Shift+F	格式化表格（Linux上的键绑定是Ctrl+Shift+I）

快速链接：复制一段链接，如http://www.baidu.com；选中文字，如百度；然后按下粘贴键。

vscode命令行

一般用Ctrl+Shift+P打开命令行输入命令即可：

1. 创建目录：Create Table of Contents
2. 更新目录：Update Table of Contents
3. 切换代码范围：Toggle code span
4. 将当前文档打印到HTML：Print current document to HTML
5. 切换数学环境：Toggle math environment
6. 切换无序列表：Toggle unordered list

支持的设置

在setting.json里配置。

名称	默认	描述
markdown.extension.italic.indicator	*	使用*或_包含斜体文本
markdown.extension.list.indentationSize	adaptive	对有序和无序列表使用不同的缩进大小
markdown.extension.orderedList.autoRenumber	true	您编辑时自动修复列表标记
markdown.extension.orderedList.marker	ordered	或者one：始终使用1.有序列表标记
markdown.extension.preview.autoShowPreviewToSide	false	打开Markdown文件时自动显示预览。
markdown.extension.print.absoluteImgPath	true	将图像路径转换为绝对路径
markdown.extension.print.imgToBase64	false	打印到HTML时将图像转换为base64
markdown.extension.print.onFileSave	false	在文件保存时打印到HTML
markdown.extension.showExplorer	true	在资源管理器面板中显示大纲视图
markdown.extension.syntax.decorations	true	添加装饰到删除线和代码跨度
markdown.extension.syntax.plainTheme	false	一个无干扰的主题
markdown.extension.toc.githubCompatibility	false	GitHub兼容性
markdown.extension.toc.levels	1…6	控制标题级别以显示在目录中。
markdown.extension.toc.orderedList	false	在目录中使用有序列表。
markdown.extension.toc.plaintext	false	只是纯文本。
markdown.extension.toc.tabSize	auto	控制TOC（auto或数字）的缩进尺寸
markdown.extension.toc.unorderedList.marker	-	使用-，*或+在目录中（对于无序列表）
markdown.extension.toc.updateOnSave	true	保存时自动更新目录。

可选功能

需安装其它插件

附注

需安装附注插件

附注¹内容

附注[^1]内容
[^1]:http://www.baidu.com

当然也可以更复杂一点

[^1]:[百度一下](http://www.baidu.com)

流程图

需安装流程图插件

有关此教程请参考mermaid

    ```mermaid
    graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
    ```

图表

需安装图表插件

配置参考Chart.js

    ```chart
    {
      "type": "pie",
      "data": {
        "labels": [
          "Red",
          "Blue",
          "Yellow"
        ],
        "datasets": [
          {
            "data": [
              300,
              50,
              100
            ],
            "backgroundColor": [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
            ],
            "hoverBackgroundColor": [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
            ]
          }
        ]
      },
      "options": {}
    }
    ```

{
  "type": "pie",
  "data": {
    "labels": [
      "Red",
      "Blue",
      "Yellow"
    ],
    "datasets": [
      {
        "data": [
          300,
          50,
          100
        ],
        "backgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ],
        "hoverBackgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }
    ]
  },
  "options": {}
}

表情

需安装表情插件

😄

参考：EMOJI CHEAT SHEET

插件

基础支持

GitHub

Name: Markdown All in One
Id: yzhang.markdown-all-in-one
Description: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
Version: 2.3.1
Publisher: Yu Zhang
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

markdown代码风格检查

Name: markdownlint
Id: davidanson.vscode-markdownlint
Description: Markdown linting and style checking for Visual Studio Code
Version: 0.26.0
Publisher: David Anson
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

流程图插件

Name: Markdown Preview Mermaid Support
Id: bierner.markdown-mermaid
Description: Adds Mermaid diagram and flowchart support to VS Code’s builtin markdown preview
Version: 1.1.4
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

附注插件

更好的附注支持

Name: Markdown Footnotes
Id: bierner.markdown-footnotes
Description: Adds [^footnote] syntax support to VS Code’s built-in markdown preview
Version: 0.0.7
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-footnotes

表情插件

Name: Markdown Emoji
Id: bierner.markdown-emoji
Description: Adds emoji syntax support to VS Code’s built-in markdown preview
Version: 0.0.9
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji

图表插件

Name: Chart.js Markdown Preview
Id: flomon.chartjs-markdown-preview
Description: Adds Chart.js support to VSCode’s builtin markdown preview
Version: 0.0.2
Publisher: FlomoN
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=FlomoN.chartjs-markdown-preview

已被支持的插件

此目录下所有插件已在其它插件中被支持。

基础支持-选择2

插件Markdown All in One中已基本支持此插件功能。
支持在浏览器中打开markdown，与Markdown All in One不要一起用！

Name: Markdown Preview Enhanced
Id: shd101wyy.markdown-preview-enhanced
Description: Markdown Preview Enhanced ported to vscode
Version: 0.3.13
Publisher: Yiyi Wang
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

TOC目录插件

插件Markdown All in One中已基本支持此插件功能。

Name: Markdown TOC
Id: alanwalk.markdown-toc
Description: Markdown TOC(Table Of Contents) Plugin for Visual Studio Code.
Version: 1.5.6
Publisher: AlanWalk
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=AlanWalk.markdown-toc

数学插件

插件Markdown All in One中已基本支持此插件功能。

Name: Markdown+Math
Id: goessner.mdmath
Description: LaTeX Math for Markdown … with macros and more
Version: 2.3.9
Publisher: goessner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=goessner.mdmath

Markdown快捷键插件

插件Markdown All in One中已基本支持此插件功能。

Name: Markdown Shortcuts
Id: mdickin.markdown-shortcuts
Description: Shortcuts for Markdown editing
Version: 0.11.0
Publisher: mdickin
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=mdickin.markdown-shortcuts

单选框插件

插件Markdown All in One中已基本支持此插件功能。

Name: Markdown Checkbox
Id: pkief.markdown-checkbox
Description: With this extension you can create checkboxes in markdown and mark them quickly.
Version: 1.6.0
Publisher: Philipp Kief
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=PKief.markdown-checkbox

基础知识的简单回顾

1. 链接：[显示文本](链接 '标题')
2. 图片：![图片显示文本](链接 '标题')
3. 分割线：---或***

标题

# 标题1
## 标题2
### 标题3
#### 标题4
##### 标题5
###### 标题6

字体

粗体
斜体
删除线
斜体加粗
斜体加粗删除线

**粗体**
*斜体*
~~删除线~~
***斜体加粗***
***~~斜体加粗删除线~~***

引用

一级引用

多级嵌套引用

> 一级引用
>>> 多级嵌套引用

无序列表

- 列表内容
+ 列表内容
* 列表内容
  - 二级列表
  + 二级列表
  * 二级列表

有序列表

注意二级列表前面的空格是三个

1. 列表内容
   + 二级列表
2. 列表内容
3. 列表内容

表格

| 标题 | 标题          |          标题 |
| ---- | :------------ | ------------: |
| 内容 | 左对齐列“:--” |          内容 |
| 内容 | 内容          | 右对齐列“--:” |

代码

    嵌套在行内的`代码`

    ```java
    标记为
    java语言的多行代码
    ```

---

1. 百度一下 ↩︎