sambuc/pelican-plugins
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #153 from joergdietrich/collapse-code

Browse Source 
Collapsible notebook code cells in liquid_tags plugin
This commit is contained in:
Justin Mayer
2014-05-06 06:48:13 -07:00
parent 4252f8f230 620d176f30
commit 7f52729121
4 changed files with 135 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
liquid_tags/Readme.md
View File

@@ -107,4 +107,16 @@ are a few extra steps required for this plugin:
this will insert the proper css formatting into your document. this will insert the proper css formatting into your document.
### Collapsible Code in IPython Notebooks
The plugin also enables collapsible code input boxes. For this to work
you first need to copy the file ``pelicanhtml_1.tpl`` (for IPython
1.x) ``pelicanhtml_2.tpl`` (for IPython 2.x) to the top level of your
Pelican blog. Notebook input cells containing the comment line ``#
<!-- collapse=True -->`` will be collapsed when the html page is
loaded and can be expanded by clicking on them. Cells containing the
comment line ``# <!-- collapse=False -->`` will be open on load but
can be collapsed by clicking on their header. Cells without collapse
comments are rendered as standard code input cells.
[1] http://ipython.org/ [1] http://ipython.org/

68
liquid_tags/notebook.py
View File

@@ -129,6 +129,14 @@ div.text_cell_render {
} }
img.anim_icon{padding:0; border:0; vertical-align:middle; -webkit-box-shadow:none; -box-shadow:none} img.anim_icon{padding:0; border:0; vertical-align:middle; -webkit-box-shadow:none; -box-shadow:none}
div.collapseheader {
width=100%;
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style> </style>
<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script> <script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
@@ -151,6 +159,23 @@ init_mathjax = function() {
} }
init_mathjax(); init_mathjax();
</script> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("div.collapseheader").click(function () {
$header = $(this).children("span").first();
$codearea = $(this).children(".input_area");
console.log($(this).children());
$codearea.slideToggle(500, function () {
$header.text(function () {
return $codearea.is(":visible") ? "Collapse Code" : "Expand Code";
});
});
});
});
</script>
""" """
CSS_WRAPPER = """ CSS_WRAPPER = """
@@ -190,36 +215,6 @@ class SubCell(Preprocessor):
call = preprocess # IPython < 2.0 call = preprocess # IPython < 2.0
#----------------------------------------------------------------------
# Customize the html template:
# This changes the <pre> tags in basic_html.tpl to <pre class="ipynb"
pelican_loader = DictLoader({'pelicanhtml.tpl':
"""
{%- extends 'basichtml.tpl' -%}
{% block stream_stdout -%}
<div class="box-flex1 output_subarea output_stream output_stdout">
<pre class="ipynb">{{output.text |ansi2html}}</pre>
</div>
{%- endblock stream_stdout %}
{% block stream_stderr -%}
<div class="box-flex1 output_subarea output_stream output_stderr">
<pre class="ipynb">{{output.text |ansi2html}}</pre>
</div>
{%- endblock stream_stderr %}
{% block pyerr -%}
<div class="box-flex1 output_subarea output_pyerr">
<pre class="ipynb">{{super()}}</pre>
</div>
{%- endblock pyerr %}
{%- block data_text %}
<pre class="ipynb">{{output.text | ansi2html}}</pre>
{%- endblock -%}
"""})
#---------------------------------------------------------------------- #----------------------------------------------------------------------
# Custom highlighter: # Custom highlighter:
@@ -273,16 +268,23 @@ def notebook(preprocessor, tag, markup):
{'enabled':True, 'highlight_class':'.highlight-ipynb'}, {'enabled':True, 'highlight_class':'.highlight-ipynb'},
'SubCell': 'SubCell':
{'enabled':True, 'start':start, 'end':end}}) {'enabled':True, 'start':start, 'end':end}})
template_file = 'basic'
if LooseVersion(IPython.__version__) >= '2.0':
if os.path.exists('pelicanhtml_2.tpl'):
template_file = 'pelicanhtml_2'
else:
if os.path.exists('pelicanhtml_1.tpl'):
template_file = 'pelicanhtml_1'
if LooseVersion(IPython.__version__) >= '2.0': if LooseVersion(IPython.__version__) >= '2.0':
subcell_kwarg = dict(preprocessors=[SubCell]) subcell_kwarg = dict(preprocessors=[SubCell])
else: else:
subcell_kwarg = dict(transformers=[SubCell]) subcell_kwarg = dict(transformers=[SubCell])
exporter = HTMLExporter(config=c, exporter = HTMLExporter(config=c,
template_file='basic', template_file=template_file,
filters={'highlight2html': custom_highlighter}, filters={'highlight2html': custom_highlighter},
extra_loaders=[pelican_loader],
**subcell_kwarg) **subcell_kwarg)
# read and parse the notebook # read and parse the notebook

44
liquid_tags/pelicanhtml_1.tpl Normal file
View File

@@ -0,0 +1,44 @@
{%- extends 'html_basic.tpl' -%}
{% block stream_stdout -%}
<div class="box-flex1 output_subarea output_stream output_stdout">
<pre class="ipynb">{{output.text |ansi2html}}</pre>
</div>
{%- endblock stream_stdout %}
{% block stream_stderr -%}
<div class="box-flex1 output_subarea output_stream output_stderr">
<pre class="ipynb">{{output.text |ansi2html}}</pre>
</div>
{%- endblock stream_stderr %}
{% block pyerr -%}
<div class="box-flex1 output_subarea output_pyerr">
<pre class="ipynb">{{super()}}</pre>
</div>
{%- endblock pyerr %}
{%- block data_text %}
<pre class="ipynb">{{output.text | ansi2html}}</pre>
{%- endblock -%}
{% block input %}
{% if "# <!-- collapse=True -->" in cell.input %}
<div class="collapseheader box-flex1"><span style="font-weight: bold;">Expand Code</span>
<div class="input_area box-flex1" style="display:none">
{{ cell.input.replace("# <!-- collapse=True -->\n", "") | highlight2html(metadata=cell.metadata) }}
</div>
</div>
{% elif "# <!-- collapse=False -->" in cell.input %}
<div class="collapseheader box-flex1"><span style="font-weight: bold;">Collapse Code</span>
<div class="input_area box-flex1">
{{ cell.input.replace("# <!-- collapse=False -->\n", "") | highlight2html(metadata=cell.metadata) }}
</div>
</div>
{% else %}
<div class="input_area box-flex1">
{{ cell.input | highlight2html(metadata=cell.metadata) }}
</div>
{% endif %}
{%- endblock input %}

44
liquid_tags/pelicanhtml_2.tpl Normal file
View File

@@ -0,0 +1,44 @@
{%- extends 'basic.tpl' -%}
{% block stream_stdout -%}
<div class="box-flex1 output_subarea output_stream output_stdout">
<pre class="ipynb">{{output.text |ansi2html}}</pre>
</div>
{%- endblock stream_stdout %}
{% block stream_stderr -%}
<div class="box-flex1 output_subarea output_stream output_stderr">
<pre class="ipynb">{{output.text |ansi2html}}</pre>
</div>
{%- endblock stream_stderr %}
{% block pyerr -%}
<div class="box-flex1 output_subarea output_pyerr">
<pre class="ipynb">{{super()}}</pre>
</div>
{%- endblock pyerr %}
{%- block data_text %}
<pre class="ipynb">{{output.text | ansi2html}}</pre>
{%- endblock -%}
{% block input %}
{% if "# <!-- collapse=True -->" in cell.input %}
<div class="collapseheader box-flex1"><span style="font-weight: bold;">Expand Code</span>
<div class="input_area box-flex1" style="display:none">
{{ cell.input.replace("# <!-- collapse=True -->\n", "") | highlight2html(metadata=cell.metadata) }}
</div>
</div>
{% elif "# <!-- collapse=False -->" in cell.input %}
<div class="collapseheader box-flex1"><span style="font-weight: bold;">Collapse Code</span>
<div class="input_area box-flex1">
{{ cell.input.replace("# <!-- collapse=False -->\n", "") | highlight2html(metadata=cell.metadata) }}
</div>
</div>
{% else %}
<div class="input_area box-flex1">
{{ cell.input | highlight2html(metadata=cell.metadata) }}
</div>
{% endif %}
{%- endblock input %}