如何在 Jupyter Lab/Notebook 输出单元格中找到 css class 和图形元素（范围滑块）的代码并修改它以更改其外观？

Question

我有以下 graphs/outputs，分别来自 VSCode、VSCode-Insiders 和 Jupyter Lab。

VSCode

VSCode-业内人士

Jupyter 实验室

我想更改您在底部看到的滑块的外观。

基本上我想删除文本和数字并更改滑块旋钮的外观及其相对于图像位于中心的位置。

我的想法是，由于 VSCode 是一个电子应用程序，而 Jupyter Lab 在浏览器中运行，因此应该可以使用自定义目标 CSS 修改单个输出单元格。

作为示例，我有以下在所有 3 种设置中完美运行的示例，并通过为文本着色来更改输出单元格的 CSS，这告诉我可以做我想做的事滑块元素也是 -

%%html
<style>.css-example { color: darkcyan; }</style>
<span class='css-example'>This text has a nice colour</span>

但在我的例子中，我必须针对特定元素 - “滑块”。我在 VSCode 和 VSCode Insiders 中切换到开发者模式 - “Ctrl+Shift+I”或“帮助 -> 切换开发者工具”。但是我无法 select 使用“检查器”的滑块元素。

幸运的是，在 Jupyter Lab 中我能够 select 滑块元素，但是 class vega-bind（具有滑块的 div 有一个 class 调用 vega-bind) 中似乎没有任何 CSS - 至少与 vega-bind 相关的内容没有出现在开发者工具中。

有什么方法可以实现我在 Jupyter Lab 和 VSCode Jupyter Notebooks 中尝试做的事情吗？

以下代码生成您在上面看到的输出 -
要求 - altair、pandas 和 numpy

import altair as alt
import pandas as pd
import numpy as np

rand = np.random.RandomState(42)

df = pd.DataFrame({
    'xval': range(100),
    'yval': rand.randn(100).cumsum()
})

slider = alt.binding_range(min=0, max=100, step=1, name='cutoff')
selector = alt.selection_single(bind = slider, init={'cutoff': 50})

alt.Chart(df).mark_point().encode(
    x='xval',
    y='yval',
    color=alt.condition(
        alt.datum.xval < selector.cutoff,
        alt.value('red'), alt.value('blue')
    )
).add_selection(
    selector
)

Answer 1

事实证明，VSCode 中的 Jupyter Notebooks 呈现为 iframe，并且是您无法从侧边打开的主要开发人员工具面板 debug/run 开发人员工具打开的独立进程。

要找到笔记本 iframe 的 CSS、HTML 等，您必须打开 Webview Developer Tool，您可以通过键入Open Webview Developer Tools 在 命令面板中 即 CTRL+Shift+P -> 打开 Webview 开发者工具

现在您可以 select 检查器 并将鼠标悬停在您喜欢的任何元素上 see/edit 它的 CSS。

如何在 Jupyter Lab/Notebook 输出单元格中找到 css class 和图形元素（范围滑块）的代码并修改它以更改其外观？

How to find the css class and code for a graphical element (range slider) in Jupyter Lab/Notebook output cell and modify it to change its appearance?

css

python-3.x

visual-studio-code

jupyter-notebook

jupyter-lab