掘金之旅-编辑器使用介绍

我要养一只水母
246 阅读4分钟

编辑器使用介绍

文本样式

### 第一种方法
**掘金编辑器上线了**
*掘金编辑器上线了*
复制上面的两行内容就可得到编辑器
### 第二种方法
掘金编辑器的快捷键是：CMD+B,CMD+I
用这两个快捷键会出来星号，把下面的两航文字写上去
在写好的文字上面加三个反引号，在下面的文字上面加上反引号，这样才能出来编辑器
**掘金编辑器上线了**
*掘金编辑器上线了*

列表

无序列表

快捷键：Ctrl/Command+shift+U

  • 无序列表 1
  • 无序列表 2
  • 无序列表 3

有序列表

快捷键：Ctrl/Command+shift+O

  1. 有序列表 1
  2. 有序列表 2
  3. 有序列表 3

任务列表

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

复制代码
复制上面的两行代码出来的效果就是下面的样子
  • 任务一 未作任务 - + 空格 + [ ]
  • 任务二 已作任务 - + 空格 + [x]

图片

快捷键：Ctrl/Command+shift+I

**掘金编辑器上线了**
*掘金编辑器上线了*
可插入 Markdowm 语法。除此以外，还能够用拖放图片
CMD+V粘贴两种方式来增长图片

![掘金海盗图](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff0453d5664549ba8800f5cc1dc4d038~tplv-k3u1fbpfcp-watermark.image)
复制代码
复制上面的代码，就可以展示自己想要的图片

掘金海盗图

链接

快捷键：Ctrl/Command+K

**掘金编辑器上线了**
*掘金编辑器上线了*
[这里是掘金技术社区](https://juejin.cn/)
复制代码 复制上面的代码就可以得到一个链接

[这里是掘金技术社区](https://juejin.cn/)
复制这样代码在下面就可得到你想要的链接

这里是掘金技术社区

行内代码

快捷键：Ctrl/Command+Shift+K

像这样便可：`<hello>` `world`
复制代码
把上面的一行代码复制到下面就可以得到行内代码

像这样便可：<hello> world

多行或者一段代码

快捷键：Ctrl/Command+Shift+C

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


复制代码
复制上面的代码就可以带到我们想要的 js 代码

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j * 1000);
  })(i);
}
复制代码
复制上面的代码就可以得到我们想要插入的 js 代码

代码高亮

目前支持 100 多种代码高亮样式，可使用 highlight.js中的全部样式，点击查看链接里面的样式自己设置样式列表 样式预览

表格

设定居中，居左，居右

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

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

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

1.在上面选项中选择表格项
2.在上面的设置内容的地方设置内容当然居中语法
3.填充表格里面的内容
标题展示事例
居中内容1居中内容 2

删除线

加删除线像这样用： ~~删除这些~~
复制代码
复制上面的文字在下面就可以得到你要设置删除的文字

加删除线像这样用： 删除这些

分割线

***
*****
---
复制代码

输入这个***,上面就会多出一条分割线

输入这个 ***** 上面也会多出一条分割线，这里几个星号写在行内，行内的文字也加粗了

输入这个 --- 上面也会多出一条分割线 和在一起就是，三条线

数学公式

MathJax,你可以点击链接参考更多

行内公式

这是一个行内公式 $E=mc^2$ 您学废了吗？
复制代码
复制上面的代码的到下面的行内公式

这是一个行内公式 E=mc2E=mc^2 您学废了吗？

块级公式

$$ 
x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
复制代码
复制上面的代码可以得到下面的块级公式
x=−b±b2−4ac2ax = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}

更多数学公式使用方法可以点击这里地址

顺序图或流程图

```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```

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!```

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()
}

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 --> [*]```

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

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

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```

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

avatar
文章
阅读
粉丝