Markdown Preview Enhanced 输出 PDF 时代码块自动换行且不另起一页

一、问题

最近有一个任务需要将 Markdown 源文件渲染为 PDF。由于我的源文件和要求都比较简单，就选择了之前一直用的 VSCode Markdown Preview Enhanced（MPE）扩展。使用该插件打开 md 文件的预览（Ctrl+K Ctrl+V）后，在 VSCode 预览窗格里右键选择 Open in Browser，在浏览器里打印就可以保存为 PDF 了。

然而，在导出类似以下的 md 时，却遇到了问题：

# 这是一个标题

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

Markdown Preview Enhanced 输出 PDF 代码块怎么紧靠上一个段落？

```c
// 这是代码块开始
#include <sys/types.h>
#include <unistd.h>
#include <stdio.h>
#include <pwd.h>
#include <stdio.h>      
#include <sys/types.h>
#include <ifaddrs.h>
#include <netinet/in.h> 
#include <string.h> 
#include <arpa/inet.h>

int main (int argc, const char * argv[]) {
    struct ifaddrs * ifAddrStruct=NULL;
    void * tmpAddrPtr=NULL;

    getifaddrs(&ifAddrStruct);

    while (ifAddrStruct!=NULL) {
        if (ifAddrStruct->ifa_addr->sa_family==AF_INET) { // check it is IP4
            // is a valid IP4 Address
            tmpAddrPtr=&((struct sockaddr_in *)ifAddrStruct->ifa_addr)->sin_addr;
            char addressBuffer[INET_ADDRSTRLEN];
            inet_ntop(AF_INET, tmpAddrPtr, addressBuffer, INET_ADDRSTRLEN);
            printf("%s IP Address %s\n", ifAddrStruct->ifa_name, addressBuffer);
        } else if (ifAddrStruct->ifa_addr->sa_family==AF_INET6) { // check it is IP6
            // is a valid IP6 Address
            tmpAddrPtr=&((struct sockaddr_in *)ifAddrStruct->ifa_addr)->sin_addr;
            char addressBuffer[INET6_ADDRSTRLEN];
            inet_ntop(AF_INET6, tmpAddrPtr, addressBuffer, INET6_ADDRSTRLEN);
            printf("%s IP Address %s\n", ifAddrStruct->ifa_name, addressBuffer);
        }
        ifAddrStruct=ifAddrStruct->ifa_next;
    }
    printf("Login name is %s\n", getpwuid(getuid())->pw_name);
    return 0;
}

// 以下这一行太长，需要自动换行
// Markdown Preview Enhanced 输出 PDF 代码块怎么自动换行？Markdown Preview Enhanced 输出 PDF 代码块怎么自动换行？Markdown Preview Enhanced 输出 PDF 代码块怎么自动换行？Markdown Preview Enhanced 输出 PDF 代码块怎么自动换行？Markdown Preview Enhanced 输出 PDF 代码块怎么自动换行？Markdown Preview Enhanced 输出 PDF 代码块怎么自动换行？
// 这是代码块结束
```

问题主要有：

• 代码块被另起一页，而不是紧贴上一个段落（可能是为了避免拆到不同的页里，但我希望拆到不同的页，避免另起一页）

• 代码块里超过 PDF 宽度的部分无法被显示，需要自动换行

二、解决方法

有个思路是更换为使用其他扩展如 Markdown PDF，或者用 pandoc 等。但目前我的需求还比较简单，感觉有点杀鸡用牛刀了。

参考GitHub 上的 issue，可以调整 Markdown Preview Enhanced 的 style.less 来解决。

首先，在 VSCode 里按 Ctrl+Shift+P，输入 markdown preview enhanced，找到“自定义样式”，根据自己的需求选择是工作区还是全局。

在 VSCode 跳转到 style.less 后，将 .markdown-preview.markdown-preview 这段替换为：

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  // https://github.com/shd101wyy/vscode-markdown-preview-enhanced/issues/1654#issuecomment-2272565424
  // 自动换行：预览用
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
  }

  // 自动换行：打印用
  @media print {
    pre, code {
      break-inside: initial; // 不另起一页，来自 ChatGPT
      white-space: pre-wrap;
      word-break: break-word;
      overflow: hidden;
    }
  }
}

然后再使用 MPE 进行预览，在浏览器中打印为 PDF 时，发现可以自动换行，并且不会自动另起一页了。