我如何（可以）在 Jupyter 笔记本下使用 custom.js 文件？

Question

在 IPython 笔记本（例如 v3.1）中，我可以添加一个 ~/.ipython/profile_default/static/custom/custom.js 文件来执行一些自定义 JavaScript。例如，我可以这样做：

require(['base/js/namespace', 'base/js/events'], function(IPython, events) {
    console.log("A");
    events.on('app_initialized.NotebookApp', function() {
        console.log("B");
    });
    console.log("C");
});

然后，在 JS 控制台中，我会看到 A，然后是 B，然后是 C。

现在，从 4.0 版开始，他们已将其拆分到 Jupyter 笔记本中。加载相同的文件（尽管它位于~/.ipython 下，而不是~/.jupyter 下），然后执行代码。但是，我不再看到B 行。我猜该应用程序没有被初始化。我仍然看到它在source code 中被触发，但这是稍后发生的，还是只是不起作用？

我怎样才能让事情恢复正常？我不再需要等待app_initialized了吗？是否在某处记录了这些内容？

编辑

This page 似乎暗示现在的方法是创建一个自定义扩展并将所有操作放在load_ipython_extension 函数中。是对的吗？如果是这样，那么mathjax怎么样？和 CodeMirror 选项？

Answer 1

使用custom.js 仍然对我有用，但它似乎移动了一点。

当前（版本4.2.3）以及即将发布的5.0 版本的文档中，它位于~/.jupyter/custom/custom.js。请参阅http://jupyter-notebook.readthedocs.io/en/latest/examples/Notebook/JavaScript%20Notebook%20Extensions.html#custom.js的文档

您可以通过在笔记本中执行此 sn-p 来显示custom.js 的路径和内容：

from jupyter_core.paths import jupyter_config_dir
jupyter_dir = jupyter_config_dir()
import os.path
custom_js_path = os.path.join(jupyter_dir, 'custom', 'custom.js')
print("searching for custom.js in ", custom_js_path)
#  my custom js
if os.path.isfile(custom_js_path):
    with open(custom_js_path) as f:
        print(f.read())
else:
    print("You don't have a custom.js file")

Answer 2

我怎样才能让一切重新运转起来？难道我只是不需要等待 app_initialized 了？

我对执行此操作的推荐方法没有深入的了解，但在 Jupyter/IPython 4.0 中，等待“notebook_loaded.Notebook”而不是“app_initialized.NotebookApp”可以正常工作。即使用这一行：

    events.on("notebook_loaded.Notebook", function () {

Answer 3

这个问题出现在 Github 问题跟踪器 - Issues with jupyter 4.0 - 并链接到最近的更新，该更新似乎简化了扩展程序的加载：code update：

"通过手动编辑notebook.json。默认位于~/.jupyter/nbconfig/notebook.json:"

{
    "load_extensions": {
      "notify": true,
      "theme_toggle": true
  }
}

添加"code_folding/main": true 之类的内容似乎也可以。

所以我的理解是这将取代使用custom.js 来加载扩展？

Answer 4

如果您查看笔记本 static/notebook/js/main.js 代码，app_initialized.NotebookApp 事件仍会被触发。

但是你必须使用 requireJS 中的 define() 函数来监听这个事件：

define([
  'base/js/namespace',
  'base/js/events'
], function(IPython, events) {
   events.on('app_initialized.NotebookApp', function() {
     // Your Code
   });
});

您的回调将在此处执行。

如果你输入你的custom.js：

 require(['base/js/namespace', 'base/js/events'], function(IPython, events) {
     events.on('notebook_loaded.Notebook', function() {
        console.log('require & notebook_loaded.Notebook');
    });
     events.on('app_initialized.NotebookApp', function() {
        console.log('require & app_initialized.NotebookApp');
     });
 });

 define(['base/js/namespace', 'base/js/events'], function(IPython, events) {
     events.on('notebook_loaded.Notebook', function() {
        console.log('define & notebook_loaded.Notebook');
    });
     events.on('app_initialized.NotebookApp', function() {
         console.log('define & app_initialized.NotebookApp');
     });
 });

控制台中的结果将是：

define() & app_initialized.NotebookApp
define() & notebook_loaded.Notebook
require() & notebook_loaded.Notebook

我猜你用require() 注册了一个已经发生的事件......

require() 正在等待初始化所有依赖项和子模块...对于app_initialized.NotebookApp 事件来说可能为时已晚。