掘金编辑器小技巧

更多关于掘金编辑器参考请访问文档：juejin.cn/book/684473…

折叠代码\日志

  <summary>展开查看</summary>

      console.log('hello world!')

🔍 预览

console.log('hello world!')

还可以指定语言，使用class="language-xxxx"来指定语言。

  <summary>展开查看</summary>

    <code class="language-javascript">
console.log('hello world!');

    <code class="language-typescript">
print(12)

🔍 预览

console.log('hello world!');

console.log('hello world!');

嵌入Markdown

嵌入的markdorm的标题也会自动生成到目录中，所以这个建议不要使用标题

<summary>展开查看</summary>
 
# 用户手册

## 用户注册
## 用户登录
 
# 性能指标
## 响应耗时

🔍 预览

用户手册

用户注册

用户登录

性能指标

响应耗时

使用 YAML 前置数据块设置代码高亮样式

在文章头部使用highlight指定高亮样式，可以在编辑菜单中选择。

会在文章自动生成描数据块，文章的markdown会应用相应的样式。

---
highlight: arta
---

折叠多个代码块

    <summary>环境变量说明</summary>
    <pre><code>PORT=3000</code></pre>

    <summary>构建命令</summary>
    <pre><code>npm run build</code></pre>

🔍 预览

PORT=3000

npm run build

使用脚注

这是一个脚注示例[^1]。
这是一个脚注示例[^2]。

[^1]: 脚注内容在这里展示。

[^2]: 脚注内容在这里展示。

🔍 预览

这是一个脚注示例1。

这是一个脚注示例2。

时序图

可以插入简单的时序图等，因为交互不好，不建议插入复杂的，复杂的还是使用第三方的比较好。

预览

AliceJohnHello John, how are you?Great!See you later!AliceJohn

嵌入代码片段（可运行） 设置访客模式，尽可能多的展示预览区域

[jcode](https://code.juejin.cn/pen/7478608714732142630)

🔍 预览

嵌入视频

以前掘金支持嵌入西瓜视频，但西瓜视频已经不再独立运营，都合并到抖音了，但嵌入视频这一块还是没有跟进，并不支持嵌入抖音视频。

但如果你的视频是公开链接，可以曲线救国，通过代码片段的方式来嵌入。

[jcode](https://code.juejin.cn/pen/7535748731535097919)

🔍 预览

Footnotes

1. 脚注内容在这里展示。 ↩
2. 脚注内容在这里展示。 ↩