VSCode将markdown文件导出为带书签的PDF文件

背景

        之前找工作的总结性文章,全是markdown形式的想直接变成PDF好携带。方便查找

初步探索遇到的问题

markdown直接在chrome钟打开,右键有打印选项,有一说一,效果不错,唯一缺点,没书签。
VSCode将markdown文件导出为带书签的PDF文件_第1张图片

怎么办

        查资料找到说 markdown preview enhanced + Prince 可以解决,于是开搞

正式开工

  1. vscode 安装插件 markdown preview enhanced

VSCode将markdown文件导出为带书签的PDF文件_第2张图片

  1. 安装Prince软件,就10M多点,官网链接 https://www.princexml.com/download/ ,可以选择比如安装在D盘下面,并添加环境变量。我的如下

VSCode将markdown文件导出为带书签的PDF文件_第3张图片

  1. 打开预览,然后右键,有导出pdf选项

VSCode将markdown文件导出为带书签的PDF文件_第4张图片

VSCode将markdown文件导出为带书签的PDF文件_第5张图片

效果一般,字体不太OK,书签倒是有了

VSCode将markdown文件导出为带书签的PDF文件_第6张图片

解决字体格式问题

  1. ctrl+shift+p 打开搜索,输入Markdown Preview Enhanced: Customize Css , 并点击进入,刚开始长这样

VSCode将markdown文件导出为带书签的PDF文件_第7张图片

  1. 输入这段配置,把字体设置成微软雅黑,并添加页码
.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  font-family: Microsoft YaHei;
  /* prince设置参数 */
  &.prince {
    /* 添加页码 */
    @page {
      @bottom {
        font-family: Microsoft YaHei;
        content: counter(page) " / " counter(pages)
      }
    }
  }
}
  1. 修改后长这样,就可以了

VSCode将markdown文件导出为带书签的PDF文件_第8张图片

效果不错

VSCode将markdown文件导出为带书签的PDF文件_第9张图片

未来工作

        我个人喜欢中文宋体,英文 Times New Roman。全微软雅黑虽然也挺好看,但是没达到我心目中最好的效果,有空找找怎么搞这东西。应该也是配置,就是不知道怎么单独配置中文和英文。找到了再更

你可能感兴趣的:(vscode,pdf,ide)