为markdown导出的pdf添加页眉页脚

ops/2024/12/22 14:38:13/

markdown_views prism-dracula">

为Markdown导出的PDF添加页眉页脚

环境

vscode
扩展：Markdown PDF

操作方式

快捷键 Ctrl+, 打开设置
搜索 “markdown-pdf”
找到设置
- 页眉: Markdown-pdf: Header Template
- 页脚: Markdown-pdf: Footer Template

页眉插入示例内容：

此处使用base64内嵌图片（图片转base64工具：https://www.base64-image.de/）

<div style="display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin: 0 1cm;"><img src="data:image/png;base64,示例base64编码图片" style="height: 30px;">
</div>

display: flex; 设置容器为Flex布局，使子元素可以灵活排列。
justify-content: space-between; 使子元素在主轴方向上平均分布，首尾元素贴近容器边缘。
align-items: center; 使子元素在交叉轴方向上居中对齐。
font-size: 10px; 设置文字大小为10像素。
margin: 0 1cm; 设置容器的左右边距为1厘米。
src="data:image/png;base64,示例base64编码图片" 使用base64编码的图片作为图片源。
style="height: 30px;" 设置图片高度为30像素。

页脚插入示例信息：

<div style="border-top: 1px solid #000; font-size: 8px; margin: 0 1cm; padding-top: 5px;"><div style="display: flex; justify-content: space-between; align-items: center; line-height: 1.5; white-space: pre;"><span>示例公司名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例电话号码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例网站</span></div>
</div>

border-top: 1px solid #000; 在容器顶部添加一条1像素的黑色实线边框。
font-size: 8px; 设置文字大小为8像素。
margin: 0 1cm; 设置容器的左右边距为1厘米。
padding-top: 5px; 设置容器顶部内边距为5像素。
display: flex; 同上，设置为Flex布局。
justify-content: space-between; 同上，使子元素在主轴方向上平均分布。
align-items: center; 同上，使子元素在交叉轴方向上居中对齐。
line-height: 1.5; 设置行高为1.5倍的字体大小。
white-space: pre; 保持文本中的空白符（如空格和换行），不折行。
span 标签用于包裹文本内容，  表示非断行空格，用于控制文本间距。