Skip to content

Instantly share code, notes, and snippets.

@z-m-k

z-m-k/footnotes.ipynb

Last active March 24, 2018 14:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save z-m-k/4492534 to your computer and use it in GitHub Desktop.
Save z-m-k/4492534 to your computer and use it in GitHub Desktop.
Download ZIP
Latex footnotes, citations, etc. in IPython Notebook; see at http://nbviewer.ipython.org/4492534/
Display the source blob
Display the rendered blob
Raw
footnotes.ipynb
{
"metadata": {
"name": "footnotes"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Please, wait a few seconds"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#Latex footnotes, citations, etc. in IPython Notebook"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in risus elit. Vestibulum lacus dolor, egestas id feugiat a, mollis sit amet lectus. Nullam elementum nulla sit amet purus rhoncus porttitor. Mauris pulvinar enim at dui rutrum scelerisque. Donec tempus risus et nibh porta mollis. Donec sit amet orci ligula\\footnote{Nullam non risus et arcu posuere malesuada. Nullam suscipit pellentesque nibh vel malesuada}."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Cras vestibulum tempus urna, vel suscipit erat sagittis sit amet. Curabitur id lacus quam. Aliquam erat volutpat. Nulla id est ipsum, quis dictum lacus. In nec ante ligula. Praesent elit ipsum, semper quis commodo id, interdum tempor turpis. Donec eu sapien tellus. Sed id ligula libero. In hac habitasse platea dictumst\\footnote{Quisque odio tortor, venenatis a placerat a, pellentesque sit amet risus. Maecenas fermentum turpis vitae odio ultricies in tempus tellus facilisis. Fusce nec sapien quam. Maecenas eget elit a orci egestas convallis. Aliquam erat volutpat.}."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Quisque aliquet elementum felis, commodo vestibulum massa porta a. Pellentesque eget erat a felis euismod feugiat non vitae turpis\\footnote{Vivamus fermentum libero id massa scelerisque porta. Nam et mi leo. Suspendisse potenti. Integer placerat ipsum vel dolor lacinia et eleifend turpis scelerisque. Aenean vel eros odio.}. Quisque hendrerit ante tristique mauris tempor rutrum. Vestibulum malesuada eleifend dolor quis tristique. Nullam id elit sed neque commodo pharetra ut nec velit."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.core.display import publish_html"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 1
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"publish_html('<scrip src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></scrip>')"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script>"
],
"output_type": "display_data"
}
],
"prompt_number": 7
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"I am doing it with setInterval, mostly because I din't care to find out how to detect if a cell was rendered or not."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"def setInterval(js, time):\n",
" publish_html('''<script>\n",
" window.setInterval(function(){{\n",
" {0}\n",
" }}, {1});\n",
" </script>\n",
" '''.format(js, time))"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 2
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"css='''\n",
".text_cell, .code_cell, .text_cell_render{\n",
" max-width:810px;\n",
"}\n",
".text_cell_render\n",
"{\n",
" position:relative!important;\n",
"}\n",
"aside\n",
"{\n",
" background:rgba(255,255,80,0.4);\n",
" border:1px solid rgba(255,210,80,0.8);\n",
" border-radius:4px;\n",
" border-top:5px;\n",
" display:block;\n",
" font-size:.85em;\n",
" left:845px;\n",
" padding:1em;\n",
" position:absolute;\n",
" top:0px;\n",
" text-align:left;\n",
" width:150px;\n",
" z-index:5;\n",
" -moz-box-shadow: 2px 2px 5px #CCC;\n",
" -webkit-box-shadow: 2px 2px 5px #CCC;\n",
" box-shadow: 2px 2px 5px #CCC;\n",
"}\n",
".footnote\n",
"{\n",
" color:red;\n",
" font-size:.7em;\n",
" position:relative;\n",
" top:-.7em;\n",
" text-transform: uppercase;\n",
"}\n",
"\n",
".footnote.big\n",
"{\n",
" font-size:1em;\n",
" top:0;\n",
" text-transform: uppercase;\n",
"}\n",
"'''\n",
"publish_html('<style>'+css+'</style>')"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<style>\n",
".text_cell, .code_cell, .text_cell_render{\n",
" max-width:810px;\n",
"}\n",
".text_cell_render\n",
"{\n",
" position:relative!important;\n",
"}\n",
"aside\n",
"{\n",
" background:rgba(255,255,80,0.4);\n",
" border:1px solid rgba(255,210,80,0.8);\n",
" border-radius:4px;\n",
" border-top:5px;\n",
" display:block;\n",
" font-size:.85em;\n",
" left:845px;\n",
" padding:1em;\n",
" position:absolute;\n",
" top:0px;\n",
" text-align:left;\n",
" width:150px;\n",
" z-index:5;\n",
" -moz-box-shadow: 2px 2px 5px #CCC;\n",
" -webkit-box-shadow: 2px 2px 5px #CCC;\n",
" box-shadow: 2px 2px 5px #CCC;\n",
"}\n",
".footnote\n",
"{\n",
" color:red;\n",
" font-size:.7em;\n",
" position:relative;\n",
" top:-.7em;\n",
" text-transform: uppercase;\n",
"}\n",
"\n",
".footnote.big\n",
"{\n",
" font-size:1em;\n",
" top:0;\n",
" text-transform: uppercase;\n",
"}\n",
"</style>"
],
"output_type": "display_data"
}
],
"prompt_number": 8
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This is the base js for extracting footnotes, a similar function can be easily constructed for arbitrary \\tag{}\\footnote{I use similar functions to in my own [work](http://i46.tinypic.com/163qyg.png)} and apply any styling to it. \n",
"\n",
"Moreover, this can be easily extended to cater for \\cite{} as well if the notebook publishes a bibliography object."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"js='''\n",
"var jCounter=0;\n",
"$('.text_cell_render p, .text_cell_render li').each(function(){\n",
" var x=$(this).html().match(/[\\s]*\\\\\\\\footnote\\{(.|[\\s-]|<[\\/][\\w]*>)*?\\}/gi);\n",
" if( x!=null ){ \n",
" \n",
" for(var i=0; i<x.length; ++i){\n",
" try{\n",
" ++jCounter;\n",
" $(this).html($(this).html().replace(x[i],'<span class=\"footnote\">'\n",
" +jCounter\n",
" +'</span><aside><span class=\"footnote big\">'\n",
" +jCounter\n",
" +'</span>'\n",
" +' '\n",
" +x[i].substring(10+x[i].length-$.trim(x[i]).length, x[i].length-1)\n",
" +'</aside>'));\n",
" }\n",
" catch(err){\n",
" continue;\n",
" }\n",
" \n",
" }\n",
" } \n",
"});\n",
"'''"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 17
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"#This I found somewhere on the Internet and I think I changed some little things\n",
"jsOffsets='''\n",
"try{\n",
" var orgOffset=[]\n",
" var elements=[]\n",
" var offsets=[]\n",
" $('aside').each(function(){\n",
" orgOffset.push($(this).css('top'));\n",
" });\n",
" $('aside').css('top',0)\n",
" window.lastOffset=$('aside').first().offset()['top'];\n",
" $('aside').each(function(i){\n",
" curOffset=$(this).offset()['top'];\n",
" shiftOffset=0;\n",
" while( curOffset+shiftOffset<window.lastOffset + 5){\n",
" ++shiftOffset;\n",
" }\n",
" \n",
" window.lastOffset=curOffset+shiftOffset+$(this).outerHeight();\n",
" elements.push($(this));\n",
" offsets.push(shiftOffset);\n",
" $(this).css('top', orgOffset[i]);\n",
" });\n",
" for(i=0; i<offsets.length; i++){\n",
" if( offsets[i]!=orgOffset[i]){\n",
" elements[i].animate(\n",
" {\n",
" top: offsets[i]\n",
" },\n",
" 'slow');\n",
" }\n",
" }\n",
"}\n",
"catch(err){\n",
" console.log(err);\n",
"}\n",
"'''"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 18
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"setInterval(js+jsOffsets, 10000)"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<script>\n",
" window.setInterval(function(){\n",
" \n",
"var jCounter=0;\n",
"$('.text_cell_render p, .text_cell_render li').each(function(){\n",
" var x=$(this).html().match(/[\\s]*\\\\footnote\\{(.|[\\s-]|<[\\/][\\w]*>)*?\\}/gi);\n",
" if( x!=null ){ \n",
" \n",
" for(var i=0; i<x.length; ++i){\n",
" try{\n",
" ++jCounter;\n",
" $(this).html($(this).html().replace(x[i],'<span class=\"footnote\">'\n",
" +jCounter\n",
" +'</span><aside><span class=\"footnote big\">'\n",
" +jCounter\n",
" +'</span>'\n",
" +' '\n",
" +x[i].substring(10+x[i].length-$.trim(x[i]).length, x[i].length-1)\n",
" +'</aside>'));\n",
" }\n",
" catch(err){\n",
" continue;\n",
" }\n",
" \n",
" }\n",
" } \n",
"});\n",
"\n",
"try{\n",
" var orgOffset=[]\n",
" var elements=[]\n",
" var offsets=[]\n",
" $('aside').each(function(){\n",
" orgOffset.push($(this).css('top'));\n",
" });\n",
" $('aside').css('top',0)\n",
" window.lastOffset=$('aside').first().offset()['top'];\n",
" $('aside').each(function(i){\n",
" curOffset=$(this).offset()['top'];\n",
" shiftOffset=0;\n",
" while( curOffset+shiftOffset<window.lastOffset + 5){\n",
" ++shiftOffset;\n",
" }\n",
" \n",
" window.lastOffset=curOffset+shiftOffset+$(this).outerHeight();\n",
" elements.push($(this));\n",
" offsets.push(shiftOffset);\n",
" $(this).css('top', orgOffset[i]);\n",
" });\n",
" for(i=0; i<offsets.length; i++){\n",
" if( offsets[i]!=orgOffset[i]){\n",
" elements[i].animate(\n",
" {\n",
" top: offsets[i]\n",
" },\n",
" 'slow');\n",
" }\n",
" }\n",
"}\n",
"catch(err){\n",
" console.log(err);\n",
"}\n",
"\n",
" }, 10000);\n",
" </script>\n",
" "
],
"output_type": "display_data"
}
],
"prompt_number": 19
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can also use it to autosave the notebook..."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"autosaveJs='''\n",
"IPython.notebook.save_notebook();\n",
"'''\n",
"setInterval(autosaveJs, 10000)"
],
"language": "python",
"metadata": {},
"outputs": []
}
],
"metadata": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment