且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-03 12:05:40

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

The Jupyter notebook extension provided below allows you to highlight ranges of lines in a code cell. Install and enable it as follows:

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

然后,带有灯泡图标的按钮将出现在Jupyter笔记本工具栏上.按下该按钮将突出显示当前代码单元格中的选定行(如果没有选择,则突出显示当前行).

Then a button with a lightbulb icon will appear on your Jupyter notebook toolbar. Pressing that button will highlight the selected lines (or, if there is no selection, the current line) in the current code cell.

高亮将与笔记本一起保存(作为单元元数据),但是在(重新)打开笔记本时不会自动启用.为了显示已保存的突出显示,您必须按下还原突出显示按钮(带有

The highlights will be saved with the notebook (as cell metadata) but will not be automatically enabled when the notebook is (re-)opened. In order to show the saved highlights you must press the Restore highlights button (the one with a bars icon).

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
    };
});