如何更好使用markdown输出pdf

白色玫瑰 程序猿

时间: 2023-07-11 阅读: 1 字数:3234

{}
背景:当前很多人比较常用的 markdown 编辑方式是用vscode编写,再使用 vscode 中 的 MPE 的进行预览。有时候会出现这种情况:想要最终输出PDF给客户,但是通过 vscode 中的插件生成 PDF 和MPE预览的效果差别很大。...

目录

如何更好的使用markdown输出PDF

<hr>

背景:当前很多人比较常用的 markdown 编辑方式是用vscode编写,再使用 vscode 中 的 MPE 的进行预览。有时候会出现这种情况:想要最终输出PDF给客户,但是通过 vscode 中的markdown 转 PDF插件生成 PDF 和MPE预览的效果差别很大。所以该篇致力于让输出的 PDF 和 MPE 中的预览效果接近。

1. 选择合适的 markdown 转 PDF 工具

在vscode中有很多种插件和方式转 PDF,我建议使用PDF(prince)方式转,主要原因是PDF(prince)生成的PDF是带目录标签的,如下图: 1

而使用 MARKDOWN PDF 生成的PDF是不带目录标签,如下图: 在这里插入图片描述

注意:当然PDF(prince)也有很多缺陷,比如KaTeX MathJax和 mermaid 无法工作问题。当然这些问题可以使用图片来解决。接下来将以 PDF(prince) 生成方式讲解。

1.1 PDF(prince)使用方法

在vscode中,右键markdown文件,点击 MPE 预览 在这里插入图片描述

然后再右测MPE预览中选择PDF (prince) 在这里插入图片描述

1.2 关于 princexml 丢失问题

在第一次使用 PDF(prince)可能会遇到 princexml 缺失问题

在 prince 官网 <a href="https://www.princexml.com/download/">prince</a>, 下载,并安装。 配置 prince 环境变量 重启 Vscode 即可

2. PDF 风格美化

完成第一步之后,其实生成 PDF 还是和预览的差距很大,此时需要通过自定义 CSS 来达到和预览效果一致。

ctrl-shift-p 然后运行Markdown Preview Enhanced: Customize Css命令,添加以下的代码:

.markdown-preview.markdown-preview {
  &amp;.prince {
   // 你的 prince css
  }
}

我这里提供一下我的CSS,这个配置是参考github.css的,也是为了让生成的 PDF 更接近 MPE 预览。

<a href="https://download.csdn.net/download/weixin_42942530/87365400">我的style.less配置</a>

3. MPE 小技巧

3.1 合并单元格

为了使用合并单元格,我最初选择了html的方式制作表格。但是会因此出现一些问题:

html表格会让markdown文件显得冗余。 html表格生成的 pdf 会可能出现缺漏,需要调整表格大小,只是对于后续文档维护来说,就会显得麻烦。 我这里提供 MPE 额外的 markdown 合并单元格的语法。

需要在 MPE 插件设置中打开 enableExtendedTableSyntax 选项来使其工作。 在这里插入图片描述

注意:该语法为 markdown 拓展语法,可能在其他 markdown 浏览工具中无法渲染成合并单元格的形式。

原文地址:https://blog.csdn.net/weixin_42942530/article/details/128566321?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168906542916800213021592%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168906542916800213021592&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-17-128566321-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown

本文章网址:https://www.sjxi.cn/detil/8201196d7dd74765a551d787db62c3d5

打赏作者

本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复