VS Code

Markdown Preview Enhanced (By Yiyi Wang)插件

Google Chrome或MS Edge浏览器

之前写过一篇文章，是关于用Markdown结合KaTeX写数学相关内容：

最近突然想把Markdown文章转为PDF格式，在一番尝试后选择了用Google Chrome或MS Edge浏览器转换，这两个浏览器都是基于Chromium的，所以效果差不多。Firefox数学公式渲染的好像不怎么好，当然可能是我的版本比较旧，你可以自己尝试新版Firefox或其他浏览器 (比如 Safari)，觉得效果不好再试试Chrome或Edge。

只是Markdown转PDF的话，编辑器和插件大概也能换其他的，只要是编辑器+插件能在Markdown中预览LaTeX系列数学公式，能导出html，并且html在浏览器打开能渲染显示公式的，大概都可以吧，不过这需要你自己尝试了。

标题说的不能换行大概是我用的插件特有的问题，不过还是写下来吧。

用VS Code打开Markdown文章 (先将Markdown文件保存在某个地方)－－右上角点击Markdown Preview Enhanced: Open Preview to the Side，也就是预览到侧边栏－－右键单击预览部分－－HTML－－HTML (offline)－－在Markdown文件的目录下会生成对应的html文件－－用Chrome或Edge浏览器打开－－点击浏览器右上角的菜单栏－－Print－－Save。这样就把Markdown转为PDF了。

不知道为什么在我的电脑上，如果在新标签中预览Markdown，就点不出HTML (offline)，只有预览到侧边栏才能点出来，可能是bug吧。

如果有Chrome的话，直接在预览界面右键——Chrome——PDF，不过需要联网才能使用这个功能。PDF也是保存在md文件同目录下。

Google Chrome或MS Edge浏览器将Markdown转PDF后文字公式渲染的都不错，但有个问题，我在Markdowan中数学公式源代码以$开头和结尾，并用 ` ` 括起来了(这样公式不会被渲染)，转换成html在标签中，当公式源代码过长时再导出PDF无法自动换行，会消失在边界处，比如这个公式：

` $ f'(x) = \lim \limits _{\Delta x \rightarrow 0} \frac {f(x + \Delta x) - f(x)} {\Delta x} $ `

导出PDF后成了这样：

\De后面就显示不出来了。

打开VS Code插件安装位置：

前缀/.vscode/extensions/shd101wyy.markdown-preview-enhanced-/node_modules/@shd101wyy/mume/styles/preview_theme

前缀，Linux 是 /home/用户名，Windows是 C:\Users\用户名，苹果是 User/用户名。

用VS Code打开其中的github-light.css文件，再用搜索功能搜索

html body pre,html body code{word-wrap:break-word;white-space:pre}

(也可以只搜索:

html body pre,html body code

反正只要将其后 { } 中的参数改了就可以了)

将

white-space:pre

改为

white-space:pre-wrap

之所以这样是因为Markdown Preview Enhanced插件导出html时默认是github-light.css格式，见这篇：

另外好像每次重装或更新插件都要重新更改github-light.css.

改完保存，这样之后所有的markdown转换html，再用Chrome或Edge浏览器打开后导出PDF，或者从预览直接导出PDF，公式源代码就都可以自动换行了：

试了试针对数学公式源代码，最好是在写Markdown时就用

\$ 内容 \$

并用KaTeX渲染，不要用

`$ 内容 $`

这样不用修改github-light.css也能换行。

另外针对代码块中编程语言源代码无法换行的问题，如果是注明了编程语言，比如：

```python内容```改前，彩色，有滑动条但在PDF中无法滑动，显示不完全：

需要修改

前缀/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.6.3/node_modules/@shd101wyy/mume/styles/prism_theme

中的github.css文件，注意是prism_theme，不是之前的preview_theme.

用VS Code打开github.css，打开搜索功能的正则表达式，搜索:

pre\[class\*="language-"\]

然后同样将后面 { } 中的

white-space:pre

改为

white-space:pre-wrap

另有一处没有white-space，不用管它。

效果：

如果没有注明编程语言，比如：

```内容```改前，无彩色，有滑动条但在PDF中无法滑动，显示不完全：

那么仍然是修改github-light.css，只不过是搜索

html body pre>code

将后面 { } 中的

white-space:pre

改为

white-space:pre-wrap

效果：

如果按以上说的内容仍然无法换行，可以看看在对应的地方有没有

word-break

word-wrap

之类的字样，然后自己试着修改一下参数。

另外如果想将代码块中的背景也输出的话，在浏览器打印PDF时选中背景图形，见这篇：