Skip to content

Commit ba70559

Browse files
damianaviladamianavila
committed
Update
1 parent 26f18e2 commit ba70559

File tree

118 files changed

+2421
-498
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+2421
-498
lines changed

‎.doit.db

60 KB
Binary file not shown.

‎cache/posts/hide-the-input-cells-from-your-ipython-slides.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
2+
<div class="text_cell_render border-box-sizing rendered_html">
3+
<p>A tweet arrived...</p>
4+
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p>
5+
<a href="https://twitter.com/damian_avila">@damian_avila</a> Is there a way to only show the output of a cell in an NB slideshow?
6+
</p>
7+
— Thomas Wiecki (@TWiecki) <a href="https://twitter.com/TWiecki/statuses/388378339716505601">October 10, 2013</a>
8+
</blockquote>
9+
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
10+
11+
<p>And my answer was <strong>YES</strong>...</p>
12+
<p>How we can easily do it? Just follow these few steps: <!-- TEASER_END --></p>
13+
<p><strong>Rational</strong>: We are going to use the power of <code>IPython.nbconvert</code> library to use a modified <strong>jinja</strong> template which will let us hide the<code>input cells</code> in our <strong>IPython slides</strong>. To achieve this goal, we are going to use the same approach described in a previous <a href="http://www.damian.oquanta.info/posts/mimic-the-ipython-notebook-cell-execution.html">post</a>. Hence, our <code>input cells</code> will be hidden by default, but they will show up if we click on the corresponding <code>output cell</code> area.</p>
14+
<p>OK, we first wrote the custom template. I named <code>output_toggle.tpl</code>:</p>
15+
</div>
16+
<div class="cell border-box-sizing code_cell vbox">
17+
<div class="input hbox">
18+
<div class="prompt input_prompt">
19+
In&nbsp;[1]:
20+
</div>
21+
<div class="input_area box-flex1">
22+
<div class="highlight"><pre><span class="o">!</span>cat -n /media/datos/Ejemplos/output_toggle.tpl
23+
</pre></div>
24+
25+
<i class="icon-hand-up icon-large" style="float:right; margin-top:8px; margin-right:10px">&nbsp;&nbsp;Click me!</i>
26+
</div>
27+
</div>
28+
29+
<div class="output_hidden">
30+
31+
<div class="vbox output_wrapper">
32+
<div class="output vbox">
33+
34+
35+
<div class="hbox output_area"><div class="prompt"></div>
36+
<div class="box-flex1 output_subarea output_stream output_stdout">
37+
<pre>
38+
1 {%- extends &apos;slides_reveal.tpl&apos; -%}
39+
2
40+
3 {% block input_group -%}
41+
4 &lt;div class=&quot;input_hidden&quot;&gt;
42+
5 {{ super() }}
43+
6 &lt;/div&gt;
44+
7 {% endblock input_group %}
45+
8
46+
9 {%- block header -%}
47+
10 {{ super() }}
48+
11
49+
12 &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
50+
13
51+
14 &lt;style type=&quot;text/css&quot;&gt;
52+
15 //div.output_wrapper {
53+
16 // margin-top: 0px;
54+
17 //}
55+
18 .input_hidden {
56+
19 display: none;
57+
20 // margin-top: 5px;
58+
21 }
59+
22 &lt;/style&gt;
60+
23
61+
24 &lt;script&gt;
62+
25 $(document).ready(function(){
63+
26 $(&quot;.output_wrapper&quot;).click(function(){
64+
27 $(this).prev(&apos;.input_hidden&apos;).slideToggle();
65+
28 });
66+
29 })
67+
30 &lt;/script&gt;
68+
31 {%- endblock header -%}
69+
32
70+
71+
</pre>
72+
</div>
73+
</div>
74+
75+
</div>
76+
</div>
77+
78+
</div>
79+
80+
</div>
81+
<div class="text_cell_render border-box-sizing rendered_html">
82+
<p>The code is simple, but for a detailed explanation see my previous [post]((http://www.damian.oquanta.info/posts/mimic-the-ipython-notebook-cell-execution.htm).</p>
83+
<p>Briefly, I just change obvious things such as the encompassing of the <code>input_group</code> and the calling of <code>.prev()</code> method (instead of <code>.next(</code>) one) inside the little <em>javascript</em> snippet.</p>
84+
<p>Now, the second and last step was:</p>
85+
<p><code>ipython nbconvert your_slides.ipynb --to slides --template output_toggle --post serve</code></p>
86+
<p>and I got something like this (navigate and try it!):</p>
87+
</div>
88+
<div class="text_cell_render border-box-sizing rendered_html">
89+
<iframe src="http://damianavila.github.io/Miscellaneus/Example_IPython_slides.slides.html#/" width="800" height="600"></iframe>
90+
91+
</div>
92+
<div class="text_cell_render border-box-sizing rendered_html">
93+
<p>OK, as you have seen in the example, your <strong>IPython slides</strong> will be delivered showing just the <code>output cells</code>... but if you need to show some <code>input cells</code>, just click on the corresponding <code>output cell</code> and you will get them. Nice, uh!</p>
94+
<p>Hope it helps Thomas (and all the other people using the <strong>IPython slides</strong>)!</p>
95+
<p>Damián.</p>
96+
</div>

‎cache/posts/hide-the-input-cells-from-your-ipython-slides.html.es

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
2+
<div class="text_cell_render border-box-sizing rendered_html">
3+
<p>A tweet arrived...</p>
4+
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p>
5+
<a href="https://twitter.com/damian_avila">@damian_avila</a> Is there a way to only show the output of a cell in an NB slideshow?
6+
</p>
7+
— Thomas Wiecki (@TWiecki) <a href="https://twitter.com/TWiecki/statuses/388378339716505601">October 10, 2013</a>
8+
</blockquote>
9+
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
10+
11+
<p>And my answer was <strong>YES</strong>...</p>
12+
<p>How we can easily do it? Just follow these few steps: <!-- TEASER_END --></p>
13+
<p><strong>Rational</strong>: We are going to use the power of <code>IPython.nbconvert</code> library to use a modified <strong>jinja</strong> template which will let us hide the<code>input cells</code> in our <strong>IPython slides</strong>. To achieve this goal, we are going to use the same approach described in a previous <a href="http://www.damian.oquanta.info/posts/mimic-the-ipython-notebook-cell-execution.html">post</a>. Hence, our <code>input cells</code> will be hidden by default, but they will show up if we click on the corresponding <code>output cell</code> area.</p>
14+
<p>OK, we first wrote the custom template. I named <code>output_toggle.tpl</code>:</p>
15+
</div>
16+
<div class="cell border-box-sizing code_cell vbox">
17+
<div class="input hbox">
18+
<div class="prompt input_prompt">
19+
In&nbsp;[1]:
20+
</div>
21+
<div class="input_area box-flex1">
22+
<div class="highlight"><pre><span class="o">!</span>cat -n /media/datos/Ejemplos/output_toggle.tpl
23+
</pre></div>
24+
25+
<i class="icon-hand-up icon-large" style="float:right; margin-top:8px; margin-right:10px">&nbsp;&nbsp;Click me!</i>
26+
</div>
27+
</div>
28+
29+
<div class="output_hidden">
30+
31+
<div class="vbox output_wrapper">
32+
<div class="output vbox">
33+
34+
35+
<div class="hbox output_area"><div class="prompt"></div>
36+
<div class="box-flex1 output_subarea output_stream output_stdout">
37+
<pre>
38+
1 {%- extends &apos;slides_reveal.tpl&apos; -%}
39+
2
40+
3 {% block input_group -%}
41+
4 &lt;div class=&quot;input_hidden&quot;&gt;
42+
5 {{ super() }}
43+
6 &lt;/div&gt;
44+
7 {% endblock input_group %}
45+
8
46+
9 {%- block header -%}
47+
10 {{ super() }}
48+
11
49+
12 &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
50+
13
51+
14 &lt;style type=&quot;text/css&quot;&gt;
52+
15 //div.output_wrapper {
53+
16 // margin-top: 0px;
54+
17 //}
55+
18 .input_hidden {
56+
19 display: none;
57+
20 // margin-top: 5px;
58+
21 }
59+
22 &lt;/style&gt;
60+
23
61+
24 &lt;script&gt;
62+
25 $(document).ready(function(){
63+
26 $(&quot;.output_wrapper&quot;).click(function(){
64+
27 $(this).prev(&apos;.input_hidden&apos;).slideToggle();
65+
28 });
66+
29 })
67+
30 &lt;/script&gt;
68+
31 {%- endblock header -%}
69+
32
70+
71+
</pre>
72+
</div>
73+
</div>
74+
75+
</div>
76+
</div>
77+
78+
</div>
79+
80+
</div>
81+
<div class="text_cell_render border-box-sizing rendered_html">
82+
<p>The code is simple, but for a detailed explanation see my previous [post]((http://www.damian.oquanta.info/posts/mimic-the-ipython-notebook-cell-execution.htm).</p>
83+
<p>Briefly, I just change obvious things such as the encompassing of the <code>input_group</code> and the calling of <code>.prev()</code> method (instead of <code>.next(</code>) one) inside the little <em>javascript</em> snippet.</p>
84+
<p>Now, the second and last step was:</p>
85+
<p><code>ipython nbconvert your_slides.ipynb --to slides --template output_toggle --post serve</code></p>
86+
<p>and I got something like this (navigate and try it!):</p>
87+
</div>
88+
<div class="text_cell_render border-box-sizing rendered_html">
89+
<iframe src="http://damianavila.github.io/Miscellaneus/Example_IPython_slides.slides.html#/" width="800" height="600"></iframe>
90+
91+
</div>
92+
<div class="text_cell_render border-box-sizing rendered_html">
93+
<p>OK, as you have seen in the example, your <strong>IPython slides</strong> will be delivered showing just the <code>output cells</code>... but if you need to show some <code>input cells</code>, just click on the corresponding <code>output cell</code> and you will get them. Nice, uh!</p>
94+
<p>Hope it helps Thomas (and all the other people using the <strong>IPython slides</strong>)!</p>
95+
<p>Damián.</p>
96+
</div>

‎cache/posts/mimic-the-ipython-notebook-cell-execution.html

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
In&nbsp;[1]:
1313
</div>
1414
<div class="input_area box-flex1">
15-
<div class="highlight"><pre><span class="o">!</span>sed -n 1,11p /media/datos/Ejemplos/toggle.tpl
15+
<div class="highlight"><pre><span class="o">!</span>sed -n 1,7p /media/datos/Ejemplos/toggle.tpl
1616
</pre></div>
1717

1818
<i class="icon-hand-up icon-large" style="float:right; margin-top:8px; margin-right:10px">&nbsp;&nbsp;Click me!</i>
@@ -32,12 +32,8 @@
3232

3333
{% block output_group %}
3434
&lt;div class=&quot;output_hidden&quot;&gt;
35-
&lt;div class=&quot;vbox output_wrapper&quot;&gt;
36-
&lt;div class=&quot;output vbox&quot;&gt;
3735
{{ super() }}
3836
&lt;/div&gt;
39-
&lt;/div&gt;
40-
&lt;/div&gt;
4137
{% endblock output_group %}
4238

4339
</pre>
@@ -60,7 +56,7 @@
6056
In&nbsp;[2]:
6157
</div>
6258
<div class="input_area box-flex1">
63-
<div class="highlight"><pre><span class="o">!</span>sed -n 29,33p /media/datos/Ejemplos/toggle.tpl
59+
<div class="highlight"><pre><span class="o">!</span>sed -n 25,29p /media/datos/Ejemplos/toggle.tpl
6460
</pre></div>
6561

6662
<i class="icon-hand-up icon-large" style="float:right; margin-top:8px; margin-right:10px">&nbsp;&nbsp;Click me!</i>
@@ -78,7 +74,7 @@
7874
<pre>
7975
$(document).ready(function(){
8076
$(&quot;.input&quot;).click(function(){
81-
$(this).next(&apos;.output_hidden&apos;).slideToggle();
77+
$(this).next(&apos;.output_hidden&apos;).slideToggle();
8278
});
8379
})
8480

@@ -103,7 +99,7 @@
10399
In&nbsp;[3]:
104100
</div>
105101
<div class="input_area box-flex1">
106-
<div class="highlight"><pre><span class="o">!</span>sed -n 22,25p /media/datos/Ejemplos/toggle.tpl
102+
<div class="highlight"><pre><span class="o">!</span>sed -n 18,21p /media/datos/Ejemplos/toggle.tpl
107103
</pre></div>
108104

109105
<i class="icon-hand-up icon-large" style="float:right; margin-top:8px; margin-right:10px">&nbsp;&nbsp;Click me!</i>
@@ -163,38 +159,34 @@
163159
2
164160
3 {% block output_group %}
165161
4 &lt;div class=&quot;output_hidden&quot;&gt;
166-
5 &lt;div class=&quot;vbox output_wrapper&quot;&gt;
167-
6 &lt;div class=&quot;output vbox&quot;&gt;
168-
7 {{ super() }}
169-
8 &lt;/div&gt;
170-
9 &lt;/div&gt;
171-
10 &lt;/div&gt;
172-
11 {% endblock output_group %}
173-
12
174-
13 {%- block header -%}
175-
14 {{ super() }}
176-
15
177-
16 &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
178-
17
179-
18 &lt;style type=&quot;text/css&quot;&gt;
180-
19 div.output_wrapper {
181-
20 margin-top: 0px;
162+
5 {{ super() }}
163+
6 &lt;/div&gt;
164+
7 {% endblock output_group %}
165+
8
166+
9 {%- block header -%}
167+
10 {{ super() }}
168+
11
169+
12 &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
170+
13
171+
14 &lt;style type=&quot;text/css&quot;&gt;
172+
15 div.output_wrapper {
173+
16 margin-top: 0px;
174+
17 }
175+
18 .output_hidden {
176+
19 display: none;
177+
20 margin-top: 5px;
182178
21 }
183-
22 .output_hidden {
184-
23 display: none;
185-
24 margin-top: 5px;
186-
25 }
187-
26 &lt;/style&gt;
188-
27
189-
28 &lt;script&gt;
190-
29 $(document).ready(function(){
191-
30 $(&quot;.input&quot;).click(function(){
192-
31 $(this).next(&apos;.output_hidden&apos;).slideToggle();
193-
32 });
194-
33 })
195-
34 &lt;/script&gt;
196-
35 {%- endblock header -%}
197-
36
179+
22 &lt;/style&gt;
180+
23
181+
24 &lt;script&gt;
182+
25 $(document).ready(function(){
183+
26 $(&quot;.input&quot;).click(function(){
184+
27 $(this).next(&apos;.output_hidden&apos;).slideToggle();
185+
28 });
186+
29 })
187+
30 &lt;/script&gt;
188+
31 {%- endblock header -%}
189+
32
198190

199191
</pre>
200192
</div>

0 commit comments

Comments
 (0)