突出显示 Jupyter 单元中的部分代码

Posted 2023-03-06

【中文标题】突出显示 Jupyter 单元中的部分代码

【英文标题】：Highlight part of the code in a Jupyter cell

【发布时间】：2018-12-29 19:06:58

【问题描述】：

有没有办法突出显示 Jupyter 单元格的某些行？类似于下图的东西（我用照片编辑器创建的）：

我的意思不是用光标进行选择，而是永久性的。 例如，当您想要突出显示新添加的代码时，这对于演示很有用。

【问题讨论】：

可能可以编写某种 javascript 插件来做到这一点，但它可能会干扰现有的 CodeMirror 语法荧光笔。我认为使用降价单元格并使用内联 css 编写一些自定义 html 会更容易。

使用 markdown 是一种解决方法，但我还需要能够在演示期间将单元格作为代码执行。

作为一种潜在的解决方法，这个jupyter extension 可以突出显示降价单元格。

【参考方案1】：

下面提供的 Jupyter 笔记本扩展允许您突出显示代码单元格中的行范围。安装启用如下：

$ jupyter nbextension install codehighlighter.js --user
$ jupyter nbextension enable codehighlighter --user

然后，带有lightbulb icon 的按钮将出现在您的 Jupyter 笔记本工具栏上。按下该按钮将突出显示当前代码单元格中的选定行（或者，如果没有选择，则为当前行）。

亮点将与笔记本一起保存（作为单元元数据），但不会在笔记本（重新）打开时自动启用。要显示保存的精彩片段，您必须按下恢复精彩片段按钮（带有bars icon 的按钮）。

---

codehighlighter.js

define([
    'base/js/namespace'
], function(
    Jupyter
) 
    function load_ipython_extension() 

        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '.codehighlighter  background: yellow; ';
        document.getElementsByTagName('head')[0].appendChild(style);

        var highlight_code_in_cell = function (cell, from, to) 
            var cm = cell.code_mirror;
            for ( var lineno = from; lineno < to ; ++lineno )
                cm.addLineClass(lineno, 'background', 'codehighlighter');
        

        var highlight_selected_code = function () 
            var cell = Jupyter.notebook.get_selected_cell();
            var cm = cell.code_mirror;
            var from = cm.getCursor('from');
            var to = cm.getCursor('to');
            var endLine = (to.ch > 0 ? to.line + 1 : to.line);
            highlight_code_in_cell(cell, from.line, endLine);
            if ( ! cell.metadata.codehighlighter )
                cell.metadata.codehighlighter = [];
            cell.metadata.codehighlighter.push([from.line, endLine]);
        ;

        var highlight_from_metadata = function() 
            Jupyter.notebook.get_cells().forEach(function(cell) 
                if (cell.metadata.codehighlighter) 
                    cell.metadata.codehighlighter.forEach(function(range) 
                        highlight_code_in_cell(cell, range[0], range[1]);
                    );
                
            );
        

        function registerAction(action_name, action) 
            var prefix = 'codehighlighter';
            return Jupyter.actions.register(action, action_name, prefix);
        

        var hilite_code = registerAction('highlight-code', 
                                         icon: 'fa-lightbulb-o',
                                         help    : 'Highlight selected code',
                                         help_index : 'zz',
                                         handler : highlight_selected_code
        );
        var restore_hilites = registerAction('restore-highlights', 
                                         icon: 'fa-bars',
                                         help    : 'Restore highlights',
                                         help_index : 'zz',
                                         handler : highlight_from_metadata
        );

        Jupyter.toolbar.add_buttons_group([hilite_code, restore_hilites]);
    

    return 
        load_ipython_extension: load_ipython_extension
    ;
);

【讨论】：

几乎完美！有什么办法可以用笔记本保存亮点？

太棒了！非常感谢您！

继续：如何使用 Jupyter 在浏览器中安装它？ Installing jupyter_contrib_nbextensions 有点帮助： 1：扩展需要安装jupyter nbextension install。但是<nbextension require path> 在jupyter nbextension enable <nbextension require path> 中没有明确定义。

问这个问题的另一种方式是，在enable 命令jupyter nbextension enable <the entry point> --user 中<the entry point> 应该是什么？谢谢，亚瑟