在Jupyter单元格中突出显示部分代码 [英] Highlight part of the code in a Jupyter cell

问题描述

是否可以突出显示Jupyter细胞的某些行?与下图类似(我是用照片编辑器创建的):

Is there a way to highlight certain lines of a Jupyter cell? Something similar to the following image (I created that with a photo editor):

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

I don't mean a selection with the cursor, but something permanent. This would be useful for presentations when you want to highlight newly added code for example.

推荐答案

下面提供的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
    };
});

这篇关于在Jupyter单元格中突出显示部分代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！