函数 display_html 在 Jupyter Lab 中不起作用

Question

此“R 代码”在 Jupyter 中运行良好，但在实验室中运行不佳：

library(IRdisplay)

display_html(
'

<script>  
code_show=true; 
function code_toggle() {
  if (code_show){
    $(\'div.input\').hide();
  } else {
    $(\'div.input\').show();
  }
  code_show = !code_show
}  
$( document ).ready(code_toggle);
</script>
  <form action="javascript:code_toggle()">
    <input type="submit" value="Code On/Off">
 </form>

<style type="text/css">

.container { width:80% !important; }

.main-container {
  max-width: 2000px;
  margin-left: 100px;
  margin-right: 10px;
}

/*body{font-family: Lucida Sans Unicode} */

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #004F59;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    color: #ffffff;
    background-color: #004F59;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background-color: #004F59;
}
</style>

'
)

我也尝试在其他情况下使用 display_html。这在实验室中不起作用有什么原因吗？它可以很容易地修复吗？谢谢

Answer 1

IRdisplay::display_html() 在 JupyterLab 中工作正常，函数的回调也是如此。 Notebook v6 和 JupyterLab 之间的唯一区别是：

jQuery 在 JupyterLab 中默认不可用（因为在 2020 年代不再需要它），因此 $(\'div.input\').hide(); 的选择将不起作用 - 请改用标准 document.querySelectorAll()
CSS 类不同的so样式（需要调整选择器）；目前尚不清楚你想要实现什么，但对于隐藏输入区域，你可以在 JupyterLab 中使用标准 JS 实现相同的效果：

IRdisplay::display_html('
<script type="text/javascript">
let code_show = true;
function code_toggle() {
  if (code_show) {
    document.querySelectorAll(".jp-Cell-inputArea").forEach(function(inputArea) {
      inputArea.style.display = "none";
    });
  } else {
    document.querySelectorAll(".jp-Cell-inputArea").forEach(function(inputArea) {
      inputArea.style.display = "";
    });
  }
  code_show = !code_show;
}
</script>
<form action="javascript:code_toggle()">
  <input type="submit" value="Code On/Off">
</form>
')

函数 display_html 在 Jupyter Lab 中不起作用

the function display_html not working in Jupyter Lab

r

jupyter-notebook

jupyter-lab