VScode Markdown环境搭建与学习

Markdown 图标

2020/8/17 一大罐白云
原文地址：https://www.cnblogs.com/Cloudcan/p/13518286.html

Markdown

  • Markdown是一种轻量级标记语言，允许人们使用易读易写的纯文本格式[1]编写文档。文档后缀为.md或.markdown。
  • Markdown编辑器：
    1. 本文推荐VSCode，因其跨平台、运行快速、扩展丰富且更新频繁。有更宽的自定义的空间。
    2. Typora也是不错的选择，跨平台，实现了所见即所得的用户体验，导出各种格式比较方便，非常适合Markdown小白。缺点是更新下载速度慢，文本太大时容易卡，有时会遇到奇怪的bug。对于学习markdown语法不是最好的选择。
    3. Notepad++也尝试过，作为编辑器它打开各种格式文本文档速度很快，但对Markdown支持不是很好，已知的几个官方预览插件已停止更新，不支持公式预览。
    4. Cmd Markdown 在线阅读编辑器。
  • 推荐使用Markdown的理由:上手快，容易学习，功能丰富，资源占用小。是写文章、做笔记、写文档的不二之选。

VScode Markdown环境搭建

推荐搭配:
Markdown All in One (提供丰富的快捷功能)
+
Markdown Preview Enhanced (支持\(KaTeX\)[2]公式预览和Mermaid图表,提供更优质的预览和自定风格)

VScode扩展Markdown All in One

  • 在VScode扩展中搜索Markdown All in One并安装
  • 在设置中勾选自动在侧边栏显示预览
  • 快捷键支持:
Key Command 指令
Ctrl/Cmd + B Toggle bold 切换粗体
Ctrl/Cmd + I Toggle italic 切换斜体
Ctrl/Cmd + Shift + ] Toggle heading (uplevel) 切换标题(上层)
Ctrl/Cmd + Shift + [ Toggle heading (downlevel) 切换标题(下层)
Ctrl/Cmd + M Toggle math environment 切换数学环境
Alt + C Check/Uncheck task list item 选中/取消任务列表项
Ctrl/Cmd + Shift + V Toggle preview 切换预览
Ctrl/Cmd + K V Toggle preview to side 切换预览到侧面
  • 格式化表格
    1. 完成表格分隔符、内容与缩进
    2. ALT+SHIFT+F
  • 自动生成、更新目录
    1. CTRL+SHIFT+P
    2. 生成目录: 输入mctoc ( 选择markdown all in one: create table of content )
    3. 更新目录: 输入mutoc ( 选择markdown all in one: updata table of content )
  • 转为HTML
    1. CTRL+SHIFT+P
    2. 输入mpcd ( 选择Markdown: Print current document to HTML)
  • 转PDF
    最稳妥的方式是将导出的HTML通过Chrome打开，再打印为PDF。
  • 数学
    使用Markdown Preview Enhanced或者Markdown+Math扩展实现

VScode扩展Markdown Preview Enhanced

  • 特性
    自动编辑器及预览滑动同步
    导入外部文件
    Code Chunk
    Pandoc
    Prince
    电子书
    幻灯片
    可扩展性
    LaTeX 数学
    导出 PDF, PNG, 以及 JPEG 凭借 Puppeteer
    导出漂亮的 HTML（移动端支持）
    编译到 GitHub Flavored Markdown
    自定义预览 CSS
    TOC 生成
    流程图 / 时序图 以及各种其他种类的图形
    嵌入 LaTeX, 渲染 TikZ, Chemfig 等图形
    Task List (Github Flavored)
    图片助手
    脚注
    Front Matter
    以及更多。。。
  • 功能过多，请直接访问文档查看

VScode扩展Markdown+Math

  • 在VScode扩展中搜索Markdown+Math并安装，即可实现Markdown对公式的支持
  • 该插件使用\(KaTeX\)实现\(\TeX\)公式快速实时渲染。
  • Markdown Preview Enhanced中已经包含了相同的功能

Markdown要素学习[3]

1.标题

使用 = 和 - 标记一级和二级标题

我展示的是一级标题
=================

我展示的是二级标题
-----------------

我展示的是一级标题

我展示的是二级标题

使用 # 号标记
使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2.段落与格式

换行

段落没有特殊的格式，直接编写文字就好，换行是使用两个以上空格加上回车。

字体
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本

分割线

在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。

***

* * *

*****

- - -

----------
删除线
~~BAIDU.COM~~

BAIDU.COM

下划线

Markdown 并无下划线的原生语法，因为会和链接的默认样式产生混淆。
解决方法是使用行内 HTML

<u>Underlined Text</u>

Underlined Text

脚注

脚注是对文本的补充说明，有的预览不支持脚注。

创建脚注格式类似这样 [^Jiaozhu]。  
[^Jiaozhu]:这是一个脚注说明。

创建脚注格式类似这样 [4]。

3.列表

无序列表

星号(*)、加号(+)、减号(-)作为列表标记，这些标记后面要添加一个空格

* 第一项
* 第二项
+ 第一项
+ 第二项
- 第一项
- 第二项
  • 第一项
  • 第二项
  • 第一项
  • 第二项
  • 第一项
  • 第二项
有序列表

使用数字并加上. 号来表示

1. 第一项
2. 第二项
3. 第三项
  1. 第一项
  2. 第二项
  3. 第三项
列表嵌套

子列表中的选项前面添加四个空格即可

1. 第一项
    1. 第一项
  1. 第一项
    1. 第一项

4.区块

段落开头使用 > 符号 ，然后后面紧跟一个空格符号，可以嵌套使用

>区块
>* 第一项
>>* 第一项

区块

  • 第一项
  • 第一项

5.代码

行内代码

使用反引号`把代码包起来（键盘左上角）

格式化输出函数`printf()`

格式化输出函数printf()

代码块

可以用```包裹一段代码，并指定一种语言（也可不指定）

    ```C
    #include <stdio.h>
    int main(){
      return 0;
    }
      ```

#include <stdio.h>
int main(){
  return 0;
}

6.链接

[BING](https://cn.bing.com)

BING

7.图片

感叹号!接方括号[]，里面放上图片的替代文字。接着一个普通括号()。里面放上图片的网址或文件地址，最后还可以用引号包住并加上选择性的 'title' 属性的文字。

![Markdown 图标](https://yzhang.gallerycdn.vsassets.io/extensions/yzhang/markdown-all-in-one/3.2.0/1595650433498/Microsoft.VisualStudio.Services.Icons.Default)  

![Markdown 图标](https://yzhang.gallerycdn.vsassets.io/extensions/yzhang/markdown-all-in-one/3.2.0/1595650433498/Microsoft.VisualStudio.Services.Icons.Default "Markdown")

Markdown 图标

Markdown 图标

8.表格

| 表头   | 表头   |
| ------ | ------ |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
表头 表头
单元格 单元格
单元格 单元格
表格对齐方式

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-:设置内容和标题栏居中对齐。

| 左对齐 | 右对齐 | 居中对齐 |
| :----- | -----: | :------: |
| 单元格 | 单元格 |  单元格  |
| 单元格 | 单元格 |  单元格  |
左对齐 右对齐 居中对齐
格 格 格
格 格 格

9.高级技巧

支持的 HTML 元素

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等

<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd>表格自动格式化

Alt+Shift+F表格自动格式化

转义

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号
公式
行内公式
$\Delta$

\(\Delta\)

公式块[5]
$$
\nabla\times\textbf{H}=\textbf{J}_{c}+\epsilon\frac{\partial\textbf{E}}{\partial t}\\
\nabla\times\textbf{E}=-\frac{\partial\textbf{B}}{\partial t}\\
\nabla\cdot\textbf{D}=\rho_{v}\\
\nabla\cdot\textbf{B}=0\\
$$

\[\nabla\times\textbf{H}=\textbf{J}_{c}+\epsilon\frac{\partial\textbf{E}}{\partial t}\\ \nabla\times\textbf{E}=-\frac{\partial\textbf{B}}{\partial t}\\ \nabla\cdot\textbf{D}=\rho_{v}\\ \nabla\cdot\textbf{B}=0\\ \]

Mermaid图表[6]

横向流程图:

	```mermaid
    graph LR
    A[方形] -->B(圆角)
        B --> C{条件a}
        C -->|a=1| D[结果1]
        C -->|a=2| E[结果2]
        F[横向流程图]
	```
graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图]

注释

  1. 可以直接被文本编辑器打开的文档。类似于HTML，它们同属于标记语言，markdown比HTML更轻量。word文档不属于纯文本文档，其中包含了大量的格式信息，所以word文档一般比纯文本文档更大。 ↩︎

  2. 不代表新的语法，它是一个web数学公式渲染器，使用web技术实现\(\TeX\)公式的快速渲染。这里可以在线体验\(KaTeX:demo\)。 ↩︎

  3. 参考菜鸟教程 ↩︎

  4. 这是一个脚注说明。 ↩︎

  5. 由KaTeX支持的\(\TeX\)函数列表\(KaTeX:supported\) ↩︎

  6. https://mermaid-js.github.io/mermaid/#/flowchart ↩︎

posted @ 2020-08-17 16:25  Cloudcan  阅读(513)  评论(0)  编辑  收藏  举报