内置默认文档样式
这里摘录的是文档预览和 HTML 渲染导出中使用的部分默认样式,主要作用于 .markdown-body 内的正文。它们不是整个应用的界面样式,也不代表编辑状态下的全部样式;应用界面变量见内置主题样式。
最终效果还会受到主题、文档排版设置和导出格式影响。例如,预览和导出的标题有字号梯度,编辑器内的标题样式不一定与它们完全相同。Word、纯文本等输出也不会原样使用这份 CSS。
使用方式
如需调整导出样式,先在【设置】→【高级】→【自定义 CSS】中创建方案,只填写要覆盖的规则,再到导出窗口的相应格式选项中选择该方案。HTML、PDF、图片和 EPUB 支持选择自定义 CSS;其他格式请使用各自提供的样式设置。详见自定义 CSS。
下面保留常用的排版规则,省略字体文件、兼容性重置等细节。默认值会随版本更新,以当前应用的预览与导出结果为准。
常用规则
css
.markdown-body h1 {
padding-bottom: 0.3em;
font-size: 2em;
}
.markdown-body h2 {
padding-bottom: 0.3em;
font-size: 1.6em;
}
.markdown-body h3 {
font-size: 1.35em;
}
.markdown-body h4 {
font-size: 1.15em;
}
.markdown-body h5 {
font-size: 1em;
}
.markdown-body h6 {
font-size: 1em;
color: #777;
}
.markdown-body p {
margin: 0;
}
.markdown-body blockquote {
padding: 16px;
border-left: 0.25em solid rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.03);
}
.markdown-body ul,
.markdown-body ol {
padding-left: 2.5em;
}
.markdown-body table {
display: block;
width: 100%;
overflow: auto;
word-break: keep-all;
}
.markdown-body table.wp-table-sized {
display: table;
overflow: visible;
}
.markdown-body table th,
.markdown-body table td {
padding: 6px 13px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.markdown-body img {
max-width: 100%;
box-sizing: content-box;
background-color: #fff;
}
.markdown-body pre > code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre-wrap;
background: transparent;
border: 0;
}补充说明
- 列表:无序列表按层级使用实心圆、空心圆、方块;有序列表按层级使用数字、小写字母、小写罗马数字并循环。单个列表的设置可能覆盖默认值。自定义时应对
ul、ol设置list-style-type,不要统一覆盖li。 - 表格:带有指定列宽或满宽标记的表格使用
.wp-table-sized,避免普通表格的滚动规则破坏列宽。 - 图片:普通图片限制在正文宽度以内;满宽图片另有
img[data-full-width="1"]规则,将宽度设为100%、高度设为auto。 - 段落与页边距:字体、行高、段落间距及页边距还可能由导出选项单独生成,不宜只根据这份摘录推断最终尺寸。
