掘金编辑器使用教程

211 阅读2分钟

掘金 Markdown 编辑器

我们建议掘友使用 Markdown 编辑器来写作文章
文章来自 如何使用掘金编辑器专栏

博客图片

掘金 优点

  1. 全新的界面设计 ,将会带来全新的写作体验;
  2. 全新的 KaTeX数学公式 语法;
  3. 新增 Markdown 主题样式和代码高亮, Markdown 主题和代码样式可以自己去选择高亮样式
  4. 支持更多的mermaid图表
  5. 修复和增加了 写作模式、预览模式、左右区域同步滚轮设置 等功能;

功能快捷键

粗体:  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>`

文本样式

Markdown 语法:

**掘金编辑器上线了**(粗体Ctrl+B)
*掘金编辑器上线了*(Ctrl+I)
换行时尾部加上\ 可以实现换行

效果如下:

  • 掘金编辑器上线了
  • 掘金编辑器上线了

列表

无序列表

Markdown 语法快捷键为:Ctrl/Command+shift +U

效果如下:

  • 项目一
  • 项目二
  • 项目三

有序列表

Markdown 语法快捷键为:Ctrl/Command+shift +O

效果如下:

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

任务列表(Task lists)

Markdown 语法:

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

效果如下:

  •  任务一 未做任务 + 空格 + [ ]
  •  任务二 已做任务 + 空格 + [x]

图片

  • 导入本地图片Ctrl/Command+shift+I除此之外,还可以用拖放图片CMD + V 粘贴这两种方式来增加图片。

  • 导入链接图片![图片标题](url),此种情况图片标题不直接显示

链接

[这里是掘金技术社区](https://juejin.cn/)

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

效果如下
这里是掘金技术社区

行内代码

Markdown 语法:

像这样即可:`<hello>` `world`

Ctrl/Command + Shift +K 可插入Markdown语法。效果如下:

像这样即可:<hello> world

多行或者一段代码

Markdown 语法:

ini
复制代码

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

Ctrl/Command + Shift + C 可插入Markdown语法。效果如下:

js
复制代码
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 语法:

加删除线像这样用: ~~删除这些~~

效果如下:

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

分隔线

以下三种方式都可以生成分隔线:

***

*****

- - -

效果如下:




分隔线

以下三种方式都可以生成分隔线:

***

*****

- - -

效果如下:




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

图形

要记得东西太多,不如直接快捷键来的方便,放松一下脑袋不是不可!

掘金富文本编辑器

除了 Markdown 编辑器之外,我们了解到部分掘金用户是公司的 HR、产品经理或者其他岗位,因此我们也支持富文本功能。

切换编辑器

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

富文本编辑器