展語法

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網頁布局中文排版技巧，雖然很簡單，但簡單的過程中其實暗藏玄機，如果大家喜歡還請記得收藏哦~