用 CSS 排版 #

本文根据 Custom CSS (opens new window) ，解释了你的排版的常见风格偏好。

要使用这个，请先阅读 Custom CSS (opens new window) 。

页面设置 #

改变背景 #

要改变书写区的背景，请参阅 https://support.typora.io/Backgound/ (opens new window) 。

改变书写区的宽度 #

要改变书写区的宽度，请参阅 https://support.typora.io/Width-of-Writing-Area/ (opens new window) 。

文本和字体 #

改变字体 #

要改变字体颜色、字体家族和字体大小，请参阅 https://support.typora.io/Custom-Font/ (opens new window) 。

大写字母标题 #

例如，为了使标题 1 大写，你可以使用。

h1 {
  text-transform: uppercase;
}

你可以通过在 Typora 中直接输入 HTML，部分地使一些文本变成大写字母。

<span style="text-transform: uppercase;">This text will be in uppercase</span>

小标题 #

例如，为了使标题 4 变成小标题，你可以使用。

h4 {
  font-variant: small-caps;
}

你可以通过在 Typora 中直接输入 HTML，部分地使一些文本变成小写字母。

<span style="font-variant: small-caps;">This text will be in small-caps</span>

font ligatures #

你可以通过以下方式改变 font ligatures (opens new window)

#write {
  /* Keyword values */
  font-variant-ligatures: normal;
  font-variant-ligatures: none;
  font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
  font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
  font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
  font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
  font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
  font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
  font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
  font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
  font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */
}

段落和对齐方式 #

辩证地看齐 #

#write {
  text-align: justify;
}

中心对齐 #

例如，将标题 4 居中对齐，你可以使用

h4 {
  text-align:center;
}

你可以通过在 Typora 中直接输入 HTML，部分地制作一个文本居中的段落。

<center>This text will be center aligned</center>

从右到左的写作 #

RTL（从右到左）的支持是有限的，见 https://support.typora.io/RTL/ (opens new window) 。

垂直写作 #

纵向写作支持是有限的。

#write {
   writing-mode: vertical-rl; /*make it vertical rendering*/
   -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  overflow-x: auto; /* This enables horizontal scrolling */
}

/* remove the default margin top */
#write > p:first-child, #write > ul:first-child, #write > ol:first-child, #write > pre:first-child, #write > blockquote:first-child, #write > div:first-child, #write > table:first-child {
    margin-top: 0;
}

关于已知的问题，见 https://github.com/typora/typora-issues/issues/1121 (opens new window) 。

Center / Do not Center Image #

在默认主题中，如果一个段落只有一张图片，Typora 会将其居中对齐。

要改变这种行为，或将多个图像居中对齐，请参阅 https://support.typora.io/Images/#align-images (opens new window) 。

组成部分 #

列表样式 #

见 https://support.typora.io/List-Style/ (opens new window)

标题/大纲/TOC 的自动编号 #

见 https://support.typora.io/Auto-Numbering/ (opens new window) 。

控制 TOC 水平 #

见 https://support.typora.io/TOC-levels/ (opens new window) 。

改变代码栅栏的颜色主题/源代码模式 #

见 https://support.typora.io/Code-Block-Styles/ (opens new window) 。

"删除" 已完成的任务 #

见 https://support.typora.io/Task-List/#erase-completed-tasks (opens new window) 。

图形的样式 #

见 https://support.typora.io/Draw-Diagrams-With-Markdown/#sequence-diagrams-options (opens new window) 和 https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid-options (opens new window) 。

编辑 #

改变聚焦/非聚焦文本的样式 Focus Mode (opens new window) #

见 https://support.typora.io/Change-Styles-in-Focus-Mode/ (opens new window) 。

改变写作方向 #

见 https://support.typora.io/RTL/ (opens new window) 。

不要隐藏 Markdown 的语法 #

你可以查看 https://theme.typora.io/theme/Monospace/ (opens new window) 主题。

简而言之，它使用 CSS 来防止 markdown 语法的隐藏。

.md-meta,
.md-content {
  display: inline;
}

上传图片