使用 VS Code + Markdown 编写 PDF 文档

本文介绍了如何利用Visual Studio Code和Markdown PDF扩展来编写和转换Markdown为PDF文档。内容涵盖字体样式、超链接、图片、代码块、列表、引用、表格、UML图、公式以及强制换页等Markdown语法的使用,并提供了详细的操作步骤。
摘要由CSDN通过智能技术生成

1

背景介绍       

作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 Markdown 这个技能,使用 Markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如何使用 VS Code + Markdown 来编写 PDF 文档。

2

效果演示       

312ee9e5eb4369f69ed6bc0c1e990ef0.png

131a39399a0f543247369c71907b999a.png

8800ba571bb9bc0be5d3d36a1277f1e4.png

3

环境准备       

  • [必须] 安装 Visual Studio Code

35286613550f17ea91059223378ae8a9.png

  • [必须] 安装 Extension - Markdown PDF,主要用于生成 PDF

65e47af7e8c1a41cbdc87db606958297.png

  • [可选] 安装 Extension - markdownlint,用于 markdown 语法提示

2443421886fb50aa7922b910a1fa4949.png

4

使用指引       

1. 打开预览

使用 Ctrl+Shift+V 热键打开文档 Preview

bfeb775c179837511115968a654da44a.png

2. 文本内容

## 文本内容


- 字体


  我是普通字体


- 斜体


  *我是斜体*


- 粗体


  **我是粗体**


- 粗斜体


  ***我是粗斜体***


- 删除线


  ~~我是删除线~~

3cc79d5301a0cff05efaa4bc75d90ff7.png

3. 超链接

## 超链接


- [GitHub](https://github.com/)


- <https://github.com/>

2e8348915ccc12f97c2f56e9ae15e201.png

4. 图片

## 图片


![图片](image.png "图片")

3013a9c717beaf5be19369119d5a34ff.png

5. 代码块

## 代码块


- 行内式


  演示各种编程语言的 `Hello World` 程序


- Java


  ```java
  public class HelloWorld  
{  
      public static void main(String[] args)  
      {    
          System.out.println("Hello,World!");  
      }  
  }  
  ```
  
- C


  ```c
  #include <stdio.h>  
  int main()
  {  
      printf("Hello,World!");
      return 1;
  }
  ```
  
- C++


  ```cpp
  #include <iostream>  
  #include <stdio.h>
  
  int main()  
  {  
      printf("Hello,World!--Way 1\n");  
      puts("Hello,World!--Way 2");  
      puts("Hello," " " "World!--Way 3");  
      std::cout << "Hello,World!--Way 4" << std::endl;  
      return 1;  
  } 
  ```


- Python


  ```python
  print "Hello,World!"   #Python 2.x
  print("Hello,World!")  #Python 3.x
  ```


- C#


  ```csharp
  using System;  
  class TestApp  
{  
      public static void Main()  
      {  
        Console.WriteLine("Hello,World!");  
        Console.ReadKey();  
      }  
  } 
  ```


- Shell


  ```bash
  echo "Hello,World!"
  ```

fda7c4c2a9731229dcdb39798c3278d1.png

6. 列表

## 列表


### 无序列表


- 第一项
- 第二项
- 第三项


### 有序列表


1. 第一项
2. 第二项
3. 第三项


### 任务列表


- [x] 吃饭
- [x] 睡觉
- [ ] 写代码

f0666f0a244984b2889f748636857842.png

7. 引用

## 引用


### 并列


> 引用1  
> 引用2  
> 引用3  


### 嵌套


> 第一层嵌套
>> 第二层嵌套  
>>>>> 第五层嵌套


### 引用中使用列表


> 引用
>
> 1. 第一项
> 2. 第二项
>
> - 第一项
> - 第二项
> - 第三项


### 列表中使用引用


- 第一项
    > 引用1  
    > 引用2
- 第二项

0aca84fbbc5d1f23d07d0316b25aa077.png

8. 表格

## 表格


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

850ca3a5f56545a797f1ce60b3709638.png

9. UML

## UML


- markdown-it-plantuml


  无法预览,项目地址:<https://github.com/gmunguia/markdown-it-plantuml>


@startuml
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml


- mermaid


  无法预览,项目地址:<https://mermaid-js.github.io/mermaid/#/>


```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

c3c556155cdb87be81ed505edb9f2ee4.png

69c593b3fa5f554e3162b5650052c038.png

10. 公式

## 公式


使用 LaTeX 语法,仅支持预览,不支持 pdf,需要先手动转换成图片或文本。


- 梯度下降的数学公式


$$\theta_{n+1} = \theta_{n} - \eta \cdot \nabla J(\theta) \tag{1}$$
其中:


$\theta_{n+1}$:下一个值


$\theta_n$:当前值


$-$:减号,梯度的反向


$\eta$:学习率或步长,控制每一步走的距离,不要太快以免错过了最佳景点,不要太慢以免时间太长


$\nabla$:梯度,函数当前位置的最快上升点


$J(\theta)$:函数


- 均方差函数


$$ loss = {1 \over 2}(z-y)^2 \tag{单样本} $$


$$ J=\frac{1}{2m} \sum_{i=1}^m (z_i-y_i)^2 \tag{多样本} $$

074fa9579f1763775b406a8becaca3a4.png

11. 强制换页

使用自动换页有时会不合理低把内容分到不同的页码,使用以下代码可以强制换页,美化 PDF 排版。

<div style="page-break-after: always"></div>

5

生成文档       

在 markdown 文件窗口右键选择 Markdown PDF: Export {pdf} 生成 PDF。

fed740467c1a24b951e789c093fca95f.png

6

参考总结       

以上就是本文希望分享的内容,如果大家有什么问题,欢迎在公众号 - 跬步之巅留言交流。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值