Make nbconvert html full output like notebook's html. #5232

jdfreder · 2014-02-27T01:05:53Z

Basically makes the DOMs of both map one to one. This doesn't mean string notebook html == string nbconvert output.

I used a custom in-house HTML diffing rig to diff, see here https://gist.github.com/jdfreder/9241376 (mentioned in the README.md inside nbconvert/tests).

related to #5084
closes #5224

ellisonbg · 2014-02-27T01:30:44Z

IPython/nbconvert/templates/html/basic.tpl

@@ -40,8 +40,10 @@ In&nbsp;[{{ cell.prompt_number }}]:
 {% endblock output_prompt %}

 {% block input %}
-<div class="input_area box-flex1">
+<div class="inner_cell">
+    <div class="input_area">


No box-flex1 on this?

It wasn't in the normal notebook's html.

jdfreder · 2014-03-04T23:57:14Z

@ellisonbg this is ready for review.

minrk · 2014-03-05T19:24:54Z

IPython/nbconvert/templates/html/basic.tpl

@@ -59,8 +61,7 @@ In&nbsp;[{{ cell.prompt_number }}]:
 {% endblock output %}

 {% block markdowncell scoped %}
-<div class="cell border-box-sizing text_cell">
-<div class="input">
+<div class="cell border-box-sizing text_cell rendered unselected">


I think adding unselected is probaby too much

Yeah I agree - just like we don't include the mode classes. The selected
state is nor relevant in static output.

On Wed, Mar 5, 2014 at 11:24 AM, Min RK notifications@github.com wrote:

In IPython/nbconvert/templates/html/basic.tpl:

@@ -59,8 +61,7 @@ In [{{ cell.prompt_number }}]:
{% endblock output %}

{% block markdowncell scoped %}
-

-

+

I think adding unselected is probaby too much

Reply to this email directly or view it on GitHubhttps://github.com//pull/5232/files#r10314022
.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

ellisonbg · 2014-03-05T19:27:23Z

Two questions:

What should the outer element be in the basic template. Right now it is just a bunch of cell divs with no containing div.
What should the outer elements be in the full template. This PR adds all of the one we use in the live notebook, which is probably overkill, but which should we keep?

minrk · 2014-03-05T19:27:42Z

IPython/nbconvert/templates/html/full.tpl

+<div style="display: block;" id="site" class="border-box-sizing">
+  <div id="ipython-main-app" class="border-box-sizing">
+    <div id="notebook_panel" class="border-box-sizing" style="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;">
+      <div tabindex="-1" id="notebook" class="border-box-sizing" style="overflow: visible; border-top: none;">


Ideally, there shouldn't be any style attributes set anywhere in the template. If you leave these out, is the notebook invisible?

What I can do is move them into the <style> tag above where the rest of the CSS is, that's where they belong.

As far is what each one does:
"overflow: visible;" removes the extra vertical scrollbar. Without this the browser's vertical scroll bar renders with very little scrollable space and another vertical scroll bar renders inside the document, around the notebook contents, which handles the scrolling of the document.
"border-top: none;" removes a small 1px grey border from the top of the notebook
shadow stuff- removes a very faint shadow that surrounds the whole document

Basically makes the DOM map one to one. I used a custom in-house HTML diffing rig - https://gist.github.com/jdfreder/9241376

also add output_javascript

still need to do notebook...

Fix for double div on pyout.

use new extra_arg to add output_pyout class

jdfreder · 2014-03-06T21:33:48Z

So this is ready for some more review: Upon auditing our output_* CSS classes, I found that we did not have a matching output_pyout for the already existing output_pyerr. I went ahead and added it to both nbconvert and the notebook. This required me to add extra_class in both the nbconvert template and outputarea.js since pyout uses the existing machinery for displaying other types. I borrowed extra_class idea from the append_text function in outputarea.js.

minrk · 2014-03-06T22:05:50Z

IPython/html/static/notebook/js/outputarea.js

@@ -498,11 +498,11 @@ var IPython = (function (IPython) {
                    } else {
                        // don't display if we don't know how to sanitize it
                        console.log("Ignoring untrusted " + type + " output.");
-                        continue;
+                    continue;


this indentation is now incorrect, right?

Yeah I wonder how that got in there, maybe my Sublime is using tab characters or something, I'll take a look.

Ah it was a rebase problem.

jdfreder · 2014-03-06T22:16:07Z

Can't we just add the class at the outer level, rather than passing it as an arg (e.g. remove extra_class from append_text, rather than adding it to all)?

That's a good idea, I'll take a look but I think you may be right.

jdfreder · 2014-03-06T22:24:15Z

@minrk that looks much better, thanks for the suggestion.

minrk · 2014-03-06T23:50:17Z

IPython/nbconvert/filters/highlight.py

@@ -56,7 +56,7 @@ def __call__(self, source, language=None, metadata=None):
        if not language:
            language=self.default_language

-        return _pygments_highlight(source, HtmlFormatter(), language, metadata)
+        return _pygments_highlight(source if len(source) > 0 else ' ', HtmlFormatter(), language, metadata)


what is the reason for this change?

Empty code cells where collapsing vertically (to something like 5 px). This
gives them the right height when empty.

On Thu, Mar 6, 2014 at 3:50 PM, Min RK notifications@github.com wrote:

In IPython/nbconvert/filters/highlight.py:

@@ -56,7 +56,7 @@ def call(self, source, language=None, metadata=None):
if not language:
language=self.default_language

return _pygments_highlight(source, HtmlFormatter(), language, metadata)

return _pygments_highlight(source if len(source) > 0 else ' ', HtmlFormatter(), language, metadata)

what is the reason for this change?

Reply to this email directly or view it on GitHubhttps://github.com//pull/5232/files#r10367691
.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

collapsing because codemirror doesn't exist

ellisonbg · 2014-03-07T00:39:22Z

When this is merge, we need to submit a PR to nbviewer to remove the lines that style the input area, highlight, pre stuff here:

https://github.com/ipython/nbviewer/blob/master/nbviewer/templates/notebook.html#L60

This styling is now done in the notebook CSS itself.

Lots of CSS tweaks to get nbconvert output looking right.

Make nbconvert html full output like notebook's html.

ellisonbg reviewed Feb 27, 2014
View reviewed changes

jdfreder added this to the 2.0 milestone Mar 4, 2014

minrk reviewed Mar 5, 2014
View reviewed changes

jdfreder and others added 14 commits March 6, 2014 13:26

Make nbconvert html full output like notebook's html.

6720b0b

Basically makes the DOM map one to one. I used a custom in-house HTML diffing rig - https://gist.github.com/jdfreder/9241376

Removed input div from markdown and heading cells

2f07efd

Removed some box-flex1 classes

a5c878c

Added output_pyerr to python error output

078ad4e

Get rid of non-existant display data tag

1560aab

also add output_javascript

Added output_subarea class to rendered_html

94202ee

Added output specific ouput_* classes

60068a6

Fixed classed for latex and text output

d542b8a

Added readme in nbconvert tests dir.

91dd7b6

Moved CSS into <style>

c607c93

Remove 'unselected'

951d8d3

Audit of putput_* in nbconvert

e9440df

still need to do notebook...

Removed notebook specific divs,

33ce73d

Fix for double div on pyout.

Add extra_class arg to the rest of the append methods,

7828fbe

use new extra_arg to add output_pyout class

CDN JS resources

0089c68

minrk reviewed Mar 6, 2014
View reviewed changes

Fixed rebase issues

2ae5c93

addClass instead of adding extra_class arg everywhere

d93d163

jdfreder added 3 commits March 6, 2014 15:01

s/extra_classes/extra_class

5901581

https

c8368af

Fix blank cell collapsing.

2832ae1

minrk reviewed Mar 6, 2014
View reviewed changes

Lots of CSS tweaks to get nbconvert output looking right.

67701c0

ellisonbg mentioned this pull request Mar 7, 2014

Removing manual style overrides that will soon be done in ipython. jupyter/nbviewer#210

Merged

Merge pull request #19 from ellisonbg/nbc-style

cab95c6

Lots of CSS tweaks to get nbconvert output looking right.

minrk added a commit that referenced this pull request Mar 7, 2014

Merge pull request #5232 from jdfreder/nbc_incono

b668b92

Make nbconvert html full output like notebook's html.

minrk merged commit b668b92 into ipython:master Mar 7, 2014

jdfreder deleted the nbc_incono branch March 10, 2014 18:43

jdfreder mentioned this pull request Mar 17, 2014

Consistent approach for HTML/JS output on nbviewer #5084

Closed

mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014

Merge pull request ipython#5232 from jdfreder/nbc_incono

96aba7e

Make nbconvert html full output like notebook's html.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make nbconvert html full output like notebook's html. #5232

Make nbconvert html full output like notebook's html. #5232

jdfreder commented Feb 27, 2014

ellisonbg Feb 27, 2014

jdfreder Feb 27, 2014

jdfreder commented Mar 4, 2014

minrk Mar 5, 2014

ellisonbg Mar 5, 2014

ellisonbg commented Mar 5, 2014

minrk Mar 5, 2014

jdfreder Mar 5, 2014

jdfreder commented Mar 6, 2014

minrk Mar 6, 2014

jdfreder Mar 6, 2014

jdfreder Mar 6, 2014

jdfreder commented Mar 6, 2014

jdfreder commented Mar 6, 2014

minrk Mar 6, 2014

ellisonbg Mar 7, 2014

jdfreder Mar 7, 2014

ellisonbg commented Mar 7, 2014

Make nbconvert html full output like notebook's html. #5232

Make nbconvert html full output like notebook's html. #5232

Conversation

jdfreder commented Feb 27, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdfreder commented Mar 4, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellisonbg commented Mar 5, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdfreder commented Mar 6, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdfreder commented Mar 6, 2014

jdfreder commented Mar 6, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellisonbg commented Mar 7, 2014