天天看點

第一次使用CSDN寫部落格CSDN寫部落格

CSDN寫部落格

CSDN寫部落格使用的是MarkDown編輯器,使用過vscode的同學也都了解,這款編輯器能對代碼有很好的诠釋,是一款适合技術人的編輯器,今天對這款編輯器做一個大緻的介紹,友善第一次使用的同學們做個入門.

基礎格式

一.标題

标題是由#開頭,#号的多少代表标題的層級關系,具體如下:
 # 一級标題
 ## 二級标題
 .....
           

注意 : #與後面的标題中間隔了一個空格,而且必須置前才會生效,#号越多層級越小.1

二.文本樣式

文本是當做普通文本内容顯示,占文章的主要部分,使用者可以對文本進行修飾,來側重表現其重要性差別,強調性.
           
  • 強調
  • 加粗
  • 标記
  • 删除
  • 引用

強調

強調文本用兩種格式: *強調文本* _強調文本_
 使用後會使文本變成斜體格式,注重強調作用,效果如下:
           

強調文本也必須是頂格使用

加粗

加粗文本也是兩種格式: **加粗文本** __加粗文本__
使用後會使文本變成粗體格式,效果如下:
           

加粗文本加粗效果

标記

标記文本格式: ==标記文本==
使用後會使文本顔色改變,效果如下:
           

标記文本格式

删除

删除文本格式: ~~删除文本~~
使用後會在文本加一個橫線,表示删除效果:
           

删除文本效果

引用

引用文本格式: >引用文本
使用後效果如下:
           
引用文本

注意: 文本裡面可能有很多的數字字元,類似于H2O,210這種,可以通過下面所述表示:

數字元号

數字元号下标: H~2~O
數字元号上标: 2^10^
           

三.清單

清單可以用兩種格式:一種是層級關系,另一種是并列關系
并列又有兩種方式,數字并列和符号并列
           
  • 并列
    • 數字并列
    • 符号并列
  • 層級

并列

并列有數字開始并列,還有符号開始并列,格式如下:
數字并列:
	1. 項目一
	2. 項目二
	...
符号并列:
	* 項目一
	* 項目二
	...
使用效果如下:
           
  1. 項目一
  2. 項目二
  3. 項目三
  • 項目一
  • 項目二
  • 項目三

層級

層級關系可以随着關系深入,格式如下
- 項目
	* 項目
		* 項目
			...
效果如下:
           
  • 項目
    • 項目
      • 項目

注意:另外還有任務安排計劃顯示

  • 計劃任務
  • 完成任務

基礎加強

先來熟悉一下快捷鍵:

撤銷:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜體:Ctrl/Command + I
标題:Ctrl/Command + Shift + H
無序清單:Ctrl/Command + Shift + U
有序清單:Ctrl/Command + Shift + O
檢查清單:Ctrl/Command + Shift + C
插入代碼:Ctrl/Command + Shift + K
插傳入連結接:Ctrl/Command + Shift + L
插入圖檔:Ctrl/Command + Shift + G
查找:Command + F
替換:Command + G
           

在使用過程中使用快捷鍵能提高使用效率,多多使用就好了.

一.連結

連結是當我們需要顯示圖檔的時候,把我們的圖檔連結放在上面,就可以顯示出來.
連結形式:  [link](https://mp.csdn.net)
圖檔形式: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw)
帶尺寸的圖檔形式:![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw =30x30)
居中的圖檔: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center)
居中并且帶尺寸的圖檔: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center =30x30)
效果如下:
           

link
第一次使用CSDN寫部落格CSDN寫部落格
第一次使用CSDN寫部落格CSDN寫部落格
第一次使用CSDN寫部落格CSDN寫部落格
第一次使用CSDN寫部落格CSDN寫部落格

二.代碼片

Java代碼塊:
```
	public void static main(String[] args){
			System.out.printf("hello world");
	}
```
javaScript代碼塊:
```javascript
	var arg = 10;
	var bar = "bar";
```
效果如下:
           
public void static main(String[] args){
		System.out.println("hello world");
	}
           
var arg = 10;
	var bar = "bar";
           

三.表格

表格對于可視化界面來說是個很直覺的顯示方式,對于資料庫表的展示使用表格是最好不過了,格式如下
項目     | Value
-------- | -----
電腦  | $1600
手機  | $12
導管  | $1

| Column 1 | Column 2      |
|:--------:| -------------:|
| centered 文本居中 | right-aligned 文本居右 |
使用效果如下:
           
項目 Value
電腦 $1600
手機 $12
導管 $1
Column 1 Column 2
centered 文本居中 right-aligned 文本居右

注意:當冒号都存在時表示是居中顯示,隻有一個時,哪個存在表示靠哪裡顯示

自定義清單

格式如下:
Markdown
:  Text-to-HTML conversion tool

Authors
:  John
效果如下:
           
Markdown
Text-to-HTML conversion tool
Authors
John
Luke
Luke

四.數學公式

數學公式在文本裡面的顯示效果影響閱讀,是以應該把數學公式單獨顯示,以便使用者閱讀.
格式如下:
Gamma公式展示 
$\Gamma(n) = (n-1)!\quad\foralln\in\mathbb N$ 是通過 Euler integral

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
效果如下:
           

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通過 Euler integral

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

注意:通過在數學公式兩邊加上$$來表示數學公式參考文檔

進階進階

圖檔

1.插入甘特圖

格式如下:
```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section 現有任務
    已完成               :done,    des1, 2014-01-06,2014-01-08
    進行中               :active,  des2, 2014-01-09, 3d
    計劃中               :         des3, after des2, 5d
```
效果如下:
           

注意:甘特圖的參考文檔

2.插入UML圖

格式如下:
```mermaid
sequenceDiagram
張三 ->> 李四: 你好!李四, 最近怎麼樣?
李四-->>王五: 你最近怎麼樣,王五?
李四--x 張三: 我很好,謝謝!
李四-x 王五: 我很好,謝謝!
Note right of 王五: 李四想了很長時間, 文字太長了<br/>不适合放在一行.

李四-->>張三: 打量着王五...
張三->>王五: 很好... 王五, 你怎麼樣?
```
效果如下:
           

注意:UML圖的參考文檔

3.插入Mermaid流程圖

格式如下:
```mermaid
graph LR
A[長方形] -- 連結 --> B((圓))
A --> C(圓角長方形)
B --> D{菱形}
C --> D
```
效果如下:
           

注意:Mermaid流程圖的參考文檔

4.插入Flowchart流程圖

格式如下:
```mermaid
flowchat
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
cond=>condition: 确認?

st->op->cond
cond(yes)->e
cond(no)->op
```
效果如下:
           

注意:Flowchart流程圖的參考文檔

以上基本就是CSDN寫部落格需要的技巧了,想寫部落格的同學可以參考一下,寫部落格是一個很好的開始,希望同學們能在技術上越走越好,能分享更多更好的文章.

  1. 标題後面是一個文本概述内容,裡面不能用任何的文本格式. ↩︎

繼續閱讀