~~

CSDN部落格編輯小技巧（持續更新…）

~~

文章目錄

• CSDN部落格編輯小技巧（持續更新...）
• 1.目錄
• 2.空格
• 3.分割線
• 4.字型顏色
• 5.圖片居中
• 6.上標和下標
• 7.Markdown中數學公式整理
• 8.持續更新...2018-11-14

  自己寫部落格用到的一些優化美觀的小技巧，大部分都是來自網路，大神勿噴，萌新護體…

1.目錄

  新版本Markdown編輯器：

@[TOC]

  可以在文章最前面加上訴語句，然後在正文中需要處理好各級標題，如下：

  PS:新版編輯器需要在“#”後打一個空格，否則無法進行標題設定。
  目錄就會自動更新到上訴地方。
舉例如下：

@[TOC]

2.空格

& nbsp;
&ensp ;
&emsp ;
&thinsp ;
&zwnj ;
&zwj ;

  中文字間無論有幾個空格都會被當作一個看，這個時候就可以用到html中的幾種空格實體了。它們擁有不同的寬度，非斷行空格（&nbsp ;）是常規空格的寬度，可運行於所有主流瀏覽器。其他幾種空格（ &ensp ; &emsp ; &thinsp ; &zwnj ;&zwj ;）在不同瀏覽器中寬度各異。

& nbsp;

  它叫不換行空格，全稱No-Break Space，它是最常見和我們使用最多的空格，大多數的人可能只接觸了 ，它是按下space鍵產生的空格。在HTML中，如果你用空格鍵產生此空格，空格是不會累加的（只算1個）。要使用html實體表示才可累加，該空格佔據寬度受字型影響明顯而強烈。
&ensp ;

  它叫“半形空格”，全稱是En Space，en是字型排印學的計量單位，為em寬度的一半。根據定義，它等同於字型度的一半（如16px字型中就是8px）。名義上是小寫字母n的寬度。此空格傳承空格家族一貫的特性：透明的，此空格有個相當穩健的特性，就是其佔據的寬度正好是1/2箇中文寬度，而且基本上不受字型影響。
&emsp ;

  它叫“全形空格”，全稱是Em Space，em是字型排印學的計量單位，相當於當前指定的點數。例如，1 em在16px的字型中就是16px。此空格也傳承空格家族一貫的特性：透明的，此空格也有個相當穩健的特性，就是其佔據的寬度正好是1箇中文寬度，而且基本上不受字型影響。
&thinsp ;

  它叫窄空格，全稱是Thin Space。我們不妨稱之為“瘦弱空格”，就是該空格長得比較瘦弱，身體單薄，佔據的寬度比較小。它是em之六分之一寬。
&zwnj ;

  它叫零寬不連字，全稱是Zero Width Non Joiner，簡稱“ZWNJ”，是一個不列印字元，放在電子文字的兩個字元之間，抑制本來會發生的連字，而是以這兩個字元原本的字形來繪製。Unicode中的零寬不連字字元對映為“”（zero width non-joiner，U+200C），HTML字元值引用為： &#8204 ;
&zwj ;

  它叫零寬連字，全稱是Zero Width Joiner，簡稱“ZWJ”，是一個不列印字元，放在某些需要複雜排版語言（如阿拉伯語、印地語）的兩個字元之間，使得這兩個本不會發生連字的字元產生了連字效果。零寬連字元的Unicode碼位是U+200D (HTML: &#8205 ; &zwj ;）。

  此外，瀏覽器還會把以下字元當作空白進行解析：空格（&#x0020 ;）、製表位（&#x0009 ;）、換行（&#x000A ;）和回車（&#x000D ;）還有（&#12288 ;）等等。

PS

  我一般用兩個   實現兩個字元的空格。在敲完上訴字母外，一定要記得加一個 ;

3.分割線

  老版本編輯器是有分割線的選單可以直接使用，新版本沒得了，所以只能使用html的分割線了，程式碼實現，可以直接複製到自己的部落格中去，PS：雖然下面介紹的分割線很多，但是貌似只有一種顯示，可能markdown和html編輯器不同吧。。。

1、<HR>

1、

2、<HR align=center width=300 color=#987cb9 SIZE=1>
align 線條位置（可選left、right、center）；width 線條長度；color 顏色；size 厚度

2、

更多特效，請訪問：https://blog.csdn.net/qq_27709465/article/details/76945616

4.字型顏色

基本格式：

    <font color=red size=5 face="黑體">XXX</font>

前面程式碼設定字頭顏色，大小，字型格式。XXX為要顯示的字型，下面舉例：

記錄下基本常用的：

<font face="黑體">我是黑體字</font>
<font face="微軟雅黑">我是微軟雅黑</font>
<font face="STCAIYUN">我是華文彩雲</font>
<font color=red size=5 face="黑體">color=red size=72 face="黑體"</font>
<font color=blue size=6>color=blue</font>
<font color=gray size=6>color=gray</font>

效果：

我是黑體字
我是微軟雅黑
我是華文彩雲
color=red size=72 face=“黑體”
color=blue
color=gray

5.圖片居中

格式：

<center>

<img src="https://img-blog.csdnimg.cn/20181030155722545.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_0,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpZWNlc190aGlua2luZw==,size_16,color_FFFFFF,t_70"/>

</center>

說明：中間語句img src= 後為需要新增的圖片連結
舉例：
隨便找個圖片新增到編輯器中，如下：

圖片並不居中
第一步：將下訴程式碼複製過來：

<center>

<img src=""/>

</center>

第二步：

在你新增的圖片下，有相關的連結，將連結新增到程式碼中，如下：

 <center>
 <img src="https://img-blog.csdnimg.cn/20181114105133133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpZWNlc190aGlua2luZw==,size_16,color_FFFFFF,t_70"/>
 </center>

注意複製的位置和長度，效果如下：

6.上標和下標

比如要打出we，e為上下標，則編輯的時候這麼寫

。。。權值為w<sup>e</sup>。。。(上標)
。。。權值為w<sub>e</sub>。。。(下標)

效果：
。。。權值為w^e。。。(上標)
。。。權值為w_e。。。(下標)

7.Markdown中數學公式整理

看這裡：https://blog.csdn.net/zdk930519/article/details/54137476

包括希臘字母表喲

8.持續更新…2018-11-14