Jupyterlab：如何在单元格工具栏中插入自定义元素/按钮/命令

Question

这是单元格工具栏

在设置中您可以添加/删除命令

但是没有明确说明可以添加什么以及如何添加。

Answer 1

我会用一个具体的例子来回答。

---

1. 找到命令

我还没有找到列出 Jupyterlab 设置中所有可用命令的方法。

这是一个列表https://jupyterlab.readthedocs.io/en/latest/user/commands.html#commands-list

但是如果您添加了扩展，则您的扩展命令不存在。

就我而言，我有这个笔记本工具栏

有一个命令（应用黑色格式化程序）。我想要一个按钮，将格式化程序仅应用于单元格，而不是整个笔记本。

我在这里找到的

为了了解单击此处所做的操作，我打开了浏览器的“开发人员工具”（通常为 F12）并选择了该菜单选项。

复制元素，你就得到了

<li tabindex="0" role="menuitem" class="lm-Menu-item" data-type="command" data-command="jupyterlab_code_formatter:black"><div class="f1vya9e0 lm-Menu-itemIcon"></div><div class="lm-Menu-itemLabel">Apply Black Formatter</div><div class="lm-Menu-itemShortcut"></div><div class="lm-Menu-itemSubmenuIcon"></div></li>

我们正在寻找的命令是

data-command="jupyterlab_code_formatter:black"

---

2. 找到图标。

您可以使用文本代替，但图标的“阅读”速度更快：O)

我们对现有的黑色格式化程序图标执行相同的操作（单击 Web 开发人员工具中的元素）。

并提取代码

<jp-button class="jp-ToolbarButtonComponent" aria-pressed="false" aria-disabled="false" title="Format notebook" tabindex="-1" current-value="" appearance="stealth" minimal=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1792 1792" data-icon="jupyterlab_code_formatter:format_all"><path xmlns="http://www.w3.org/2000/svg" class="jp-icon3" d="M1473 929q7-118-33-226.5t-113-189t-177-131T929 325q-116-7-225.5 32t-192 110.5t-135 175T317 863q-7 118 33 226.5t113 189t177.5 131T862 1467q155 9 293-59t224-195.5t94-283.5zM1792 0l-349 348q120 117 180.5 272t50.5 321q-11 183-102 339t-241 255.5T999 1660L0 1792l347-347q-120-116-180.5-271.5T116 852q11-184 102-340t241.5-255.5T792 132q167-22 500-66t500-66z" fill="#626262"></path></svg></jp-button>

图标是

data-icon="jupyterlab_code_formatter:format_all"

---

3. 编辑设置

添加命令和图标。 物品类型：命令

返回笔记本，选择一个代码单元格。

布阿拉！

我们有一个按钮可以将黑色代码格式化程序应用到单元格（最后一个）

文档：

• https://github.com/jupyterlab/extension-examples/blob/main/commands/README.md
• https://jupyterlab.readthedocs.io/en/latest/user/interface_customization.html