自定义样式

tip

添加自定义样式需要涉及一些 CSS(Cascading Style Sheet,层叠样式表)知识,如你对此不了解,可先查看相关教程。

在【选项】面板 -> 【高级】-> 【导出】部分,可设置自定义样式。



自定义样式就是普通的 CSS,和普通 Web 页面添加样式表操作一样。自定义的 CSS 会被添加到 <head> 标签中默认样式表后方的位置,即如果有同名的 CSS 规则,自定义样式表中的规则会覆盖默认规则。

自定义样式会在预览、导出时起作用,对编辑器不起作用。

HTML 结构

预览、导出时,文档会先生成对应的 HTML 文档,此 HTML 的结构大致如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width">
  <title>[页面标题]</title>
  <style>
    [默认样式表]
    [自定义样式表]
  </style>
</head>

<body>
  <div class="wonderpen-page fixed-width">
    <div class="wonderpen-content">
      <div class="markdown-body">
        [文档内容(HTML 格式)]
      </div>
    </div>
  </div>
  <script class="users-script">
    [自定义脚本]
  </script>
</body>
</html>

其中的【自定义样式表】部分,即是用户可以自定义的 CSS 内容。

页面最外层的元素总是 div.wonderpen-page,如果导出为 HTML 时选择了【固定宽度】,则此 div 还会有一个 .fixed-width 类。

文档内容则总是位于 div.wonderpen-content > div.markdown-body 元素下。你可以使用对应的 CSS 类选择符,为导出内容定义背景图片、字体之类样式。

如果你想对文档内容的样式做进一步自定义,则可关注下一节内容。

文档内容(markdown-body)

预览、导出时,文档原始内容会被当作 Markdown 格式,并被转换为 HTML。文档内容总是在 div.markdown-body 元素下。

div.markdown-body 内的 HTML 标签通常不再带有 idclass 属性,可直接对标签元素进行样式自定义,例如:

.markdown-body {
  color: #4758C4;
}

.markdown-body h1 {
  font-size: 24px;
}

如想进一步了解文档,可参考附录中的默认内置文档样式

示例:文本两端对齐

在将文档导出为图片、PDF 等输出的时候,有时我们会希望实现文本“两端对齐”的效果。

什么是文本的“两端对齐”呢?一图胜千言,看一下以下对比就知道了:



在妙笔中,通过【自定义样式】,可以很容易地实现文本的两端对齐效果。

相关代码如下:

.markdown-body {
  text-align: justify;
}

填写示例: