使用掘金:✏️ 如何使用掘金编辑器写文章

·  阅读 2411

掘金 Markdown 编辑器

我们建议掘友使用 Markdown 编辑器来写作文章

掘金新版 Markdown 编辑器

掘金 Markdown 编辑器整合了 Markdown 标准语法,可以看官方文档

新的改变

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

为了让掘友们更好的创作出优秀的内容,我们针对大家对编辑器的反馈和建议,我们对Markdown编辑器进行了全新改造,增加诸多功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,期待您更好的创作。

  1. 全新的界面设计 ,将会带来全新的写作体验;
  2. 全新的 LaTeX数学公式 语法;
  3. 新增 Markdown 主题样式和代码高亮, Markdown 主题和代码样式可以自己去选择高亮样式
  4. 支持更多的mermaid图表1
  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 粘贴这两种方式来增加图片。效果如下:

image.png

链接

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=mc2E=mc^2 您学废了吗?

块级公式:

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

效果如下:

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

您可以找到更多关于的信息 LaTeX 数学表达式地址 2

顺序图或流程图

您可以使用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、产品经理或者其他岗位,因此我们也支持富文本功能。

切换编辑器

特别注意,在切换编辑器时,当前编辑器内内容可能丢失,请务必备份并看清提示语句

富文本编辑器

草稿

在掘金里写文章时,我们的编辑器会自动保存您的内容并且可以在草稿中找到:

草稿

特别注意的是,草稿一经发布无法再转为草稿。

分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改