当前位置：首页 > news >正文

【Marp】自定义主题 - box01

news 来源：原创 2025/5/30 22:47:23

概述

因为要基于自己在语雀中书写的笔记，导出风格比较统一的卡片格式，发布到小红书作为图文笔记。

昨晚MD2Card崩了，死活打不开。于是拾起Marp，自己自定义主题。

今天是在昨天的基础上改进。写了第一个比较完整的自定义主题。

主题效果

下面是原始的没有加背景图片的效果：

以下是结合了InkScape制作的背景图的效果：

其主要就是在InkScape制作一个和主题尺寸一致（30cm×40cm）的背景图，并保存为.svg文件，并在css中作为背景。

CSS文件

完整的主题样式：

/**
* @theme box01
* @auto-scaling fittingHeader,math
* @size 3:4 30cm 40cm
*//* =========================================
* 主题名称：box01
* 作者：巽星石
* 概述：适合于小红书图文排版的样式
* 创建时间：2025年5月26日
* 最后修改时间：2025年5月27日
========================================= */@import "default";@import url("https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/styles/base16/pico.min.css");/* 变量 */
:root{--text-color:rgb(45, 45, 45);--p-size:38px;              /*基础字号*/--h1-size:38px;             /*H1字号*/--h2-size:38px;             /*H2字号*/--h3-size:38px;             /*H2字号*/--header-size:36px;         /*页眉字号*//* 基础颜色 */--basic-color:#50bda3;    /*基调颜色*/--basic-color2:#95d6c79d; /*基调颜色2*/
}/* ================ 基础页面设置 ================ */
/* 基础页面 */
section{color: var(--text-color);font-size: var(--p-size);background-image: url(bg.svg);padding: 3cm;line-height: 1.8em;
}/* 页眉 */
header,footer{font-size: var(--header-size);border-bottom: 1px solid #ccc;color: var(--text-color);background-color: var(--basic-color2);margin-left: -10mm;border-radius: 0px 5mm 5mm 0px;padding: 1mm 5mm;
}/* 页码 */
section::after{color:#3e3e3e;border-radius: 5mm;padding: 0px 0.8em;background-color: var(--basic-color2);font-size: 10mm;
}/* 标题 */
h2{text-align: center; font-size: 2cm;color: var(--basic-color);border-bottom: 2mm solid var(--basic-color);
}h3{border-left: 4mm solid var(--basic-color);text-indent: 0.3em;color:var(--basic-color);
}/* 图片 */
img{box-shadow: 2mm 2mm 5mm #ccc;border-radius: 5mm;text-indent: 0em;
}/* 无序列表 */
ul{margin: 0.5em 0px;background-color: #baf3e59c;padding: 1em 2em;border-radius: 5mm;
}ul li{list-style-type:"👉";/* margin-left: 1em; */text-indent: 0.3em;line-height: 1.5em;
}/* 行内代码 */
code {background-color: #ffffff76;border: 1px solid #cccccc72;margin: 0px 5px;font-size: 0.9em
}
/* 代码块 */
pre {background-color: #ffffff;
}/* 引用 */
blockquote {background: #ffffff;border-left: 10px solid var(#ccc);margin: 0.5em;padding: 0.5em;
}/* 表格 */
table {display: block;margin: 0 auto;
}th{background-color: var(--basic-color);color: white;
}
/* ================ 特殊页面设置 ================ */
/* 封面页 */
section.face{background-image: url(face-bg.svg);
}section.face h1{color:var(--basic-color);border-bottom: none;
}section.face h2{color:var(--basic-color);border-bottom: none;
}section.face div.hbox{background-color: #fff;font-weight: bold;color: var(--basic-color);
}section.face img{box-shadow: none;border-radius: 5mm;
}

测试页代码

用于测试主题效果的.md文件内容：

---
marp: true
theme: box01
size: 3:4
---<!-- _class: face -->
# Marp 主题开发 测试文档<!-- fit -->![alt text](image.png)
## 章节标题<!-- fit --><div class="hbox">
<center>小红书@巽星石</center>
<center>2025年5月27日</center>
</div>---
<!-- 
header: ![alt text](logo.png) Marp 主题开发 测试文档
footer: 小红书@巽星石
paginate: true
-->
本页测试三级标题# 一级标题
## 二级标题
### 三级标题---
## 无序列表
本页测试无序列表+ 列表项1
+ 列表项2
+ 列表项3
+ 列表项4
+ 列表项5
+ 列表项6
+ 列表项7
+ 列表项8---
## 行内代码和代码块本页测试`行内代码`和代码块的样式效果：```css
/* 无序列表 */
ul{margin: 0.5em 0px;background-color: #baf3e59c;padding: 1em 2em;border-radius: 5mm;
}
` ` `---
## 引用> 这里是引用---
## 表格| 姓名 | 性别 | 年龄 |
| --- | --- | --- |
| 张三 | 男 | 12 |
| 李四 | 男 | 25 |