Notebooks - issues with coloured background markdown cells

[Tony Hirst]

I've been exploring several of ways of using coloured background markdown cells in notebooks (eg for emphasising activities or providing feedback to students) but have been encountering problems with each approach:

1) native or custom css applied to div:

<div class="alert alert-success">
Enter edit mode by pressing `Enter`

Styling *gets* messed up.

``` code
more code

yet more code``` 

Here's a list:

- item 1
- item 2

done

</div>

2) tweaking metadata and then styling on that basis  - users select a cell and click a button to toggle the background colour.

// add button to make codecell commentate red

//based on https://github.com/ipython-contrib/IPython-notebook-extensions/blob/master/usability/read-only.js

"using strict";

 

var commentateCodeCell = (function() {

    

    /**

     * Set codecell to commentate 

     * 

     *  @param {Object} cell current notebook cell

     */

    

 setcommentate = function (cell) {

  console.log("Run setcommentate");

        if (cell instanceof IPython.CodeCell)  {

var prompt = cell.element.find('div.input_area');

//var output_area = cell.element.find('div.output_subarea');

var cp=cell.element.find('div.input').parent()

if (cell.metadata.commentate == true) {

cp.css("background-color","#eda7c3"); 

prompt.css("background-color","#f4cadb");

//output_area.css("background-color","#f5ffff");

} else {

prompt.css("background-color","#f5f5f5");

cp.css("background-color","#ffffff");

//output_area.css("background-color","#ffffff");

}

        } else if (cell instanceof IPython.MarkdownCell)  {

            var prompt = cell.element;

//var cp=cell.element.find('div.input').parent()

if (cell.metadata.commentate==true) {

prompt.css("background-color","#f4cadb");

prompt.find('div.inner_cell').css("background-color","#f4cadb")

} else {

 prompt.css("background-color","#ffffff") 

 prompt.find('div.inner_cell').css("background-color","#ffffff")

}  

  }

  }

    

 

    function togglecommentate() {

    console.log("Run togglecommentate");

        var cell = IPython.notebook.get_selected_cell();

        if ((cell instanceof IPython.CodeCell) || (cell instanceof IPython.MarkdownCell)) {

            if (!('commentate' in cell.metadata))

                cell.metadata.commentate = true; 

            else cell.metadata.commentate = !cell.metadata.commentate

            setcommentate(cell);

        }

    };

 

 

    /**

    * Add run control buttons to toolbar and initialize codecells

    * 

    */

    IPython.toolbar.add_buttons_group([

                {

                    id : 'commentate_codecell',

                    label : 'Toggle cell comment',

                    icon : 'fa-exclamation-circle',

                    callback : togglecommentate

                }

          ]);

          

 function oustyle_notebook_commentate(){

  console.log("Run oustyle_notebook_commentate");

    /* loop through notebook and set style of commentate cell defined in metadata */

    var cells = IPython.notebook.get_cells();

    for(var i in cells){

        var cell = cells[i];

        if ((cell instanceof IPython.CodeCell) || (cell instanceof IPython.MarkdownCell)) {

            if ('commentate' in cell.metadata) {

                setcommentate(cell);

            } 

        }

          

    };

 }

 

    //$([IPython.events]).on('create.Cell',create_cell);    

    $([IPython.events]).on('notebook_loaded.Notebook',oustyle_notebook_commentate());

    

})();

and then in custom js:

$([IPython.events]).on("app_initialized.NotebookApp", function(){ require(["custom/commentateCellColour"])});

Unfortunately, each approach comes with its own set of problems.

In approach 1, wrapping content in the div doesn't get styled correctly (line breaks and lists break; code highlighting is a bit scrappy): anyone know if there are any easy fixes to this?

In approach 2, in chrome on mac at least, opening a notebook doesn't always lead to the javascript loading and running, and hence the styling is not rendered. I don't know if this is a problem with my code (which is quite possible), with the event the code should fire on, or as a result of Google Chrome doing some cacheing foo? Again - any pointers as to what the issue might be would be appreciated.

[Matthias Bussonnier]

On Jul 20, 2015, at 07:25, Tony Hirst <tony....@gmail.com> wrote:

I've been exploring several of ways of using coloured background markdown cells in notebooks (eg for emphasising activities or providing feedback to students) but have been encountering problems with each approach:

1) native or custom css applied to div:

<div class="alert alert-success">
Enter edit mode by pressing `Enter`

Styling *gets* messed up.

``` code
more code

yet more code``` 

Here's a list:

- item 1
- item 2

done

</div>

2) tweaking metadata and then styling on that basis  - users select a cell and click a button to toggle the background colour.

wrap that in the define, or you will get race condition. 

Don’t set css directly, it will break, adda class on the cell element and inject  a css stylesheet. 

See how nbgrader does it. It;s a bit better. 

IPython and IPython events might not be define if you don’t require/define them correctly. 

    //$([IPython.events]).on('create.Cell',create_cell);    

    $([IPython.events]).on('notebook_loaded.Notebook',oustyle_notebook_commentate());

    

})();

and then in custom js:

$([IPython.events]).on("app_initialized.NotebookApp", function(){ require(["custom/commentateCellColour"])});

Same in custom, if you don’t require, you will get race conditions. 

define([‘base/js/namespace’,'base/js/utils’], function(IPython, utils){

/// blahblahblah

// define you module

//and define a 

load_ipython_extension: function(){
console.log("I have been loaded ! -- my nb extension"

});

// and return a module.

)

Also instead of handwaving when the extension is loaded, load it by setting registering it.

Js:  IPython.notebook.config.update({"load_extensions":{"my_ext":true}})

I wrote about that roughly here[1]

Unfortunately, each approach comes with its own set of problems.

In approach 1, wrapping content in the div doesn't get styled correctly (line breaks and lists break; code highlighting is a bit scrappy): anyone know if there are any easy fixes to this?

The is probably none. Relying on html into the markdown is alway a bit tricky because of security and export to non-html. 

In approach 2, in chrome on mac at least, opening a notebook doesn't always lead to the javascript loading and running, and hence the styling is not rendered. I don't know if this is a problem with my code (which is quite possible), with the event the code should fire on, or as a result of Google Chrome doing some cacheing foo? Again - any pointers as to what the issue might be would be appreciated.

Well that’s basically because example on the internet do not alway do things The Right Way™, but It works for them.

You hit one of the edge cases.

Also have a look at https://github.com/jupyter/scipy-advanced-tutorial , Part 1

-- 

M

[1]: http://carreau.gitbooks.io/jupyter-book/content/Jsextensions.html