A new implementation of reveal converter with jinja templates.

templates/reveal_cells.tpl

@@ -0,0 +1,21 b''
+{%- extends 'basichtml.tpl' -%}
+
+
+
+{%- block any_cell scoped -%}
+{%- if cell.metadata.slide_type in ['-', 'slide', 'subslide'] -%}  
+    {{ super() }}
+{%- elif cell.metadata.slide_type in ['skip'] -%}
+    <div style=display:none>
+    {{ super() }}
+    </div>
+{%- elif cell.metadata.slide_type in ['notes'] -%}
+    <aside class="notes">
+    {{ super() }}
+    </aside>
+{%- elif cell.metadata.slide_type in ['fragment'] -%}
+    <div class="fragment">
+    {{ super() }}
+    </div>    
+{%- endif -%}   
+{%- endblock any_cell -%}

templates/slides.tpl

@@ -0,0 +1,17 b''
+{%- extends 'subslides.tpl' -%}
+
+
+
+{%- block any_cell scoped -%}
+{%- if cell.metadata.slide_type in ['slide'] -%}  
+    <section>
+    <section>
+{%- endif -%}
+    
+{{ super() }}
+    
+{%- if cell.metadata.slide_helper in ['slide_end'] -%}
+    </section>
+    </section>
+{%- endif -%}
+{%- endblock any_cell -%}

templates/subslides.tpl

@@ -0,0 +1,15 b''
+{%- extends 'reveal_cells.tpl' -%}
+
+
+
+{%- block any_cell scoped -%}
+{%- if cell.metadata.slide_type in ['subslide'] -%}  
+    <section>
+{%- endif -%}
+    
+{{ super() }}
+    
+{%- if cell.metadata.slide_helper in ['subslide_end'] -%}
+    </section>
+{%- endif -%}
+{%- endblock any_cell -%}

converters/transformers.py

@@ -139,9 +139,9 b' class ExtractFigureTransformer(ActivatableTransformer):'
         """Create a new figure file in the given format.
 
         """
-        tplf = self.figname_format_map.get(fmt,self.default_key_tpl) 
+        tplf = self.figname_format_map.get(fmt,self.default_key_tpl)
         tplk = self.key_format_map.get(fmt,self.default_key_tpl)
-        
+
         # option to pass the hash as data ?
         figname = tplf.format(count=count, ext=self._get_ext(fmt))
         key     = tplk.format(count=count, ext=self._get_ext(fmt))
@@ -167,105 +167,20 b' class ExtractFigureTransformer(ActivatableTransformer):'
 
 class RevealHelpTransformer(ConfigurableTransformers):
 
-    section_open = False
-    subsection_open = False
-    fragment_open = False
-
-    def open_subsection(self):
-        self.subsection_open = True
-        return True
-
-    def open_section(self):
-        self.section_open = True
-        return True
-
-    def open_fragment(self):
-        self.fragment_open = True
-        return True
-
-    # could probaly write those maybe_close/open
-    # with a function functor
-    def maybe_close_section(self):
-        """return True is already open, false otherwise
-        and change state to close
-        """
-        if self.section_open :
-            self.section_open = False
-            return True
-        else :
-            return False
-
-    def maybe_open_section(self):
-        """return True is already open, false otherwise
-        and change state to close
-        """
-        if not self.section_open :
-            self.section_open = True
-            return True
-        else :
-            return False
-
-    def maybe_open_subsection(self):
-        """return True is already open, false otherwise
-        and change state to close
-        """
-        if not self.subsection_open :
-            self.subsection_open = True
-            return True
-        else :
-            return False
-
-    def maybe_close_subsection(self):
-        """return True is already open, false otherwise
-        and change state to close
-        """
-        if self.subsection_open :
-            self.subsection_open = False
-            return True
-        else :
-            return False
-
-    def maybe_close_fragment(self):
-        """return True is already open, false otherwise
-        and change state to close
-        """
-        if self.fragment_open :
-            self.fragment_open = False
-            return True
-        else :
-            return False
-
-    def cell_transform(self, cell, other, count):
-        ctype = cell.metadata.get('slideshow', {}).get('slide_type', None)
-        if ctype in [None, '-'] :
-            cell.metadata.slideshow = {}
-            cell.metadata.slideshow['slide_type'] = None
-        elif ctype == 'fragment':
-            cell.metadata.slideshow.close_fragment = self.maybe_close_fragment()
-            cell.metadata.slideshow.close_subsection = False
-            cell.metadata.slideshow.close_section = False
-
-            cell.metadata.slideshow.open_section = self.maybe_open_section()
-            cell.metadata.slideshow.open_subsection = self.maybe_open_subsection()
-            cell.metadata.slideshow.open_fragment = self.open_fragment()
-
-        elif ctype == 'subslide':
-            cell.metadata.slideshow.close_fragment = self.maybe_close_fragment()
-            cell.metadata.slideshow.close_subsection = self.maybe_close_subsection()
-            cell.metadata.slideshow.close_section = False
-
-            cell.metadata.slideshow.open_section = self.maybe_open_section()
-            cell.metadata.slideshow.open_subsection = self.open_subsection()
-            cell.metadata.slideshow.open_fragment = False
-        elif ctype == 'slide':
-            cell.metadata.slideshow.close_fragment = self.maybe_close_fragment()
-            cell.metadata.slideshow.close_subsection = self.maybe_close_subsection()
-            cell.metadata.slideshow.close_section = self.maybe_close_section()
-
-            cell.metadata.slideshow.open_section = self.open_section()
-            cell.metadata.slideshow.open_subsection = self.open_subsection()
-            cell.metadata.slideshow.open_fragment = False
-        return cell, other
+    def __call__(self, nb, other):
+        try :
+            for worksheet in nb.worksheets :
+                for i, cell in enumerate(worksheet.cells):
+                    cell.metadata.slide_type = cell.metadata.get('slideshow', {}).get('slide_type', None)
+                    if cell.metadata.slide_type is None:
+                        cell.metadata.slide_type = '-'
+                    if cell.metadata.slide_type in ['slide']:
+                        worksheet.cells[i - 1].metadata.slide_helper = 'slide_end'
+                    if cell.metadata.slide_type in ['subslide']:
+                        worksheet.cells[i - 1].metadata.slide_helper = 'subslide_end'
+            return nb, other
+        except NotImplementedError as error :
+            raise NotImplementedError('should be implemented by subclass')
 
 
 class CSSHtmlHeaderTransformer(ActivatableTransformer):

templates/reveal.tpl

@@ -1,85 +1,8 b''
-{%- extends 'basichtml.tpl' -%}
+{%- extends 'slides.tpl' -%}
 
 
-{% block any_cell -%}
-
-{% if cell.metadata.slideshow.close_fragment %}
-</div>
-{% endif %}
-{% if cell.metadata.slideshow.close_subsection %}
-</section>
-{% endif %}
-{% if cell.metadata.slideshow.close_section %}
-</section>
-{% endif %}
-
-{% if cell.metadata.slideshow.open_section %}
-<section>
-{%- endif %}
-{% if cell.metadata.slideshow.open_subsection %}
-<section>
-{%- endif %}
-{% if cell.metadata.slideshow.open_fragment %}
-<div class='fragment'>
-{% endif %}
-{% if cell.metadata.slideshow.slide_type in ['notes'] %}
-<aside class="notes">
-{{ super() }}
-</aside>
-{% elif cell.metadata.slideshow.slide_type not in ['skip'] %}
-{{ super() }}
-{% endif %}
-
-{% endblock %}
-
-
-{% block body %}
-<body>
-<div class="reveal"><div class="slides">
-{{ super() }}
-</section>
-</section>
-</div></div>
-
-<script src="reveal/lib/js/head.min.js"></script>
-
-<script src="reveal/js/reveal.min.js"></script>
-
-<script>
- 
-// Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
-Reveal.initialize({
-controls: true,
-progress: true,
-history: true,
-
-theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
-transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none
-
-// Optional libraries used to extend on reveal.js
-dependencies: [
-{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
-{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
-{ src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
-{ src: 'notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
-{ src: 'https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML', async: true },
-{ src: 'js/revealmathjax.js', async: true}
-]
-});
-</script>
-
-<script>
-Reveal.addEventListener( 'slidechanged', function( event ) {
-MathJax.Hub.Rerender(event.currentSlide);
-});
-</script>
-</body>
-</html>{% endblock body %}
-
-
-
-
-{% block header %}<!DOCTYPE html>
+{% block header %}
+<!DOCTYPE html>
 <html>
 <head>
 
@@ -147,4 +70,65 b' div.output_prompt {'
     margin: 5px 5px 0 -5px;
 }
 </style>
-</head>{% endblock %}
+</head>
+{% endblock header%}
+
+
+{% block body %}
+<body>
+<div class="reveal"><div class="slides">
+
+{{ super() }}
+
+</div></div>
+
+<!-- Social buttons -->
+<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:20px;top:20px;">
+<a class="addthis_button_twitter"></a>
+<a class="addthis_button_google_plusone_share"></a>
+<a class="addthis_button_linkedin"></a>
+<a class="addthis_button_facebook"></a>
+<a class="addthis_button_more"></a>
+</div>
+<!-- End of social buttons -->
+
+<script src="reveal/lib/js/head.min.js"></script>
+
+<script src="reveal/js/reveal.min.js"></script>
+
+<script>
+
+// Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
+Reveal.initialize({
+controls: true,
+progress: true,
+history: true,
+
+theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
+transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none
+
+// Optional libraries used to extend on reveal.js
+dependencies: [
+{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
+{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
+{ src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+{ src: 'notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
+{ src: 'http://s7.addthis.com/js/300/addthis_widget.js', async: true},
+{ src: 'js/revealmathjax.js', async: true},
+{ src: 'js/mathjax-onload.js', async: true}
+]
+});
+</script>
+
+<script>
+Reveal.addEventListener( 'slidechanged', function( event ) {
+MathJax.Hub.Rerender(event.currentSlide);
+});
+</script>
+
+</body>
+{% endblock body %}
+
+{% block footer %}
+</html>
+{% endblock footer %}
  No newline at end of file

tests/ipynbref/reveal.orig_slides.html

@@ -104,6 +104,7 b' b,strong { font-weight: bold; }'
 
 </style>
 <style type="text/css">
+<<<<<<< HEAD
 article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
 audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
 audio:not([controls]){display:none;}
@@ -1124,6 +1125,579 b' div.output_prompt {'
 }
 </style>
 <meta charset="UTF-8">
+=======
+
+/* Flexible box model classes */
+/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
+ 
+.hbox {
+	display: -webkit-box;
+	-webkit-box-orient: horizontal;
+	-webkit-box-align: stretch;
+ 
+	display: -moz-box;
+	-moz-box-orient: horizontal;
+	-moz-box-align: stretch;
+ 
+	display: box;
+	box-orient: horizontal;
+	box-align: stretch;
+}
+ 
+.hbox > * {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+ 
+.vbox {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-box-align: stretch;
+ 
+	display: -moz-box;
+	-moz-box-orient: vertical;
+	-moz-box-align: stretch;
+ 
+	display: box;
+	box-orient: vertical;
+	box-align: stretch;
+}
+ 
+.vbox > * {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+  
+.reverse {
+	-webkit-box-direction: reverse;
+	-moz-box-direction: reverse;
+	box-direction: reverse;
+}
+ 
+.box-flex0 {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+ 
+.box-flex1, .box-flex {
+	-webkit-box-flex: 1;
+	-moz-box-flex: 1;
+	box-flex: 1;
+}
+ 
+.box-flex2 {
+	-webkit-box-flex: 2;
+	-moz-box-flex: 2;
+	box-flex: 2;
+}
+ 
+.box-group1 {
+	-webkit-box-flex-group: 1;
+	-moz-box-flex-group: 1;
+	box-flex-group: 1;
+}
+ 
+.box-group2 {
+	-webkit-box-flex-group: 2;
+	-moz-box-flex-group: 2;
+	box-flex-group: 2;
+}
+ 
+.start {
+	-webkit-box-pack: start;
+	-moz-box-pack: start;
+	box-pack: start;
+}
+ 
+.end {
+	-webkit-box-pack: end;
+	-moz-box-pack: end;
+	box-pack: end;
+}
+ 
+.center {
+	-webkit-box-pack: center;
+	-moz-box-pack: center;
+	box-pack: center;
+}
+
+</style>
+<style type="text/css">
+/**
+ * Primary styles
+ *
+ * Author: IPython Development Team
+ */
+
+
+body {
+    overflow: hidden;
+}
+
+span#save_widget {
+    padding: 5px;
+    margin: 0px 0px 0px 300px;
+    display:inline-block;
+}
+
+span#notebook_name {
+    height: 1em;
+    line-height: 1em;
+    padding: 3px;
+    border: none;
+    font-size: 146.5%;
+}
+
+.ui-menubar-item .ui-button .ui-button-text {
+    padding: 0.4em 1.0em;
+    font-size: 100%;
+}
+
+.ui-menu {
+  -moz-box-shadow:    0px 6px 10px -1px #adadad;
+  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
+  box-shadow:         0px 6px 10px -1px #adadad;
+}
+
+.ui-menu .ui-menu-item a {
+    border: 1px solid transparent;
+    padding: 2px 1.6em;
+}
+
+.ui-menu .ui-menu-item a.ui-state-focus {
+    margin: 0;
+}
+
+.ui-menu hr {
+    margin: 0.3em 0;
+}
+
+#menubar_container {
+    position: relative;
+}
+
+#notification {
+    position: absolute;
+    right: 3px;
+    top: 3px;
+    height: 25px;
+    padding: 3px 6px;
+    z-index: 10;
+}
+
+#toolbar {
+    padding: 3px 15px;
+}
+
+#cell_type {
+    font-size: 85%;
+}
+
+
+div#main_app {
+    width: 100%;
+    position: relative;
+}
+
+span#quick_help_area {
+    position: static;
+    padding: 5px 0px;
+    margin: 0px 0px 0px 0px;
+}
+
+.help_string {
+    float: right;
+    width: 170px;
+    padding: 0px 5px;
+    text-align: left;
+    font-size: 85%;
+}
+
+.help_string_label {
+    float: right;
+    font-size: 85%;
+}
+
+div#notebook_panel {
+    margin: 0px 0px 0px 0px;
+    padding: 0px;
+}
+
+div#notebook {
+    overflow-y: scroll;
+    overflow-x: auto;
+    width: 100%;
+    /* This spaces the cell away from the edge of the notebook area */
+    padding: 5px 5px 15px 5px;
+    margin: 0px;
+    background-color: white;
+}
+
+div#pager_splitter {
+    height: 8px;
+}
+
+div#pager {
+    padding: 15px;
+    overflow: auto;
+    display: none;
+}
+
+div.ui-widget-content {
+    border: 1px solid #aaa;
+    outline: none;
+}
+
+.cell {
+    border: 1px solid transparent;
+}
+
+div.cell {
+    width: 100%;
+    padding: 5px 5px 5px 0px;
+    /* This acts as a spacer between cells, that is outside the border */
+    margin: 2px 0px 2px 0px;
+}
+
+div.code_cell {
+    background-color: white;
+}
+
+/* any special styling for code cells that are currently running goes here */
+div.code_cell.running {
+}
+
+div.prompt {
+    /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
+    width: 11ex;
+    /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
+    padding: 0.4em;
+    margin: 0px;
+    font-family: monospace;
+    text-align:right;
+}
+
+div.input {
+    page-break-inside: avoid;
+}
+
+/* input_area and input_prompt must match in top border and margin for alignment */
+div.input_area {
+    color: black;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    background: #f7f7f7;
+}
+
+div.input_prompt {
+    color: navy;
+    border-top: 1px solid transparent;
+}
+
+div.output_wrapper {
+    /* This is a spacer between the input and output of each cell */
+    margin-top: 5px;
+    margin-left: 5px;
+    /* FF needs explicit width to stretch */
+    width: 100%;
+    /* this position must be relative to enable descendents to be absolute within it */
+    position: relative;
+}
+
+/* class for the output area when it should be height-limited */
+div.output_scroll {
+  /* ideally, this would be max-height, but FF barfs all over that */
+  height: 24em;
+  /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
+  width: 100%;
+  
+  overflow: auto;
+  border-radius: 3px;
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
+}
+
+/* output div while it is collapsed */
+div.output_collapsed {
+  margin-right: 5px;
+}
+
+div.out_prompt_overlay {
+  height: 100%;
+  padding: 0px;
+  position: absolute;
+  border-radius: 3px;
+}
+
+div.out_prompt_overlay:hover {
+  /* use inner shadow to get border that is computed the same on WebKit/FF */
+  box-shadow: inset 0 0 1px #000;
+  background: rgba(240, 240, 240, 0.5);
+}
+
+div.output_prompt {
+    color: darkred;
+    /* 5px right shift to account for margin in parent container */
+    margin: 0 5px 0 -5px;
+}
+
+/* This class is the outer container of all output sections. */
+div.output_area {
+    padding: 0px;
+    page-break-inside: avoid;
+}
+
+/* This class is for the output subarea inside the output_area and after
+   the prompt div. */
+div.output_subarea {
+    padding: 0.4em 0.4em 0.4em 0.4em;
+}
+
+/* The rest of the output_* classes are for special styling of the different
+   output types */
+
+/* all text output has this class: */
+div.output_text {
+    text-align: left;
+    color: black;
+    font-family: monospace;
+}
+
+/* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
+div.output_stream {
+    padding-top: 0.0em;
+    padding-bottom: 0.0em;
+}
+div.output_stdout {
+}
+div.output_stderr {
+    background: #fdd; /* very light red background for stderr */
+}
+
+div.output_latex {
+    text-align: left;
+    color: black;
+}
+
+div.output_html {
+}
+
+div.output_png {
+}
+
+div.output_jpeg {
+}
+
+div.text_cell {
+    background-color: white;
+    padding: 5px 5px 5px 5px;
+}
+
+div.text_cell_input {
+    color: black;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    background: #f7f7f7;
+}
+
+div.text_cell_render {
+    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+    outline: none;
+    resize: none;
+    width:  inherit;
+    border-style: none;
+    padding: 5px;
+    color: black;
+}
+
+/* The following gets added to the <head> if it is detected that the user has a
+ * monospace font with inconsistent normal/bold/italic height.  See
+ * notebookmain.js.  Such fonts will have keywords vertically offset with
+ * respect to the rest of the text.  The user should select a better font. 
+ * See: https://github.com/ipython/ipython/issues/1503
+ *
+ * .CodeMirror span {
+ *      vertical-align: bottom;
+ * }
+ */
+
+.CodeMirror {
+    line-height: 1.231;  /* Changed from 1em to our global default */
+}
+
+.CodeMirror-scroll {
+    height: auto;     /* Changed to auto to autogrow */
+    /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
+    /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
+    overflow-y: hidden;
+    overflow-x: auto; /* Changed from auto to remove scrollbar */
+}
+
+/* CSS font colors for translated ANSI colors. */
+
+
+.ansiblack {color: black;}
+.ansired {color: darkred;}
+.ansigreen {color: darkgreen;}
+.ansiyellow {color: brown;}
+.ansiblue {color: darkblue;}
+.ansipurple {color: darkviolet;}
+.ansicyan {color: steelblue;}
+.ansigrey {color: grey;}
+.ansibold {font-weight: bold;}
+
+.completions {
+    position: absolute;
+    z-index: 10;
+    overflow: hidden;
+    border: 1px solid grey;
+}
+
+.completions select {
+    background: white;
+    outline: none;
+    border: none;
+    padding: 0px;
+    margin: 0px;
+    overflow: auto;
+    font-family: monospace;
+}
+
+option.context {
+  background-color: #DEF7FF;
+}
+option.introspection {
+  background-color: #EBF4EB;
+}
+
+/*fixed part of the completion*/
+.completions p b {
+    font-weight:bold;
+}
+
+.completions p {
+    background: #DDF;
+    /*outline: none;
+    padding: 0px;*/
+    border-bottom: black solid 1px;
+    padding: 1px;
+    font-family: monospace;
+}
+
+pre.dialog {
+    background-color: #f7f7f7;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    padding: 0.4em;
+    padding-left: 2em;
+}
+
+p.dialog {
+    padding : 0.2em;
+}
+
+.shortcut_key {
+    display: inline-block;
+    width: 15ex;
+    text-align: right;
+    font-family: monospace;
+}
+
+.shortcut_descr {
+}
+
+/* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
+   to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
+ */
+pre, code, kbd, samp { white-space: pre-wrap; }
+
+#fonttest {
+    font-family: monospace;
+}
+
+</style>
+<style type="text/css">
+.rendered_html {color: black;}
+.rendered_html em {font-style: italic;}
+.rendered_html strong {font-weight: bold;}
+.rendered_html u {text-decoration: underline;}
+.rendered_html :link { text-decoration: underline }
+.rendered_html :visited { text-decoration: underline }
+.rendered_html h1 {font-size: 197%; margin: .65em 0; font-weight: bold;}
+.rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
+.rendered_html h3 {font-size: 123.1%; margin: .85em 0; font-weight: bold;}
+.rendered_html h4 {font-size: 100% margin: 0.95em 0; font-weight: bold;}
+.rendered_html h5 {font-size: 85%; margin: 1.5em 0; font-weight: bold;}
+.rendered_html h6 {font-size: 77%; margin: 1.65em 0; font-weight: bold;}
+.rendered_html ul {list-style:disc; margin: 1em 2em;}
+.rendered_html ul ul {list-style:square; margin: 0em 2em;}
+.rendered_html ul ul ul {list-style:circle; margin-left: 0em 2em;}
+.rendered_html ol {list-style:upper-roman; margin: 1em 2em;}
+.rendered_html ol ol {list-style:upper-alpha; margin: 0em 2em;}
+.rendered_html ol ol ol {list-style:decimal; margin: 0em 2em;}
+.rendered_html ol ol ol ol {list-style:lower-alpha; margin 0em 2em;}
+.rendered_html ol ol ol ol ol {list-style:lower-roman; 0em 2em;}
+
+.rendered_html hr {
+    color: black;
+    background-color: black;
+}
+
+.rendered_html pre {
+    margin: 1em 2em;
+}
+
+.rendered_html blockquote {
+    margin: 1em 2em;
+}
+
+.rendered_html table {
+    border: 1px solid black;
+    border-collapse: collapse;
+    margin: 1em 2em;
+}
+
+.rendered_html td {
+    border: 1px solid black;
+    text-align: left;
+    vertical-align: middle;
+    padding: 4px;
+}
+
+.rendered_html th {
+    border: 1px solid black;
+    text-align: left;
+    vertical-align: middle;
+    padding: 4px;
+    font-weight: bold;
+}
+
+.rendered_html tr {
+    border: 1px solid black;
+}    
+
+.rendered_html p + p {
+    margin-top: 1em;
+}
+
+
+</style>
+<style type="text/css">
+/* Overrides of notebook CSS for static HTML export
+
+*/
+body {
+  overflow: visible;
+  padding: 8px;
+}
+.input_area {
+  padding: 0.4em;
+}
+
+</style>
+>>>>>>> A new implementation of reveal converter with jinja templates.
 <style type="text/css">
 .highlight .hll { background-color: #ffffcc }
 .highlight  { background: #f8f8f8; }
@@ -1188,10 +1762,51 b' div.output_prompt {'
 .highlight .vi { color: #19177C } /* Name.Variable.Instance */
 .highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
 </style>
+
+<style type="text/css">
+/* Overrides of notebook CSS for static HTML export */
+
+.reveal {
+  font-size: 20px;
+}
+.reveal pre {
+    width: 100%;
+    padding: 0.2em;
+    margin: 0px auto;
+    font-family: monospace, sans-serif;
+    font-size: 60%;
+    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+}
+.reveal section img {
+    border: 0px solid black;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+}
+div.input_area {
+    padding: 0.2em;
+}
+div.code_cell {
+    background-color: transparent;
+}
+div.prompt {
+    width: 11ex;
+    padding: 0.0em;
+    margin: 0px;
+    font-family: monospace;
+    font-size: 60%;
+    text-align: center;
+}
+div.output_prompt {
+    /* 5px right shift to account for margin in parent container */
+    margin: 5px 5px 0 -5px;
+}
+</style>
 </head>
+
 <body>
 <div class="reveal"><div class="slides">
+
 <section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h1>A brief tour of the IPython notebook</h1>
 <p>This document will give you a brief tour of the capabilities of the IPython notebook.<br />
@@ -1202,8 +1817,8 b' system.<br />'
 </p>
 <p>The rest of the notebooks in this directory illustrate various other aspects and 
 capabilities of the IPython notebook; some of them may require additional libraries to be executed.</p>
-</div>
-<aside class="notes">
+</div><aside class="notes">
+    
 <div class="text_cell_render border-box-sizing rendered_html">
 <p><strong>NOTE:</strong> This notebook <em>must</em> be run from its own directory, so you must <code>cd</code>
 to this directory and then start the notebook, but do <em>not</em> use the <code>--notebook-dir</code>
@@ -1211,9 +1826,9 b' option to run it from another location.</p>'
 <p>The first thing you need to know is that you are still controlling the same old IPython you're used to,
 so things like shell aliases and magic commands still work:</p>
 </div>
-</aside>
-</section>
-<section>
+    </aside></section>
+    </section><section>
+    <section>
 <div class="cell border-box-sizing code_cell vbox">
 <div class="input hbox">
 <div class="prompt input_prompt">In&nbsp;[1]:</div>
@@ -1223,11 +1838,15 b' so things like shell aliases and magic commands still work:</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[1]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[1]:</div>
-<div class="output_subarea output_pyout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+
 <pre>u&apos;/Users/minrk/dev/ip/mine/docs/examples/notebooks&apos;</pre>
 </div>
 </div>
@@ -1243,11 +1862,14 b' so things like shell aliases and magic commands still work:</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stdout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>00_notebook_tour.ipynb          callbacks.ipynb                 python-logo.svg
 01_notebook_introduction.ipynb  cython_extension.ipynb          rmagic_extension.ipynb
 Animations_and_Progress.ipynb   display_protocol.ipynb          sympy.ipynb
@@ -1271,26 +1893,29 b' animation.m4v progbar.ipynb'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stdout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>The IPython notebook is great!
 </pre>
 </div>
 </div>
 </div>
 </div>
-</div>
-</section>
-<section>
-<section>
+</div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h2>
   Plots with matplotlib
 </h2>
 </div>
+
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>IPython adds an 'inline' matplotlib backend,
 which embeds any matplotlib figures into the notebook.</p>
@@ -1304,11 +1929,14 b' which embeds any matplotlib figures into the notebook.</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stdout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>
 Welcome to pylab, a matplotlib-based Python environment [backend: module://IPython.zmq.pylab.backend_inline].
 For more information, type &apos;help(pylab)&apos;.
@@ -1329,11 +1957,15 b' For more information, type &apos;help(pylab)&apos;.'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_display_data">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_display_data">
+
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAX0AAAEICAYAAACzliQjAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
 AAALEgAACxIB0t1+/AAAIABJREFUeJztfXt0VdWd/+fmwSvhlUDeAcSECREFFWtLi8YKWlBTrS8c
 q1StZVppO21XZ3XNrJnqmqmF6XSpa9EquqYVOlZp+6tCUfHZKK2ltIpohcqjonnwCOQBeSc35/fH
@@ -1693,8 +2325,7 b' kL6BgYHBGML/B3suibfww4xPAAAAAElFTkSuQmCC'
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>You can paste blocks of input with prompt markers, such as those from
 <a href="http://docs.python.org/tutorial/interpreter.html#interactive-mode">the official Python tutorial</a></p>
@@ -1710,19 +2341,21 b' kL6BgYHBGML/B3suibfww4xPAAAAAElFTkSuQmCC'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stdout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>Be careful not to fall off!
 </pre>
 </div>
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>Errors are shown in informative ways:</p>
 </div>
@@ -1735,11 +2368,14 b' kL6BgYHBGML/B3suibfww4xPAAAAAElFTkSuQmCC'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stderr">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stderr">
 <pre>ERROR: File &#96;u&apos;non_existent_file.py&apos;&#96; not found.</pre>
 </div>
 </div>
@@ -1757,12 +2393,16 b' kL6BgYHBGML/B3suibfww4xPAAAAAElFTkSuQmCC'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_pyerr">
-<pre><span class="ansired">---------------------------------------------------------------------------</span>
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyerr">
+<pre>
+<span class="ansired">---------------------------------------------------------------------------</span>
 <span class="ansired">ZeroDivisionError</span>                         Traceback (most recent call last)
 <span class="ansigreen">&lt;ipython-input-8-dc39888fd1d2&gt;</span> in <span class="ansicyan">&lt;module&gt;</span><span class="ansiblue">()</span>
 <span class="ansigreen">      1</span> x <span class="ansiyellow">=</span> <span class="ansicyan">1</span><span class="ansiyellow"></span>
@@ -1774,13 +2414,13 b' kL6BgYHBGML/B3suibfww4xPAAAAAElFTkSuQmCC'
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>When IPython needs to display additional information (such as providing details on an object via <code>x?</code>
 it will automatically invoke a pager at the bottom of the screen:</p>
-</div>
-<div class="fragment" class="cell border-box-sizing code_cell vbox">
+</div><div class="fragment">
+    
+<div class="cell border-box-sizing code_cell vbox">
 <div class="input hbox">
 <div class="prompt input_prompt">In&nbsp;[18]:</div>
 <div class="input_area box-flex1">
@@ -1790,9 +2430,9 b' it will automatically invoke a pager at the bottom of the screen:</p>'
 </div>
 </div>
 </div>
-</section>
-</section>
-<section>
+    </div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h2>Non-blocking output of kernel</h2>
 <p>If you execute the next cell, you will see the output arriving as it is generated, not all at the end.</p>
@@ -1809,20 +2449,23 b' it will automatically invoke a pager at the bottom of the screen:</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stdout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>0 1 2 3 4 5 6 7
 </pre>
 </div>
 </div>
 </div>
 </div>
-</div>
-</section>
-<section>
+</div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h2>Clean crash and restart</h2>
 <p>We call the low-level system libc.time routine with the wrong argument via
@@ -1842,10 +2485,9 b' ctypes to segfault the Python interpreter:</p>'
 
 </div>
 </div>
-</div>
-</section>
-<section>
-<section>
+</div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h2>Markdown cells can contain formatted text and code</h2>
 <p>You can <em>italicize</em>, <strong>boldface</strong></p>
@@ -1864,17 +2506,14 b' ctypes to segfault the Python interpreter:</p>'
   x += 4;
 }
 </code></pre>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>Courtesy of MathJax, you can include mathematical expressions both inline: 
 $e^{i\pi} + 1 = 0$  and displayed:</p>
 <p>$$e^x=\sum_{i=0}^\infty \frac{1}{i!}x^i$$</p>
-</div>
-</section>
-</section>
-<section>
-<section>
+</div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h2>Rich displays: include anyting a browser can show</h2>
 <p>Note that we have an actual protocol for this, see the <code>display_protocol</code> notebook for further details.</p>
@@ -1890,11 +2529,15 b' $e^{i\\pi} + 1 = 0$ and displayed:</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[1]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[1]:</div>
-<div class="output_subarea output_pyout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAABDCAYAAAD5/P3lAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
 AAAH3AAAB9wBYvxo6AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAACAASURB
 VHic7Z15uBxF1bjfugkJhCWBsCSAJGACNg4QCI3RT1lEAVE+UEBNOmwCDcjHT1wQgU+WD3dFxA1o
@@ -2062,8 +2705,7 b' HMRRca/E5hVINNIVwI2B56z6/3ExLRI31pXNAAAAAElFTkSuQmCC'
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>An image can also be displayed from raw data or a url</p>
 </div>
@@ -2076,21 +2718,29 b' HMRRca/E5hVINNIVwI2B56z6/3ExLRI31pXNAAAAAElFTkSuQmCC'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[2]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[2]:</div>
-<div class="output_subarea output_pyout output_html rendered_html">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+<div class="output_html rendered_html">
 <img src="http://python.org/images/python-logo.gif" />
 </div>
 </div>
 </div>
 </div>
 </div>
-<div style=display:none class="text_cell_render border-box-sizing rendered_html">
+</div><div style=display:none>
+    
+<div class="text_cell_render border-box-sizing rendered_html">
 <p>SVG images are also supported out of the box (since modern browsers do a good job of rendering them):</p>
 </div>
-<div style=display:none class="cell border-box-sizing code_cell vbox">
+    </div><div style=display:none>
+    
+<div class="cell border-box-sizing code_cell vbox">
 <div class="input hbox">
 <div class="prompt input_prompt">In&nbsp;[3]:</div>
 <div class="input_area box-flex1">
@@ -2100,11 +2750,14 b' HMRRca/E5hVINNIVwI2B56z6/3ExLRI31pXNAAAAAElFTkSuQmCC'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[3]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[3]:</div>
-<div class="output_subarea output_pyout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
 <svg height="115.02pt" id="svg2" inkscape:version="0.43" sodipodi:docbase="/home/sdeibel" sodipodi:docname="logo-python-generic.svg" sodipodi:version="0.32" version="1.0" width="388.84pt" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <metadata id="metadata2193">
     <rdf:RDF>
@@ -2171,10 +2824,9 b' HMRRca/E5hVINNIVwI2B56z6/3ExLRI31pXNAAAAAElFTkSuQmCC'
 </div>
 </div>
 </div>
-</section>
-</section>
-<section>
-<section>
+    </div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h4>Embedded vs Non-embedded Images</h4>
 </div>
@@ -2198,8 +2850,7 b' HMRRca/E5hVINNIVwI2B56z6/3ExLRI31pXNAAAAAElFTkSuQmCC'
 
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>Today's image from a webcam at Berkeley, (at the time I created this notebook). This should also work in the Qtconsole.
 Drawback is that the saved notebook will be larger, but the image will still be present offline.</p>
@@ -2213,11 +2864,15 b' Drawback is that the saved notebook will be larger, but the image will still be '
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[5]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[5]:</div>
-<div class="output_subarea output_pyout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+
 <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAtAC0AAD//gAdQ29weXJpZ2h0IDIwMTIgVS5DLiBSZWdlbnRz/+Ef/kV4
 aWYAAElJKgAIAAAACgAOAQIAIAAAAIYAAAAPAQIABgAAAKYAAAAQAQIAFAAAAKwAAAASAQMAAQAA
 AAEAAAAaAQUAAQAAAMwAAAAbAQUAAQAAANQAAAAoAQMAAQAAAAIAAAAyAQIAFAAAANwAAAATAgMA
@@ -3416,8 +4071,7 b' iCexrNEssiuIRldxwPzrVLcxNEI8+g474/zFc3F2CidRLiNFyPXFBYQqgNKFOfw1pPRTStwsP4ZC'
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>Today's image from same webcam at Berkeley, (refreshed every minutes, if you reload the notebook), visible only with an active internet connexion, that should be different from the previous one. This will not work on Qtconsole.
 Notebook saved with this kind of image will be lighter and always reflect the current version of the source, but the image won't display offline.</p>
@@ -3431,23 +4085,29 b' Notebook saved with this kind of image will be lighter and always reflect the cu'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[6]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[6]:</div>
-<div class="output_subarea output_pyout output_html rendered_html">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+<div class="output_html rendered_html">
 <img src="http://scienceview.berkeley.edu/view/images/newview.jpg" />
 </div>
 </div>
 </div>
 </div>
 </div>
-<div style=display:none class="text_cell_render border-box-sizing rendered_html">
+</div><div style=display:none>
+    
+<div class="text_cell_render border-box-sizing rendered_html">
 <p>Of course, if you re-run the all notebook, the two images will be the same again.</p>
 </div>
-</section>
-</section>
-<section>
+    </div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h3>Video</h3>
 </div>
@@ -3469,11 +4129,15 b' hosted content is trivial):</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[7]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[7]:</div>
-<div class="output_subarea output_pyout output_html rendered_html">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+<div class="output_html rendered_html">
 
             <iframe
                 width="400"
@@ -3488,7 +4152,9 b' hosted content is trivial):</p>'
 </div>
 </div>
 </div>
-<div style=display:none class="text_cell_render border-box-sizing rendered_html">
+</div><div style=display:none>
+    
+<div class="text_cell_render border-box-sizing rendered_html">
 <p>Using the nascent video capabilities of modern browsers, you may also be able to display local
 videos.  At the moment this doesn't work very well in all browsers, so it may or may not work for you;
 we will continue testing this and looking for ways to make it more robust.<br />
@@ -3497,7 +4163,9 b' we will continue testing this and looking for ways to make it more robust.<br />'
 transport, and uses the HTML5 video tag to load it. On Chrome 15 it works correctly, displaying a control
 bar at the bottom with a play/pause button and a location slider.</p>
 </div>
-<div style=display:none class="cell border-box-sizing code_cell vbox">
+    </div><div style=display:none>
+    
+<div class="cell border-box-sizing code_cell vbox">
 <div class="input hbox">
 <div class="prompt input_prompt">In&nbsp;[8]:</div>
 <div class="input_area box-flex1">
@@ -3510,11 +4178,15 b' bar at the bottom with a play/pause button and a location slider.</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[8]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[8]:</div>
-<div class="output_subarea output_pyout output_html rendered_html">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+<div class="output_html rendered_html">
 <video controls alt="test" src="data:video/x-m4v;base64,AAAAHGZ0eXBNNFYgAAACAGlzb21pc28yYXZjMQAAAAhmcmVlAAAqiW1kYXQAAAKMBgX//4jcRem9
 5tlIt5Ys2CDZI+7veDI2NCAtIGNvcmUgMTE4IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENv
 cHlsZWZ0IDIwMDMtMjAxMSAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9w
@@ -3730,8 +4402,10 b' AAAAAAAALGlsc3QAAAAkqXRvbwAAABxkYXRhAAAAAQAAAABMYXZmNTIuMTExLjA='
 </div>
 </div>
 </div>
-</section>
-<section>
+</div>
+    </div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h2>Local Files</h2>
 <p>The above examples embed images and video from the notebook filesystem in the output
@@ -3739,8 +4413,9 b' areas of code cells. It is also possible to request these files directly in mar'
 if they reside in the notebook directory via relative urls prefixed with <code>files/</code>:</p>
 <pre><code>files/[subdirectory/]&lt;filename&gt;
 </code></pre>
-</div>
-<div style=display:none class="text_cell_render border-box-sizing rendered_html">
+</div><div style=display:none>
+    
+<div class="text_cell_render border-box-sizing rendered_html">
 <p>For example, in the example notebook folder, we have the Python logo, addressed as:</p>
 <pre><code>&lt;img src="files/python-logo.svg" /&gt;
 </code></pre>
@@ -3764,9 +4439,9 b' directory at a high level in your filesystem (e.g. your home directory).'
 When you run the notebook in a password-protected manner, local file access is restricted
 to authenticated users unless read-only views are active.
 </div>
-</section>
-<section>
-<section>
+    </div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h2>Linking to files and directories for viewing in the browser</h2>
 <p>It is also possible to link directly to files or directories so they can be opened in the browser. This is especially convenient if you're interacting with a tool within IPython that generates HTML pages, and you'd like to easily be able to open those in a new browser window. Alternatively, if your IPython notebook server is on a remote system, creating links provides an easy way to download any files that get generated.</p>
@@ -3781,11 +4456,14 b' to authenticated users unless read-only views are active.'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stdout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>00_notebook_tour.ipynb          formatting.ipynb
 01_notebook_introduction.ipynb  octavemagic_extension.ipynb
 Animations_and_Progress.ipynb   publish_data.ipynb
@@ -3799,8 +4477,7 b' display_protocol.ipynb trapezoid_rule.ipynb'
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>If we want to create a link to one of them, we can call use the <code>FileLink</code> object.</p>
 </div>
@@ -3814,18 +4491,22 b' display_protocol.ipynb trapezoid_rule.ipynb'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[2]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[2]:</div>
-<div class="output_subarea output_pyout output_html rendered_html">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+<div class="output_html rendered_html">
 <a href='files/00_notebook_tour.ipynb' target='_blank'>00_notebook_tour.ipynb</a><br>
 </div>
 </div>
 </div>
 </div>
 </div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>Alternatively, if we want to link to all of them, we can use the <code>FileLinks</code> object, passing <code>'.'</code> to indicate that we want links generated for the current working directory. Note that if there were other directories under the current directory, <code>FileLinks</code> would work in a recursive manner creating links to files in all sub-directories as well.</p>
 </div>
@@ -3839,11 +4520,15 b' display_protocol.ipynb trapezoid_rule.ipynb'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[7]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[7]:</div>
-<div class="output_subarea output_pyout output_html rendered_html">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+<div class="output_html rendered_html">
 <a href='files/./00_notebook_tour.ipynb' target='_blank'>00_notebook_tour.ipynb</a><br>
 <a href='files/./01_notebook_introduction.ipynb' target='_blank'>01_notebook_introduction.ipynb</a><br>
 <a href='files/./animation.m4v' target='_blank'>animation.m4v</a><br>
@@ -3865,9 +4550,9 b' display_protocol.ipynb trapezoid_rule.ipynb'
 </div>
 </div>
 </div>
-</section>
-</section>
-<section>
+</div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h3>External sites</h3>
 <p>You can even embed an entire page from another site in an iframe; for example this is today's Wikipedia
@@ -3882,20 +4567,24 b' page for mobile users:</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[9]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[9]:</div>
-<div class="output_subarea output_pyout output_html rendered_html">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+<div class="output_html rendered_html">
 <iframe src=http://en.mobile.wikipedia.org/?useformat=mobile width=700 height=350></iframe>
 </div>
 </div>
 </div>
 </div>
 </div>
-</section>
-<section>
-<section>
+</div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h3>Mathematics</h3>
 <p>And we also support the display of mathematical expressions typeset in LaTeX, which is rendered
@@ -3916,18 +4605,21 b' renders it. The <code>Math</code> object will add the needed LaTeX delimiters ('
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[10]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[10]:</div>
-<div class="output_subarea output_pyout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+
 $$F(k) = \int_{-\infty}^{\infty} f(x) e^{2\pi i k} dx$$
 </div>
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>With the <code>Latex</code> class, you have to include the delimiters yourself.  This allows you to use other LaTeX modes such as <code>eqnarray</code>:</p>
 </div>
@@ -3946,11 +4638,15 b' $$F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\\pi i k} dx$$'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox">Out[11]:</div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt">Out[11]:</div>
-<div class="output_subarea output_pyout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_pyout">
+
 \begin{eqnarray}
 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
 \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
@@ -3961,8 +4657,7 b' $$F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\\pi i k} dx$$'
 </div>
 </div>
 </div>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>Or you can enter latex directly with the <code>%%latex</code> cell magic:</p>
 </div>
@@ -3981,11 +4676,15 b' $$F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\\pi i k} dx$$'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_display_data">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_display_data">
+
 \begin{aligned}
 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
 \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
@@ -3996,15 +4695,15 b' $$F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\\pi i k} dx$$'
 </div>
 </div>
 </div>
-</div>
-<div style=display:none class="text_cell_render border-box-sizing rendered_html">
+</div><div style=display:none>
+    
+<div class="text_cell_render border-box-sizing rendered_html">
 <p>There is also a <code>%%javascript</code> cell magic for running javascript directly,
 and <code>%%svg</code> for manually entering SVG content.</p>
 </div>
-</section>
-</section>
-<section>
-<section>
+    </div></section>
+    </section><section>
+    <section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <h1>Loading external codes</h1>
 <ul>
@@ -4013,12 +4712,12 b' and <code>%%svg</code> for manually entering SVG content.</p>'
 </ul>
 <p>In this notebook we've kept the output saved so you can see the result, but you should run the next
 cell yourself (with an active internet connection).</p>
-</div>
-</section><section>
+</div></section><section>
 <div class="text_cell_render border-box-sizing rendered_html">
 <p>Let's make sure we have pylab again, in case we have restarted the kernel due to the crash demo above</p>
-</div>
-<div class="fragment" class="cell border-box-sizing code_cell vbox">
+</div><div class="fragment">
+    
+<div class="cell border-box-sizing code_cell vbox">
 <div class="input hbox">
 <div class="prompt input_prompt">In&nbsp;[12]:</div>
 <div class="input_area box-flex1">
@@ -4027,11 +4726,14 b' cell yourself (with an active internet connection).</p>'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_stream output_stdout">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_stream output_stdout">
 <pre>
 Welcome to pylab, a matplotlib-based Python environment [backend: module://IPython.zmq.pylab.backend_inline].
 For more information, type &apos;help(pylab)&apos;.
@@ -4041,7 +4743,9 b' For more information, type &apos;help(pylab)&apos;.'
 </div>
 </div>
 </div>
-<div class="fragment" class="cell border-box-sizing code_cell vbox">
+    </div><div class="fragment">
+    
+<div class="cell border-box-sizing code_cell vbox">
 <div class="input hbox">
 <div class="prompt input_prompt">In&nbsp;[15]:</div>
 <div class="input_area box-flex1">
@@ -4051,7 +4755,9 b' For more information, type &apos;help(pylab)&apos;.'
 </div>
 </div>
 </div>
-<div style=display:none class="cell border-box-sizing code_cell vbox">
+    </div><div style=display:none>
+    
+<div class="cell border-box-sizing code_cell vbox">
 <div class="input hbox">
 <div class="prompt input_prompt">In&nbsp;[16]:</div>
 <div class="input_area box-flex1">
@@ -4093,11 +4799,15 b' For more information, type &apos;help(pylab)&apos;.'
 
 </div>
 </div>
-<div class="vbox output_wrapper">
+<div class="output_wrapper">
 <div class="output vbox">
+<div class="prompt output_prompt">
+<div class="output vbox"></div>
+</div>
 <div class="hbox output_area">
-<div class="prompt output_prompt"></div>
-<div class="output_subarea output_display_data">
+<div class="prompt"></div>
+<div class="box-flex1 output_subarea output_display_data">
+
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV0AAAD5CAYAAACEcub7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
 AAALEgAACxIB0t1+/AAAIABJREFUeJzt3Xl0VPX5x/H3ZN9JkLAkASMYoiTIvoqgxRU3/LmgBVRq
 XVHEVqFq0UiVRVwDatWjiBZcTottpYhSUBQw7ARIIAsQQljDEkJ2MjO/PwYoSMg6M3fu5PM6h2NJ
@@ -4258,8 +4968,9 b' X07vG9Z4QUTEBQ4dOkRpaSklJSVnnQPx/xV9BfkfDyZLAAAAAElFTkSuQmCC'
 </div>
 </div>
 </div>
-</section>
-</section>
+    </div></section>
+    </section>
+
 </div></div>
 
 <!-- Social buttons -->
@@ -4307,8 +5018,9 b' dependencies: ['
 { src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
 { src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
 { src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
-{ src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
+{ src: 'notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
 { src: 'http://s7.addthis.com/js/300/addthis_widget.js', async: true},
+{ src: 'js/revealmathjax.js', async: true},
 { src: 'js/mathjax-onload.js', async: true}
 ]
 });
@@ -4320,4 +5032,5 b' MathJax.Hub.Rerender(event.currentSlide);'
 });
 </script>
 </body>
-</html>

  No newline at end of file
+
+</html>