web-dev-qa-db-fra.com

Mettre en surbrillance une partie du code dans une cellule Jupyter

Existe-t-il un moyen de mettre en évidence certaines lignées d'une cellule Jupyter? Quelque chose de similaire à l'image suivante (j'ai créé cela avec un éditeur de photos):

enter image description here

Je ne parle pas d'une sélection avec le curseur, mais de quelque chose de permanent. Cela serait utile pour les présentations lorsque vous souhaitez mettre en évidence du code nouvellement ajouté, par exemple.

pythoncssjupyter-notebookhighlight
18
multigoodverse

L'extension de bloc-notes Jupyter fournie ci-dessous vous permet de mettre en évidence des plages de lignes dans une cellule de code. Installez-le et activez-le comme suit:

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

Ensuite, un bouton avec icône d'ampoule apparaîtra sur la barre d'outils de votre ordinateur portable Jupyter. Appuyer sur ce bouton mettra en surbrillance les lignes sélectionnées (ou, s'il n'y a pas de sélection, la ligne actuelle) dans la cellule de code actuelle.

Les surbrillances seront enregistrées avec le bloc-notes (en tant que métadonnées de cellule) mais ne seront pas automatiquement activées lorsque le bloc-notes est (ré) ouvert. Pour afficher les surbrillances enregistrées, vous devez appuyer sur le bouton Restaurer les surbrillances (celui avec un icône de barres ).

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