掘金编辑器小技巧

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

折叠代码\日志

<details>
  <summary>展开查看</summary>
  <pre>
    <code>
      console.log('hello world!')
    </code>
  </pre>
</details>

🔍 预览

        
console.log('hello world!')
    
  
  

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

<details>
  <summary>展开查看</summary>
  <pre>
    <code class="language-javascript">
console.log('hello world!');
    </code>
  </pre>
      <pre>
    <code class="language-typescript">
print(12)
    </code>
  </pre>
</details>

🔍 预览

        
console.log('hello world!');
    
  
  

        
console.log('hello world!');
    
  
  

嵌入Markdown

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

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

## 用户注册
## 用户登录
 
# 性能指标
## 响应耗时
 
</details>

🔍 预览

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

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

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

---
highlight: arta
---

折叠多个代码块

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

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

🔍 预览

PORT=3000

npm run build

使用脚注

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

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

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

🔍 预览

这是一个脚注示例¹。

这是一个脚注示例²。

时序图

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

预览

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

嵌入代码片段（可运行）

设置访客模式，尽可能多的展示预览区域

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

🔍 预览

嵌入视频

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

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

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

🔍 预览

Footnotes

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

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