如何从使用 nbviewer 可视化的 ipython notebook 中的单元格隐藏代码?

IT技术 javascript ipython ipython-notebook
2021-01-20 09:12:37

我有一个使用 NBviewer 可视化的 ipython/jupyter 笔记本。

如何隐藏 NBviewer 呈现的笔记本中的所有代码,以便仅显示代码输出(例如绘图和表格)和降价单元格?

6个回答
from IPython.display import HTML

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="Click here to toggle on/off the raw code."></form>''')
谢谢您的回答!如果您需要隐藏按钮以及隐藏或显示某些代码块(如 Rstudio)的能力,请参阅我的回答。
2021-03-24 09:12:37
谢谢,这也可以“保存到 html”。建议将其放置在笔记本顶部自己的单元格中。
2021-03-27 09:12:37
它是否仅适用于特定版本的 Ipython?它曾经对我有用,但后来我更新了一些包(包括 Ipython),这不再起作用了。
2021-03-28 09:12:37
如果我将它放在代码单元中,那么在 iPython 3.1.0 上为我工作。<form action ... > ... </form>用简单的 HTML替换了The raw code for this IPython notebook is by default hidden for easier reading.To toggle on/off the raw code, click <a href="javascript:code_toggle()">here</a>.
2021-03-30 09:12:37
你会如何改变它,让它甚至不显示按钮,它只是隐藏代码?
2021-04-08 09:12:37

5.2.1版开始,现在可以直接从 nbconvert 进行此操作:可以使用内置模板导出器排除选项过滤内容例如:

jupyter nbconvert --to pdf --TemplateExporter.exclude_input=True my_notebook.ipynb

将排除“输入代码”单元格,即代码本身。存在类似的选项来排除提示、降价单元格或输出,或同时排除输入和输出。

(无论输出格式如何,这些选项都应该有效。)

.pdf 导出文件默认保存在哪里?
2021-03-15 09:12:37
这应该在笔记本中运行吗?
2021-03-21 09:12:37
这是最好的答案
2021-03-26 09:12:37
与 .ipython 笔记本相同的文件夹。使用参数“--output NotebookNoCode”重命名文件。
2021-04-03 09:12:37
@were_cat 不,这是一个用于导出 .ipynb 笔记本文件的 shell 命令;在这个例子中,它被转换为 pdf
2021-04-03 09:12:37

我会用hide_input_allnbextensionshttps://github.com/ipython-contrib/IPython-notebook-extensions)。就是这样:

  1. 找出你的 IPython 目录在哪里:

    from IPython.utils.path import get_ipython_dir
    print get_ipython_dir()
    
  2. 下载nbextensions并将其移动到 IPython 目录。

  3. 编辑您的custom.js在IPython的目录文件的地方(我是profile_default /静态/自定义),以类似于 custom.example.jsnbextensions目录。

  4. 将此行添加到custom.js

    IPython.load_extensions('usability/hide_input_all')
    

无论工作簿如何,IPython Notebook 现在都有一个按钮来切换代码单元格。

刚刚尝试过这个 - 它似乎有助于在编辑笔记本时隐藏代码单元格,尽管将笔记本保存为 html(即呈现到 nbviewer)时,代码单元格仍然出现。
2021-03-21 09:12:37
@VivekGani 只是一个简短的说明,您可以使用同一个 repo 提供的模板将隐藏的单元格隐藏在导出的 html 中,请参阅相关文档页面(另请参阅此相关问题
2021-04-10 09:12:37

我编写了一些代码来实现这一点,并添加了一个按钮来切换代码的​​可见性。

以下内容位于笔记本顶部的代码单元格中:

from IPython.display import display
from IPython.display import HTML
import IPython.core.display as di # Example: di.display_html('<h3>%s:</h3>' % str, raw=True)

# This line will hide code by default when the notebook is exported as HTML
di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)

# This line will add a button to toggle visibility of code blocks, for use with the HTML export version
di.display_html('''<button onclick="jQuery('.input_area').toggle(); jQuery('.prompt').toggle();">Toggle code</button>''', raw=True)

您可以在此处查看 NBviewer 中的外观示例

更新: Jupyter 中的 Markdown 单元格会有一些有趣的行为,但它在笔记本的 HTML 导出版本中运行良好。

只要您不与 Markdown 单元格交互,就可以使用“div.input”作为节点选择,但我刚刚发现,如果您确实与 Markdown 单元格交互,则可能会出现一些奇怪的行为。例如,如果您双击一个 Markdown 单元格,它就会完全隐藏。因此,我对 Max 解决方案的调整适用于生成 HTML 以与他人共享,但不适用于随后与其进行过多交互。
2021-03-25 09:12:37
这适用于代码单元格,但如果您有降价单元格,它会做一些奇怪的事情。它将markdown显示为 markdown,然后在下面显示相同的内容——但格式不同。
2021-04-01 09:12:37
我刚刚发现唯一错误的是节点规范。而不是'.input_area'and '.prompt',使用'div.input'它就像一个魅力!总结一下,用jQuery("div.input").toggle();代替jQuery('.input_area').toggle(); jQuery('.prompt').toggle();@Max Masnick,你能修复你的答案吗?
2021-04-01 09:12:37
是的,所以我注意到你对 Markdown 单元格被全部抬高所做的同样的事情。它在 HTML 导出中运行良好,这是我使用它的地方。我将编辑答案以注意这一点。
2021-04-04 09:12:37
要从删除“.prompt”中删除剩余的右侧空间,只需将此代码添加到上述代码的末尾即可。 CSS = """#notebook div.output_subarea { max-width:100%;""" HTML('<style>{}</style>'.format(CSS)). 这对于打印非常有用。
2021-04-05 09:12:37

最新的 IPython 笔记本版本不再允许在 Markdown 单元格中执行 javascript,因此添加具有以下 javascript 代码的新 Markdown 单元格将不再用于隐藏您的代码单元格(请参阅此链接

更改 ~/.ipython/profile_default/static/custom/custom.js 如下:

code_show=true;
function code_toggle() {
 if (code_show){
 $('div.input').hide();
 } else {
 $('div.input').show();
 }
 code_show = !code_show
}

$([IPython.events]).on("app_initialized.NotebookApp", function () {
  $("#view_menu").append("<li id=\"toggle_toolbar\" title=\"Show/Hide code cells\"><a href=\"javascript:code_toggle()\">Toggle Code Cells</a></li>")
});
这是针对 jupyter 的。你仍然可以使用 RAW 而不是 markdown,看起来 Jupyter 不再使用 JQuery。包括您最喜欢的 CDN 中的 script-JQuery。将 "$('div.input')" 更改为 "$('div.jp-Cell-inputArea')" 并且它按最初设计的那样工作。
2021-03-20 09:12:37
@akhmed 也许您可以参考stackoverflow.com/a/29851084/1914781这是一个不同的问题,但对你有帮助!
2021-03-22 09:12:37
奇怪的是,该解决方案对我不起作用,因为 iPython 视图菜单保持不变。(iPython 3.1.0)您的解决方案激发了我进一步寻找并找到了p3trus 的一个非常相似的解决方案,解决方案添加了一个按钮而不是菜单,并且确实有效。
2021-03-26 09:12:37
正是我要找的!
2021-04-05 09:12:37