375 lines
7.3 KiB
CSS
375 lines
7.3 KiB
CSS
/* wx-mp-pro.css
|
||
* 专业微信公众号排版样式
|
||
* 参考：https://mp.weixin.qq.com/s/lFy98TGBSdsdSbymWZDRVg
|
||
* 目标：
|
||
* - 提供专业的技术类文章排版
|
||
* - 适合程序员教程、开发文档等内容
|
||
* - 精心调整的标题层级、代码块、表格和引用样式
|
||
* - 确保在微信公众号环境下不丢失关键样式
|
||
* 使用方式：
|
||
* - 在导出设置中选择 wx-mp-pro 主题
|
||
*/
|
||
|
||
.note-to-mp {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.75;
|
||
color: #2f2f2f;
|
||
background: #ffffff;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 段落 */
|
||
.note-to-mp p {
|
||
margin: 1.2em 0;
|
||
letter-spacing: 0.05px;
|
||
}
|
||
|
||
/* 标题：更专业清晰的层级感 */
|
||
.note-to-mp h1,
|
||
.note-to-mp h2,
|
||
.note-to-mp h3,
|
||
.note-to-mp h4,
|
||
.note-to-mp h5,
|
||
.note-to-mp h6 {
|
||
margin: 2.2em 0 1em;
|
||
line-height: 1.4;
|
||
color: #111111;
|
||
font-weight: 600;
|
||
border-radius: 8px;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.note-to-mp h1,
|
||
.note-to-mp h2,
|
||
.note-to-mp h3,
|
||
.note-to-mp h4,
|
||
.note-to-mp h5 {
|
||
}
|
||
|
||
/* H1：卡片式 */
|
||
.note-to-mp h1 {
|
||
font-size: 1.8em;
|
||
margin: 1.5em 0;
|
||
color: #1565F6;
|
||
background: #fff;
|
||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||
padding: 20px 20px 20px 25px;
|
||
}
|
||
|
||
/* H2：左条卡片 */
|
||
.note-to-mp h2 {
|
||
font-size: 1.5em;
|
||
margin: 2em 0 1.2em;
|
||
padding: 0.6em 1em;
|
||
background: #f5f7fa;
|
||
border-left: 6px solid #2563eb;
|
||
color: #111;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
/* H3-H5：渐进缩小 */
|
||
.note-to-mp h3,
|
||
.note-to-mp h4,
|
||
.note-to-mp h5 {
|
||
background: #f7f9fb;
|
||
color: #244b74;
|
||
padding: 0.7em 1.2em 0.7em 1.35em;
|
||
}
|
||
|
||
.note-to-mp h3 { font-size: 1.25em; }
|
||
.note-to-mp h4 { font-size: 1.1em; }
|
||
.note-to-mp h5 { font-size: 1em; }
|
||
|
||
/* 列表 */
|
||
.note-to-mp ul,
|
||
.note-to-mp ol {
|
||
margin: 1.2em 0 1.2em 1.4em;
|
||
padding: 0;
|
||
}
|
||
|
||
.note-to-mp li {
|
||
margin: 0.4em 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.note-to-mp li p {
|
||
margin: 0.5em 0;
|
||
}
|
||
|
||
/* 链接 */
|
||
.note-to-mp a {
|
||
color: #576b95;
|
||
text-decoration: none;
|
||
border-bottom: 1px solid rgba(87,107,149,0.3);
|
||
padding-bottom: 1px;
|
||
}
|
||
|
||
/* 引用：清晰专业的样式 */
|
||
.note-to-mp blockquote {
|
||
background: #f7f7f7;
|
||
border-left: 4px solid #07c160;
|
||
margin: 1.5em 0;
|
||
padding: 1em 1em;
|
||
color: #444;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.note-to-mp blockquote p {
|
||
margin: 0.6em 0;
|
||
}
|
||
|
||
.note-to-mp blockquote p:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.note-to-mp blockquote p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 代码块：清晰易读 */
|
||
.note-to-mp pre {
|
||
background: #f6f8fa !important;
|
||
border-radius: 5px;
|
||
overflow-x: auto;
|
||
border: 1px solid #e8e8e8 !important;
|
||
}
|
||
|
||
.note-to-mp pre code {
|
||
display: block;
|
||
background: transparent !important;
|
||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||
font-size: 0.87em;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
border: none !important;
|
||
}
|
||
|
||
/* 行内代码 */
|
||
.note-to-mp code:not(pre code) {
|
||
background: #f6f8fa;
|
||
padding: 2px 4px;
|
||
border-radius: 3px;
|
||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||
font-size: 0.87em;
|
||
color: #d14;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
/* 表格整体：连贯圆角边框 */
|
||
.note-to-mp table {
|
||
width: 100%;
|
||
border-collapse: collapse; /* 合并边框，避免断开 */
|
||
margin: 1.8em 0;
|
||
font-size: 0.9em;
|
||
border: 1px solid #e0e0e0; /* 整体外框 */
|
||
border-radius: 12px; /* 圆角 */
|
||
overflow: hidden; /* 确保圆角生效 */
|
||
}
|
||
|
||
/* 单元格 */
|
||
.note-to-mp th,
|
||
.note-to-mp td {
|
||
border: 1px solid #e0e0e0; /* 内部网格线 */
|
||
padding: 8px 10px;
|
||
text-align: left;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 表头 */
|
||
.note-to-mp thead th {
|
||
background: #e8f5e9;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
/* 隔行条纹 */
|
||
.note-to-mp tbody tr:nth-child(even) {
|
||
background: #fafafa;
|
||
}
|
||
|
||
/* 表格整体 */
|
||
.note-to-mp table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 1.8em 0;
|
||
font-size: 0.9em;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 单元格 */
|
||
.note-to-mp th,
|
||
.note-to-mp td {
|
||
border: 1px solid #e0e0e0;
|
||
padding: 8px 10px;
|
||
text-align: left;
|
||
line-height: 1.5;
|
||
transition: background 0.2s ease; /* 平滑过渡 */
|
||
}
|
||
|
||
/* 表头 */
|
||
.note-to-mp thead th {
|
||
background: #e8f5e9;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
/* 隔行条纹 */
|
||
.note-to-mp tbody tr:nth-child(even) {
|
||
background: #fafafa;
|
||
}
|
||
|
||
/* hover 效果 */
|
||
.note-to-mp tbody tr:hover {
|
||
background: #f1f8ff; /* 微蓝色高亮 */
|
||
}
|
||
|
||
/* 图片与图注 */
|
||
.note-to-mp img {
|
||
max-width: 100%;
|
||
display: block;
|
||
margin: 1.5em auto;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.note-to-mp figcaption {
|
||
text-align: center;
|
||
font-size: 0.8em;
|
||
color: #888;
|
||
margin-top: -0.2em;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
/* 分隔线 */
|
||
.note-to-mp hr {
|
||
border: 0;
|
||
height: 1px;
|
||
background: #e3e3e3;
|
||
margin: 2.5em 0;
|
||
}
|
||
|
||
/* 彩色标注块（预处理产生的 ||r/g/b/y ） */
|
||
.note-to-mp p[data-color-block] {
|
||
border-radius: 5px;
|
||
padding: 0.8em 1em;
|
||
margin: 1.5em 0;
|
||
font-size: 0.93em;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.note-to-mp p[data-color-block="r"] {
|
||
background: #ffebee;
|
||
border-left: 4px solid #ef5350;
|
||
}
|
||
|
||
.note-to-mp p[data-color-block="g"] {
|
||
background: #e8f5e9;
|
||
border-left: 4px solid #4caf50;
|
||
}
|
||
|
||
.note-to-mp p[data-color-block="b"] {
|
||
background: #e3f2fd;
|
||
border-left: 4px solid #2196f3;
|
||
}
|
||
|
||
.note-to-mp p[data-color-block="y"] {
|
||
background: #fff8e1;
|
||
border-left: 4px solid #ffca28;
|
||
}
|
||
|
||
/* 专业标注提示 */
|
||
.note-to-mp p[data-note-type="tip"],
|
||
.note-to-mp p[data-note-type="info"],
|
||
.note-to-mp p[data-note-type="warning"],
|
||
.note-to-mp p[data-note-type="danger"] {
|
||
border-radius: 5px;
|
||
padding: 0.8em 1em;
|
||
margin: 1.5em 0;
|
||
font-size: 0.93em;
|
||
}
|
||
|
||
.note-to-mp p[data-note-type="tip"] {
|
||
background: #e8f5e9;
|
||
border-left: 4px solid #4caf50;
|
||
}
|
||
|
||
.note-to-mp p[data-note-type="info"] {
|
||
background: #e3f2fd;
|
||
border-left: 4px solid #2196f3;
|
||
}
|
||
|
||
.note-to-mp p[data-note-type="warning"] {
|
||
background: #fff8e1;
|
||
border-left: 4px solid #ffca28;
|
||
}
|
||
|
||
.note-to-mp p[data-note-type="danger"] {
|
||
background: #ffebee;
|
||
border-left: 4px solid #ef5350;
|
||
}
|
||
|
||
/* 特殊标注：重要/注意/提示 */
|
||
.note-to-mp p:has(strong:first-child:contains("💡")) {
|
||
background: #e8f5e9;
|
||
border-left: 4px solid #4caf50;
|
||
border-radius: 5px;
|
||
padding: 0.8em 1em;
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
.note-to-mp p:has(strong:first-child:contains("⚠️")) {
|
||
background: #fff8e1;
|
||
border-left: 4px solid #ffca28;
|
||
border-radius: 5px;
|
||
padding: 0.8em 1em;
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
.note-to-mp p:has(strong:first-child:contains("✅")) {
|
||
background: #e3f2fd;
|
||
border-left: 4px solid #2196f3;
|
||
border-radius: 5px;
|
||
padding: 0.8em 1em;
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
/* 首段紧贴标题 */
|
||
.note-to-mp h1 + p,
|
||
.note-to-mp h2 + p,
|
||
.note-to-mp h3 + p {
|
||
margin-top: 0.7em;
|
||
}
|
||
|
||
/* 专业编程文章必备：行号提示标记 */
|
||
.note-to-mp .line-numbers {
|
||
font-size: 0.8em;
|
||
color: #999;
|
||
margin-right: 0.5em;
|
||
user-select: none;
|
||
}
|
||
|
||
/* 确保兼容微信的富文本环境 */
|
||
.note-to-mp pre code * {
|
||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
|
||
}
|
||
|
||
/* 适配微信公众号的粗体强调 */
|
||
.note-to-mp strong {
|
||
font-weight: 600;
|
||
color: #1322c5;
|
||
}
|
||
|
||
/* 行内高亮 */
|
||
.note-to-mp mark {
|
||
background: #fff8dc;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
/* 确保代码块内部的空格不会被压缩 */
|
||
.note-to-mp pre code {
|
||
white-space: pre !important;
|
||
}
|