展语法

Typora扩展了诸如数学公式、目录、脚注、上/下标、图标操作等功能，并且支持常见的额HTML标签。

启用扩展语法，需要在“偏好设置”中开启所需要的扩展语法：

样式

• 数学公式语法：使用$把数学公式包裹起来，例如：

$ (2+5)*3/7 = 3 $
$ f(x,y) = \sqrt[n]{{x^n}{y^n}} $

显示效果：

数学公式的快捷键为Control + M。

注：数学公式扩展采用LaTeX语法标记，推荐阅读：

LaTeX完整教程：http://www.mohu.org/info/lshort-cn.pdf

常用LaTeX语法查询：https://www.mohu.org/info/symbols/symbols.htm

• 上/下标

语法：上标，使用^包裹需要上标的内容；下标，使用~包裹需要上标的内容，例如：

示例1^[注1]^
示例2~[注2]~

显示效果：

上下标操作没有对应的快捷键。

• 高亮

语法：使用==包裹需要高亮的内容，例如：

==这句话高亮==

显示效果：

高亮的快捷键为：Shift + Command + H

• 注释

语法：与代码注释相同，使用<!-- -->包裹注释内容，例如：

<!--这是注释-->

显示效果：

选中文本，转化为注释的快捷键：Control + -。

注：导出格式为pdf和docx（word）时，注释会被隐藏，不进行显示。

• 清除样式

快速清除一段内容的格式和样式，可以选中内容，然后使用快捷键：Command + \。

段落

• 目录

Typora会自动根据标题级别，获取标题作为目录。并且会随标题修改自动更新。

语法：在需要插入目录的位置，输入：[TOC]，然后按回车，例如：

注：需要为单独一行，且必须敲回车才会生效。

• 脚注链接

语法：用[^]包裹脚注，然后在文档任意位置（一般是尾部）添加对应的脚注内容，例如：

这段内容参考[^语法1]。
[^语法1]：http://www.mohu.org/info/lshort-cn.pdf

显示效果：

快速插入脚注链接的快捷键为：Option + Command + R

• 序列图

序列图是Typora自己的扩展语法，仅适用于导出为pdf、HTML、docx等格式，如果需要更好的兼容性，推荐在Typora内绘制后截图再插入。

语法：

```sequence
Title: TCP三次握手
客户端	-> 服务器: SYN
note right of 服务器: T1服务器建联延迟
服务器 --> 客户端: SYN ACK
note right of 服务器: T2客户端建联延迟
客户端 -> 服务器: ACK
```

显示效果：

注：语法中的标点符号需要使用英文；

Typora使用的序列图语法为：js-sequence-diagrams，语法说明：https://bramp.github.io/js-sequence-diagrams/

• 流程图

Typora的流程图基于flowchart.js语法，与序列图相同，仅适用于导出文件。

语法：

```flow
st=>start: 开机
op=>operation: P.O.S.T
cond=>condition: 正常
e=>end: 启动OS
st->op->cond
cond(yes)->e
cond(no)->op
```

显示效果：

注：注意英文标点和空格，多余的空格会引起语法报错；

flowchart.js 语法说明：https://flowchart.js.org/，或：https://github.com/adrai/flowchart.js/

• Mermaid

Mermaid是非常强大的图表插件，支持序列图、流程图和甘特图。使用说明：https://mermaidjs.github.io/。对于大量使用图表的同学们，建议专门学习下mermaid的使用。

其在Typora中的使用与前两个相同：

```mermaind
mermanid语句
```

由于mermaid内容较多，以后会做专题内容演示，这里不再讲解。

HTML标签

Typora 支持大量的HTML标签，但是由于可读性太差，且页面和视频导出时无法显示，对于日常的写作用处并不大，所以这里只简单介绍几个常用的类型。

• 文字颜色/大小

示例：

<span style="color:red;font-size:16px">红色</span>

显示效果

• 嵌入网页

<iframe height='200' scrolling='yes' title='' src='https://www.toutiao.com/c/user/97378548153/' frameboard='no' style='width:80%;'></iframe>

显示效果：

• 插入视频

语法：

<video src='./视频/使用Typora排版（一）.mp4'/>

显示效果：

注：需要使用HTML在Typora中排版的同学，可参考：https://support.typora.io/HTML/

Typora的扩展语法种类多，使用也复杂，只需要根据自己的需要选择学习即可，下节我们一起学习Typora的一些使用技巧。

天我们来聊一聊CSS文本两端对齐。

事情的起因是这样的，在Review一位同事做的页面时，发现好几处字符之间写了很多空格，于是问他为什么这么做，他说设计要求这几个文本的呈现宽度必须一致，但它们的字符个数又不同，所以就在字符数少的文本中添加空格从而达到文本两端对齐（字符均匀分布）的效果，于是我对他表示了侮辱性的赞美。

用添加空格符的方式实现文本两端对齐，除了不够优雅，容易被羞辱之外，还有其他三个问题：

1. 不同的浏览器，不同的移动设备，对空格符的展示宽度是有细微差别的，一个空格看不出影响，但是多个空格就无法保证一致了，很有可能出现没对齐或者折行的情况。

2. 任何页面都避免不了修改，如果文本需要更换，并且更换后字数发生变化，这将意味着之前的空格数量需要重新调整，非常不利于维护。

3. 某些页面上的文本，用户可能会去复制，但复制下来后发现含有很多空格符，仍需要二次编辑。

因此在日常开发中要避免使用空格符来实现两端对齐，而应该使用标准的CSS文本对齐属性来解决。

CSS文本对齐属性 text-align

这个属性大家经常用到的值有三个：

left：左对齐

right：右对齐

center：居中对齐

它还有一个属性值：justify，表示文本两端对齐，也就是让文本在固定宽度内平均分布，使两边不会出现空白。那么用这个属性是否就能很好的实现文本两端对齐呢？

通过测试发现，单行文本通过text-align:justify; 并不能实现两端对齐，为什么会出现这个情况？我们需要先了解一点点排版知识。

传统书刊的排版印刷对于整个自然段通常采用两端对齐的方式，这样就保证了排版的美观和良好的阅读体验。但是自然段的最后一行文字是左对齐的，因为最后一行文本意味着段落的结束，没有必要继续两端对齐了。

细心的朋友应该已经猜到了，在我们测试中，文本只有一行，意味着它也是最后一行，而CSS的文本对齐方式也遵循最后一行文本默认左对齐的原则，因此不能实现两端对齐。

好在CSS为我们提供了另外一个属性：text-align-last，这个属性用来额外设置段落最后一行文本的对齐方式，因此对于单行文本，我们只需要设置：text-align-last: justify;就可以了，亲测有效。

TIPS：单行文本要想实现文本两端对齐，除了上面说的方式，一定别忘了这个文本需要一个确定的宽度，不设置宽度，文本也就不存在两端。因此这个单行文本不能是行内布局，而应该是块级或者是行内块级布局。

好景不长，用上面的方式实现了文本两端对齐后，发现它只是在PC上有效，但是在IOS的系统浏览器里毫无效果，最后发现在IOS上不支持text-align-last这个属性，因此这个方式并不稳妥。

那么如何解决IOS的兼容问题呢？

着手点只有一个，那就是如何保证单行文本对于CSS来说并不是最后一行？这句话看似很奇怪，其实解决办法很简单，只需要给这个单行文本添加一个伪元素after即可。

someClass: after { content: “”}

由于添加了伪元素，单行文本不再是最后一行，伪元素才是， 同时伪元素的内容为空字符串，并不会对显示造成影响，因此完美解决了这个问题。

注意：伪元素after不仅要设置content，还要添加 width:100%; 和 display:inline-block; 这是因为：如果不设置宽度，伪元素内容并不会成为第二行，如果display设置成block，又造成了伪元素变成了另一个块级元素，所以要设置为inline-block。

最终的代码：

someClass {text-align:justify; width:300px;}

someClass: after { content: “”; width:100%; display:inline-block;}

CSS网页布局中，排版是一个麻烦的问题。作为一个优秀的网页设计师和Web前端开发人员，掌握一些简单的中文排版技巧是不可或缺的。所以今天小编特意整理了一些简单实用的技巧，希望对大家有所帮助。

文字排版

字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

body{font-family:"宋体";}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）

现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}

或

body{font-family:"微软雅黑";}

字号、颜色

可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

body{font-size:12px;color:#666}

粗体

可以使用下面代码实现设置文字以粗体样式显示出来。

p span{font-weight:bold;}

斜体

以下代码可以实现文字以斜体样式在浏览器中显示：

p a{font-style:italic;}

<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

下划线

有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：

p a{text-decoration:underline;}

<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

删除线

如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：

上图中的原价上的删除线使用下面代码就可以实现：

.oldPrice{text-decoration:line-through;}

段落排版

缩进

中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{text-indent:2em;}

注意：2em的意思就是文字的2倍大小

行间距（行高）

这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}

中文字间距、字母间距

如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：

h1{

letter-spacing:50px;

}

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

如果我想设置英文单词之间的间距呢？可以使用 word-spacing来实现。如下代码：

h1{

word-spacing:50px;

}

...

<h1>welcome to imooc!</h1>

对齐

想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。

h1{

text-align:center;

}

<h1>了不起的盖茨比</h1>

同样可以设置居左：

h1{

text-align:left;

}

<h1>了不起的盖茨比</h1>

还可以设置居右：

h1{

text-align:right;

}

<h1>了不起的盖茨比</h1>

图文环绕

在css中有一个常见的图文环绕效果。实现方式主要是通过float标签，将图片左浮动，或者右浮动。其相邻的文字，就会环绕图片排列，代码和效果如下：

竖排文字

使用writing-mode实现。writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。

比如：

p{ writing-mode: tb-rl;}

可以结合direction排版。

首字下沉

伪对象:first-letter配合font-size、float可以制作首字下沉效果。

比如：

p:first-letter{ padding: 6px; font-size: 32pt; float: left;}

汉字注音

如果我们想为汉字注音，就可以使用ruby标签和ruby-align属性来实现，比如：

<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

然后通过ruby-align设置其对齐方式。

这是一个比较冷门的技巧，可能平时使用不多，但小编觉得不妨提供给大家预防不时之需。

以上就是小编要跟大家分享的CSS网页布局中文排版技巧，虽然很简单，但简单的过程中其实暗藏玄机，如果大家喜欢还请记得收藏哦~