Skip to content

内置默认文档样式 ​

这里摘录的是文档预览和 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。
  • 段落与页边距:字体、行高、段落间距及页边距还可能由导出选项单独生成,不宜只根据这份摘录推断最终尺寸。