使用掘金：✏️ 如何使用掘金編輯器寫文章

掘金 Markdown 編輯器

咱們建議掘友使用 Markdown 編輯器來寫做文章

掘金 Markdown 編輯器整合了 Markdown 標準語法，能夠看官方文檔

新的改變

工欲善其事，必先利其器。

爲了讓掘友們更好的創做出優秀的內容，咱們針對你們對編輯器的反饋和建議，咱們對Markdown編輯器進行了全新改造，增長諸多功能拓展與語法支持，除了標準的Markdown編輯器功能，咱們增長了以下幾點新功能，期待您更好的創做。

1. 全新的界面設計 ，將會帶來全新的寫做體驗；
2. 全新的 LaTeX數學公式 語法；
3. 新增 Markdown 主題樣式和代碼高亮， Markdown 主題和代碼樣式能夠本身去選擇高亮樣式；
4. 支持更多的mermaid圖表¹；
5. 增長了 多屏幕編輯 Markdown文章功能；
6. 修復和增長了 寫做模式、預覽模式、左右區域同步滾輪設置 等功能；

編輯器第一個版本主要是優化了一些歷史體驗問題和新增了一些你們經常使用功能，更多的功能支持還請期待後續版本的更新。

掘金編輯器開源貢獻地址：github.com/bytedance/b…

掘金編輯器主題開源貢獻地址：github.com/xitu/juejin…

功能快捷鍵

功能快捷鍵後續會迭代，暫時支持以下

粗體： Ctrl/ Command +B

斜體： Ctrl/ Command +I

連接： Ctrl/ Command + K

圖片： Ctrl/Command + Shift +I

有序列表： Ctrl/Command+shift +O

無序列表： Ctrl/Command+shift +U

代碼： Ctrl/Command + Shift +K

代碼塊： Ctrl/Command + Shift + C

標題

Markdown 語法：

# 第一級標題 `<h1>`
## 第二級標題 `<h2>`
###### 第六級標題 `<h6>`
複製代碼

展現效果以下：

第一級標題 <h1>

第二級標題 <h2>

第六級標題 <h6>

文本樣式

Markdown 語法：

**掘金編輯器上線了**
*掘金編輯器上線了*
複製代碼

掘金編輯器快捷鍵爲：CMD + B 、CMD + I

掘金編輯器上線了

掘金編輯器上線了

列表

無序列表

Markdown 語法快捷鍵爲：Ctrl/Command+shift +U

效果以下：

• 項目一
• 項目二
• 項目三

有序列表

Markdown 語法快捷鍵爲：Ctrl/Command+shift +O

效果以下：

1. 項目一
2. 項目二
3. 項目三

任務列表（Task lists）

Markdown 語法：

- [ ] 任務一 未作任務 `- + 空格 + [ ]`
- [x] 任務二 已作任務 `- + 空格 + [x]`

複製代碼

效果以下：

• 任務一 未作任務 + 空格 + [ ]
• 任務二 已作任務 + 空格 + [x]

圖片

Markdown 語法：

![掘金海盜圖](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff0453d5664549ba8800f5cc1dc4d038~tplv-k3u1fbpfcp-watermark.image)
複製代碼

Ctrl/Command + Shift +I 可插入Markdown語法。除此以外，還能夠用拖放圖片、CMD + V 粘貼這兩種方式來增長圖片。效果以下：

連接

Markdown 語法：

[這裏是掘金技術社區](https://juejin.cn/)
複製代碼

Ctrl/Command + K 可插入Markdown語法。

這裏是掘金技術社區

行內代碼

Markdown 語法：

像這樣便可：`<hello>` `world`

複製代碼

Ctrl/Command + Shift +K 可插入Markdown語法。效果以下：

像這樣便可：<hello> world

多行或者一段代碼

Markdown 語法：

```js
for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j * 1000);
  })(i);
}


複製代碼

Ctrl/Command + Shift + C 可插入Markdown語法。效果以下：

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j * 1000);
  })(i);
}
複製代碼

代碼高亮

目前咱們支持100多種代碼高亮樣式，可使用 highlight.js 中的全部樣式：全部樣式：

• 樣式列表
• 樣式預覽

表格

一個簡單的表格是這麼建立的：

項目	Value
電腦	$100
手機	$10
鼠標	$1

設定內容居中、居左、居右

使用:---------:居中

使用:----------居左

使用----------:居右

Markdown 語法:

| 第一列       | 第二列         | 第三列        |
|:-----------:| -------------:|:-------------|
| 第一列文本居中 | 第二列文本居右  | 第三列文本居左 |
複製代碼

效果以下：

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

刪除線

Markdown 語法：

加刪除線像這樣用： ~~刪除這些~~

複製代碼

效果以下：

加刪除線像這樣用： 刪除這些

分隔線

如下三種方式均可以生成分隔線：

***

*****

- - -

複製代碼

效果以下：

---

---

---

KaTeX數學公式

您也能夠訪問 MathJax 參考更多使用方法。

行內公式:

這是一個行內公式 $E=mc^2$ 您學廢了嗎？
複製代碼

效果以下：

這是一個行內公式 $E=mc^2$ 您學廢了嗎？

塊級公式:

$$ 
x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
複製代碼

效果以下:

$$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

您能夠找到更多關於的信息 LaTeX 數學表達式地址 ²

順序圖或流程圖

您可使用Mermaid生成各種圖表。更多語法能夠參考 Mermaid

甘特圖

```mermaid
gantt
title A Gantt Diagram
dateFormat  YYYY-MM-DD
section Section
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d
section Another
Task in sec      :2014-01-12  , 12d
another task      : 24d```

複製代碼

gantt
title A Gantt Diagram
dateFormat  YYYY-MM-DD
section Section
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d
section Another
Task in sec      :2014-01-12  , 12d
another task      : 24d

流程圖

```mermaid
graph TD
Start --> Stop```
複製代碼

graph TD
Start --> Stop

時序圖

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!```
複製代碼

sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!

類圖

```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}```
複製代碼

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}

狀態圖

```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]

Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]```
複製代碼

stateDiagram-v2
[*] --> Still
Still --> [*]


Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

餅狀圖

```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15```
複製代碼

pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15

關係圖

```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses```

複製代碼

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

旅程圖

```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me```

複製代碼

journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me

掘金富文本編輯器

除了 Markdown 編輯器以外，咱們瞭解到部分掘金用戶是公司的 HR、產品經理或者其餘崗位，所以咱們也支持富文本功能。

特別注意，在切換編輯器時，當前編輯器內內容可能丟失，請務必備份並看清提示語句

草稿

在掘金裏寫文章時，咱們的編輯器會自動保存您的內容而且能夠在草稿中找到：

特別注意的是，草稿一經發布沒法再轉爲草稿。

---

1. Mermaid語法說明↩
2. MathJax更多語法參考↩