CSDN寫作技巧記錄

自定義簡單模板

@[toc]
## 二級標題
  
## 待補充
  
### 待補充
  

<br/>

> []()
[]()

<img src="" width="80%"/>
<img src="#pic_center" width="80%"/>
<img src="#pic_right" width="80%"/>
<center>文字居中</center>

數學公式粗體$\textbf{}$或者${\bf memory}$
數學公式粗斜體$\bm{}$

> [摘錄自“bookname_author”](鏈接)

<font color=#00aedb>高亮顏色說明</font>:突出重點
<font color=#c3cb71>個人覺得,</font>:待覈準個人觀點是否有誤

分割線
---
分割線

<br/>
<font color=#f37735>我是顏色爲00ffff的字體</font>
<br/>
<font size=2>我是字號爲2的字體</font>
<br/>
<font color=#f37735 size=2>我是顏色爲00ffff, 字號爲2的字體</font>
<br/>
<font face="微軟雅黑" color=#f37735 size=2>我是字體類型爲微軟雅黑, 顏色爲00ffff, 字號爲2的字體</font>
<br/>

Markdown在線編輯器 - MdEditor

段落設置

Markdown首行縮進

  由於Markdown語法主要考慮的是英文,所以對於中文的首行縮進並不太友好,兩種方法都可以完美解決這個問題。

  • 把輸入法由半角改爲全角。兩次空格之後就能夠有兩個漢字的縮進。“Shift+空格”鍵可以將輸入法從半角切換至全角,此時可以在Markdown編輯器中輸入空格,每個空格正好是一個漢字寬度,首行縮進只需鍵入2下空格即可。
  • 在開頭的時候,先輸入下面的代碼,然後緊跟着輸入文本即可。分號也不要掉。直接寫:
    • 一個漢字的縮進/全方大的空白:&emsp;&#8195;(實現首行縮進需要2個)
    • 半個漢字的縮進/半方大的空白:&ensp;&#8194;(實現首行縮進需要4個)
    • 一個英文字符的縮進/不斷行的空白格:&nbsp;&#160;(推薦採用上面兩種)
&emsp;&emsp;或者&#8195;&#8195;
&ensp;&ensp;&ensp;&ensp;或者&#8194;&#8194;&#8194;&#8194;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;或者&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;

Markdown強制換行

方法 命令 備註
鍵盤 空格鍵+空格鍵+回車鍵 製表不可用
命令 <br>或</br><br /> <br />中的br和/之間有1個空格
命令 <br/> <br/>中的br和/之間沒有空格 【2018.09.12更正】

CSDN-markdown頁內跳轉、頁間跳轉

通過heading實現頁內跳轉

// 創建一個id名稱爲heading_001的heading,作爲位置標記
<h1 id="heading_001">“標題001</h1>

// 創建一個href名稱也爲heading_001的鏈接,並且使用target="_self"參數來避免新開窗口
<a href="#heading_001" target="_self">點擊本行即會跳轉到“標題001”處</a>

通過錨點實現頁內跳轉、頁間跳轉:定義位置標記, 創建錨點

  “anchor”一詞即爲錨點,其在W3C標準中的解釋爲:資源中的某個區域可以是零個、一個或多個鏈接的目標或源。錨點可以引用整個資源,或者資源的特定部分,或者資源的特定表現形式。
  錨點是網頁製作中超級鏈接的一種,又叫命名錨記。錨點像一個迅速定位器一樣,是一種頁面內的超級鏈接。
  使用錨點可以在文檔中設置位置標記,這些位置標記通常放在文檔的特定主題處或頂部。然後可以創建鏈接到這些位置標記的錨點,這些錨點鏈接可快速將訪問者帶到指定位置。
  創建到位置標記的錨點鏈接的過程通常分爲兩步:首先,創建位置標記;然後,創建鏈接到該位置標記的錨點。

// 定義錨點的格式如下:
[錨點鏈接名稱](#錨點鏈接地址,必須是英文半角字符 "錨點鏈接的說明提示,即鼠標移動到錨點鏈接上所顯示的內容")
// 例如,
[錨點鏈接名稱(帶提示)](#anchor_000 "錨點鏈接到的目標位置")
[錨點鏈接名稱(不帶提示)](#anchor_000)

錨點鏈接名稱(帶提示)
錨點鏈接名稱(不帶提示)
點擊該錨點即會跳轉到“位置001”處
點擊該錨點即會跳轉到“位置002”處

// 通過錨點實現頁內跳轉、頁間跳轉的方式一

// 創建一個id名稱爲anchor_001的位置標記
<a id="anchor_001">“位置001</a>

// 創建一個錨點鏈接地址爲anchor_001的錨點
[點擊該錨點即會跳轉到“位置001”處](#anchor_001 "鏈接到目標位置001")
// 通過錨點實現頁內跳轉、頁間跳轉的方式二

// 創建一個id名稱爲anchor_002的位置標記
<div id="anchor_002"></div>“位置002” 或者 <div id="anchor_002">“位置002</div>

// 創建一個錨點鏈接地址爲anchor_002的錨點
[點擊該錨點即會跳轉到“位置002”處](#anchor_002 "鏈接到目標位置002")

“位置001”

“位置002”

文本設置

CSDN-markdown文字居中

<center>文字居中</center>

<center>*文字斜體居中*</center>  # 沒效果
<center>**文字加粗居中**</center>  # 沒效果

<div align='center'><font size='4'>文字居中,並設置字號爲1~7</font></div>

加粗文本

  • 加粗方法一:使用兩側加星號**加粗**
  • 加粗方法二:使用strong標籤<strong>加粗</strong>
  • 加粗方法三:使用b標籤<b>加粗</b>
**加粗**
<strong>加粗</strong>
<b>加粗</b>

<h1><font face="Arial black">“A heading”</font></h1>

其它:使用h加粗標籤<h1><font face="Arial black">“A heading”</font></h1>的效果

“A heading”

調節字體、字號、顏色

csdn如何修改文字體及顏色_markdown_YZY_001的博客 20181226
  Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過類似HTML的標記語法,它可以使普通文本內容具有一定的格式。但是它本身是不支持修改字體、字號與顏色等功能的!
  CSDN-markdown編輯器是其衍生版本,擴展了Markdown的功能(如表格、腳註、內嵌HTML等等)!對,就是內嵌HTML,接下來要講的功能就需要使用內嵌HTML的方法來實現。

我是默認設置的字體
<font face="黑體">我是字體類型爲黑體的字體</font> 
<font face="微軟雅黑">我是字體類型爲微軟雅黑的字體</font> 
<font face="STCAIYUN">我是字體類型爲華文彩雲的字體</font>
<br/>
<font color=#00ffff size=4>我是顏色爲#00ffff, 字號爲4的字體</font> 
<br/>
<font color=#0099ff size=7 face="黑體">我是顏色爲#0099ff, 字號爲4的字體</font>
<br/>
<font color=gray size=72>我是顏色爲gray, 字號爲72的字體,但字號超出1~7範圍</font>
<br/>

Markdown數學公式

Markdown 數學公式以及符號整理_SunshineSki的博客 20181118

CSDN數學公式指導手冊_一條肥魚的博客 20180705

中英文混排,排版

寫給大家看的中文排版指南 - 知乎

中英文混排時中文與英文之間是否要有空格? - 知乎

排版注意事項節選

待補充

配色方案

Most Popular Color Palettes

List of most favorited colors by users of www.color-hex.com

Metro UI Colors Color Palette

系列色——十六進制顏色碼:
#d11141 - #00b159 - #00aedb - #f37735 - #ffc425
系列色——RGB顏色值:
(209,17,65) - (0,177,89) - (0,174,219) - (243,119,53) - (255,196,37)

Pastel Colors Color Palette

系列色——十六進制顏色碼:
#1b85b8 - #5a5255 - #559e83 - #ae5a41 - #c3cb71
系列色——RGB顏色值:
(27,133,184) - (90,82,85) - (85,158,131) - (174,90,65) - (195,203,113)

Echarts中的一組顏色

r_hex = '#dc2624'     # red,       RGB = 220,38,36
dt_hex = '#2b4750'    # dark teal, RGB = 43,71,80
tl_hex = '#45a0a2'    # teal,      RGB = 69,160,162
r1_hex = '#e87a59'    # red,       RGB = 232,122,89
tl1_hex = '#7dcaa9'   # teal,      RGB = 125,202,169
g_hex = '#649E7D'     # green,     RGB = 100,158,125
o_hex = '#dc8018'     # orange,    RGB = 220,128,24
tn_hex = '#C89F91'    # tan,       RGB = 200,159,145
g50_hex = '#6c6d6c'   # grey-50,   RGB = 108,109,108
bg_hex = '#4f6268'    # blue grey, RGB = 79,98,104
g25_hex = '#c7cccf'   # grey-25,   RGB = 199,204,207

“復古”系列色

推薦多款好看的報表圖表配色方案(適用於PPT,大屏可視化分析) 20190713

系列色——十六進制顏色碼:
0780cf - 765005 - fa6d1d - 0e2c82 - b6b51f - da1f18 - 701866 - f47a75 - 009db2 - 024b51 - 0780cf - 765005
系列色——RGB顏色值:
(7,128,207) - (118,80,5) - (250,109,29) - (14,44,130) - (182,181,31) - (218,31,24) - (112,24,102) - (244,122,117) - (0,157,178) - (2,75,81) - (7,128,207) - (118,80,5)

其它配色

Standard colours for TradingView scripts · Kodify

CSDN-markdown圖片設置

圖片大小設置

通過使用 HTML Markup 中的<img src="">插入圖片,而不是 Markdown中的![]()插入圖片 來實現。步驟如下:

  1. 在CSDN編輯器中點擊上傳圖片按鈕(Ctrl+Shift+G)上傳圖片到CSDN圖片服務器,得到“CSDN圖片服務器自動生成的圖片地址鏈接”;
 ![這裏寫圖片描述](CSDN圖片服務器自動生成的圖片地址鏈接)
  1. 使用以下代碼替換上述代碼即可;
<img src="*.png" alt="img_name.png(顯示在博客中的圖片名稱)" width="300或80%" height="">  # 貌似沒法顯示圖片名稱

# 鎖定縱橫比,按比例縮放
<img src="CSDN圖片服務器自動生成的圖片地址鏈接" width="80%"/>
<img src="CSDN圖片服務器自動生成的圖片地址鏈接" width="80%" alt="圖片名稱"/>  # 貌似沒法顯示圖片名稱

# 自定義圖片的寬和高
<img src="CSDN圖片服務器自動生成的圖片地址鏈接" width = "300" height = "200">
<img src="CSDN圖片服務器自動生成的圖片地址鏈接" width = "300" height = "200" alt="圖片名稱"/>  # 貌似沒法顯示圖片名稱

CSDN的MarkDown圖片大小的調整_網絡_Be yourself. 20170120

圖片對齊方式設置

  • 圖片默認居左
  • 在src鍵值“圖片地址鏈接”的末尾加上#pic_center即可使圖片居中
  • 在src鍵值“圖片地址鏈接”的末尾加上#pic_right即可使圖片居右
<img src="" width="80%"/>
<img src="#pic_center" width="80%"/>
<img src="#pic_right" width="80%"/>

<img src="?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05lWFRfVm95YWdlcg==,size_16,color_FFFFFF,t_70" width="80%"/>
在src鍵值的?前面插入“圖片地址鏈接”即可使圖片居左(默認)

<img src="?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05lWFRfVm95YWdlcg==,size_16,color_FFFFFF,t_70#pic_center" width="80%"/>
在src鍵值的?前面插入“圖片地址鏈接”即可使圖片居中

<img src="?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05lWFRfVm95YWdlcg==,size_16,color_FFFFFF,t_70#pic_right" width="80%"/>
在src鍵值的?前面插入“圖片地址鏈接”即可使圖片居右

待補充

待補充

顏色名索引

顏色名索引

紅色和粉紅色,以及它們的16進制代碼。

#990033 #CC6699 #FF6699 #FF3366 #993366 #CC0066 #CC0033 #FF0066 #FF0033 ..#CC3399..
#FF3399 #FF9999 #FF99CC #FF0099 #CC3366 #FF66CC #FF33CC #FFCCFF #FF99FF #FF00CC

 

紫紅色,以及它們的16進制代碼。

#FF66FF #CC33CC #CC00FF #FF33FF #CC99FF #9900CC #FF00FF #CC66FF #990099 #CC0099
#CC33FF #CC99CC #990066 #993399 #CC66CC #CC00CC #663366      
 

藍色,以及它們的16進制代碼。

#660099 #666FF #000CC #9933CC #666699 #660066

#333366

#0066CC #9900FF #333399
#99CCFF #9933FF #330099 #6699FF #9966CC #3300CC #003366 #330033 #3300FF #6699CC
#663399 #3333FF #006699 #6633CC #3333CC #3399CC #6600CC #0066FF #0099CC #9966FF
#0033FF #66CCFF #330066 #3366FF #3399FF #6600FF #3366CC #003399 #6633FF #000066
#0099FF #CCCCFF #000033 #33CCFF #9999FF #0000FF #00CCFF #9999CC #000099 #6666CC
#0033CC
 

黃色、褐色、玫瑰色和橙色,以及它們的16進制代碼。

#FFFFCC #FFCC00 #CC99090 #663300 #FF6600 #663333 #CC6666 #FF6666 #FF0000 #FFFF99
#FFCC66 #FF9900 #FF9966 #CC3300 #996666 #FFCCCC #660000 #FF3300 #FF6666 #FFCC33
#CC6600 #FF6633 #996633 #CC9999 #FF3333 #990000 #CC9966 #FFFF33 #CC9933 #993300
#FF9933 #330000 #993333 #CC3333 #CC0000 #FFCC99 #FFFF00 #996600 #CC6633
 

綠色,以及它們的16進制代碼。

#99FFFF #33CCCC #00CC99 #99FF99 #009966 #33FF33 #33FF00 #99CC33 #CCC33 #66FFFF
#66CCCC #66FFCC #66FF66 #009933 #00CC33 #66FF00 #336600 #33300 #33FFFF #339999
#99FFCC #339933 #33FF66 #33CC33 #99FF00 #669900 #666600 #00FFFF #336666 #00FF99
#99CC99 #00FF66 #66FF33 #66CC00 #99CC00 #999933 #00CCCC #006666 #339966 #66FF99
#CCFFCC #00FF00 #00CC00 #CCFF66 #CCCC66 #009999 #003333 #006633 #33FF99 #CCFF99
#66CC33 #33CC00 #CCFF33 #666633 #669999 #00FFCC #336633 #33CC66 #99FF66 #006600
#339900 #CCFF00 #999966 #99CCCC #33FFCC #669966 #00CC66 #99FF33 #003300 #99CC66
#999900 #CCCC99 #CCFFFF #33CC99 #66CC66 #66CC99 #00FF33 #009900 #669900 #669933
#CCCC00
 

白色、灰色和黑色,以及它們的16進制代碼。

#FFFFF #CCCCCC #999999 #666666 #333333 #000000
 

16色和它們的16進制代碼。

Aqua Black Fuchsia Gray Gree Lime Maroon Navy Olive Purple
Red Silver Teal White Yellow Blue

待補充

待補充

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章