{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "**WARNING: This document will not render correctly using nbviewer or nbconvert. To render this notebook correctly, open in `IPython Notebook` and run `Cell->Run All` from the menu bar.**" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# Introduction" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The IPython Notebook allows Markdown, HTML, and inline LaTeX in *Mardown Cells*. The inline LaTeX is parsed with [MathJax](http://www.mathjax.org/) and Markdown is parsed with [marked](https://github.com/chjj/marked). Any inline HTML is left to the web browser to parse. NBConvert is a utility that allows users to easily convert their notebooks to various formats. Pandoc is used to parse markdown text in NBConvert. Since what the notebook web interface supports is a mix of Markdown, HTML, and LaTeX, Pandoc has trouble converting notebook markdown. This results in incomplete representations of the notebook in nbviewer or a compiled Latex PDF.\n", "\n", "This isn't a Pandoc flaw; Pandoc isn't designed to parse and convert a mixed format document. Unfortunately, this means that Pandoc can only support a subset of the markup supported in the notebook web interface. This notebook compares output of Pandoc to the notebook web interface.\n", "\n", "**Changes:**\n", "\n", "05102013\n", "\n", " * heading anchors\n", " * note on remote images\n", "\n", "06102013\n", "\n", " * remove strip_math_space filter\n", " * add lxml test\n", " \n", "<style>\n", " .rendered_html xmp { \n", " white-space: pre-wrap;\n", " }\n", "</style>" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Utilities" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Define functions to render Markdown using the notebook and Pandoc." ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": false }, "outputs": [], "source": [ "from IPython.nbconvert.utils.pandoc import pandoc\n", "from IPython.display import HTML, Javascript, display\n", "\n", "from IPython.nbconvert.filters import citation2latex, strip_files_prefix, \\\n", " markdown2html, markdown2latex\n", "\n", "def pandoc_render(markdown):\n", " \"\"\"Render Pandoc Markdown->LaTeX content.\"\"\"\n", " \n", " ## Convert the markdown directly to latex. This is what nbconvert does.\n", " #latex = pandoc(markdown, \"markdown\", \"latex\")\n", " #html = pandoc(markdown, \"markdown\", \"html\", [\"--mathjax\"])\n", " \n", " # nbconvert template conversions\n", " html = strip_files_prefix(markdown2html(markdown))\n", " latex = markdown2latex(citation2latex(markdown))\n", " display(HTML(data=\"<div style='display: inline-block; width: 30%; vertical-align: top;'>\" \\\n", " \"<div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div>\" \\\n", " \"<pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\" + latex + \"</xmp></pre>\"\\\n", " \"</div>\" \\\n", " \"<div style='display: inline-block; width: 2%;'></div>\" \\\n", " \"<div style='display: inline-block; width: 30%; vertical-align: top;'>\" \\\n", " \"<div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div>\" \\\n", " \"<div style='display: inline-block; width: 100%;'>\" + html + \"</div>\" \\\n", " \"</div>\"))\n", " javascript = \"\"\"\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n", "\"\"\"\n", " display(Javascript(data=javascript))\n", "\n", "def notebook_render(markdown):\n", " javascript = \"\"\"\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\"\"\" + markdown.replace(\"\\\\\", \"\\\\\\\\\").replace(\"'\", \"\\'\").replace(\"\\n\", \"\\\\n\") + \"\"\"');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n", "\"\"\"\n", " display(Javascript(data=javascript))\n", "\n", " \n", "def pandoc_html_render(markdown):\n", " \"\"\"Render Pandoc Markdown->LaTeX content.\"\"\"\n", " \n", " # Convert the markdown directly to latex. This is what nbconvert does.\n", " latex = pandoc(markdown, \"markdown\", \"latex\")\n", " \n", " # Convert the pandoc generated latex to HTML so it can be rendered in \n", " # the web browser.\n", " html = pandoc(latex, \"latex\", \"html\", [\"--mathjax\"])\n", " display(HTML(data=\"<div style='background: #AAFFAA; width: 40%;'>HTML Pandoc Output</div>\" \\\n", " \"<div style='display: inline-block; width: 40%;'>\" + html + \"</div>\"))\n", " return html\n", " \n", "def compare_render(markdown):\n", " notebook_render(markdown)\n", " pandoc_render(markdown)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# Outputs" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": false }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "LXML found!\n" ] } ], "source": [ "try:\n", " import lxml\n", " print 'LXML found!'\n", "except:\n", " print 'Warning! No LXML found - the old citation2latex filter will not work'" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## General markdown" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Heading level 6 is not supported by Pandoc." ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n\\n# Heading 1 \\n## Heading 2 \\n### Heading 3 \\n#### Heading 4 \\n##### Heading 5 \\n###### Heading 6');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac2d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\section{Heading 1}\n", "\n", "\\subsection{Heading 2}\n", "\n", "\\subsubsection{Heading 3}\n", "\n", "\\paragraph{Heading 4}\n", "\n", "\\subparagraph{Heading 5}\n", "\n", "Heading 6</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><h1 id=\"heading-1\">Heading 1</h1>\n", "<h2 id=\"heading-2\">Heading 2</h2>\n", "<h3 id=\"heading-3\">Heading 3</h3>\n", "<h4 id=\"heading-4\">Heading 4</h4>\n", "<h5 id=\"heading-5\">Heading 5</h5>\n", "<h6 id=\"heading-6\">Heading 6</h6></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21b9fd0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21b9fd0>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "\n", "# Heading 1 \n", "## Heading 2 \n", "### Heading 3 \n", "#### Heading 4 \n", "##### Heading 5 \n", "###### Heading 6\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Headers aren't recognized by (Pandoc on Windows?) if there isn't a blank line above the headers." ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n# Heading 1 \\n## Heading 2 \\n### Heading 3 \\n#### Heading 4 \\n##### Heading 5 \\n###### Heading 6 ');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac550>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\section{Heading 1}\n", "\n", "\\subsection{Heading 2}\n", "\n", "\\subsubsection{Heading 3}\n", "\n", "\\paragraph{Heading 4}\n", "\n", "\\subparagraph{Heading 5}\n", "\n", "Heading 6</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><h1 id=\"heading-1\">Heading 1</h1>\n", "<h2 id=\"heading-2\">Heading 2</h2>\n", "<h3 id=\"heading-3\">Heading 3</h3>\n", "<h4 id=\"heading-4\">Heading 4</h4>\n", "<h5 id=\"heading-5\">Heading 5</h5>\n", "<h6 id=\"heading-6\">Heading 6</h6></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac550>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac550>" ] }, "metadata": {}, "output_type": "display_data" }, { "name": "stdout", "output_type": "stream", "text": [ "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n" ] } ], "source": [ "compare_render(r\"\"\"\n", "# Heading 1 \n", "## Heading 2 \n", "### Heading 3 \n", "#### Heading 4 \n", "##### Heading 5 \n", "###### Heading 6 \"\"\")\n", "\n", "print(\"\\n\"*10)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If internal links are defined, these will not work in nbviewer and latex as the local link is not existing." ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n[Link2Heading](http://127.0.0.1:8888/0a2d8086-ee24-4e5b-a32b-f66b525836cb#General-markdown)\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\href{http://127.0.0.1:8888/0a2d8086-ee24-4e5b-a32b-f66b525836cb\\#General-markdown}{Link2Heading}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p><a href=\"http://127.0.0.1:8888/0a2d8086-ee24-4e5b-a32b-f66b525836cb#General-markdown\">Link2Heading</a></p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "[Link2Heading](http://127.0.0.1:8888/0a2d8086-ee24-4e5b-a32b-f66b525836cb#General-markdown)\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Basic Markdown bold and italic works." ] }, { "cell_type": "code", "execution_count": 5, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nThis is Markdown **bold** and *italic* text.\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>This is Markdown \\textbf{bold} and \\emph{italic} text.</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>This is Markdown <strong>bold</strong> and <em>italic</em> text.</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "This is Markdown **bold** and *italic* text.\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Nested lists work as well" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n- li 1\\n- li 2\\n 1. li 3\\n 1. li 4\\n- li 5\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\begin{itemize}\n", "\\itemsep1pt\\parskip0pt\\parsep0pt\n", "\\item\n", " li 1\n", "\\item\n", " li 2\n", "\n", " \\begin{enumerate}\n", " \\def\\labelenumi{\\arabic{enumi}.}\n", " \\itemsep1pt\\parskip0pt\\parsep0pt\n", " \\item\n", " li 3\n", " \\item\n", " li 4\n", " \\end{enumerate}\n", "\\item\n", " li 5\n", "\\end{itemize}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><ul>\n", "<li>li 1</li>\n", "<li>li 2\n", "<ol style=\"list-style-type: decimal\">\n", "<li>li 3</li>\n", "<li>li 4</li>\n", "</ol></li>\n", "<li>li 5</li>\n", "</ul></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "- li 1\n", "- li 2\n", " 1. li 3\n", " 1. li 4\n", "- li 5\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Unicode support" ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nüberschuß +***^°³³ α β θ\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b6950>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>überschuß +\\emph{*}\\^{}°³³ α β θ</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>überschuß +<em>*</em>^°³³ α β θ</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac3d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac3d0>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(ur\"\"\"\n", "überschuß +***^°³³ α β θ\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Pandoc may produce invalid latex, e.g \\sout is not allowed in headings" ] }, { "cell_type": "code", "execution_count": 8, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n\\n# Heading 1 ~~strikeout~~\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\section{Heading 1 \\sout{strikeout}}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><h1 id=\"heading-1-strikeout\">Heading 1 <del>strikeout</del></h1></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "\n", "# Heading 1 ~~strikeout~~\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Horizontal lines work just fine" ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nabove\\n\\n--------\\n\\nbelow\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>above\n", "\n", "\\begin{center}\\rule{3in}{0.4pt}\\end{center}\n", "\n", "below</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>above</p>\n", "<hr />\n", "<p>below</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "above\n", "\n", "--------\n", "\n", "below\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Extended markdown of pandoc" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "(maybe we should deactivate this) " ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nThis is Markdown ~subscript~ and ^superscript^ text.\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>This is Markdown \\textsubscript{subscript} and\n", "\\textsuperscript{superscript} text.</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>This is Markdown <sub>subscript</sub> and <sup>superscript</sup> text.</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "This is Markdown ~subscript~ and ^superscript^ text.\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "No space before underline behaves inconsistent (Pandoc extension: intraword_underscores - deactivate?)" ] }, { "cell_type": "code", "execution_count": 11, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nThis is Markdown not_italic_.\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>This is Markdown not\\_italic\\_.</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>This is Markdown not_italic_.</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "This is Markdown not_italic_.\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Pandoc allows to define tex macros which are respected for all output formats, the notebook not. " ] }, { "cell_type": "code", "execution_count": 12, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n\\\\newcommand{\\\\tuple}[1]{\\\\langle #1 \\\\rangle}\\n\\n$\\\\tuple{a, b, c}$\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\newcommand{\\tuple}[1]{\\langle #1 \\rangle}\n", "\n", "$\\tuple{a, b, c}$</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p><span class=\"math\">\\(\\langle a, b, c \\rangle\\)</span></p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "\\newcommand{\\tuple}[1]{\\langle #1 \\rangle}\n", "\n", "$\\tuple{a, b, c}$\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "When placing the \\newcommand inside a math environment it works within the notebook and nbviewer, but produces invalid latex (the newcommand is only valid in the same math environment)." ] }, { "cell_type": "code", "execution_count": 13, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n$\\\\newcommand{\\\\foo}[1]{...:: #1 ::...}$\\n$\\\\foo{bar}$\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>$\\newcommand{\\foo}[1]{...:: #1 ::...}$ $\\foo{bar}$</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p><span class=\"math\">\\(\\newcommand{\\foo}[1]{...:: #1 ::...}\\)</span> <span class=\"math\">\\(\\foo{bar}\\)</span></p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "$\\newcommand{\\foo}[1]{...:: #1 ::...}$\n", "$\\foo{bar}$\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## HTML or LaTeX injections" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Raw HTML gets dropped entirely when converting to $\\LaTeX$." ] }, { "cell_type": "code", "execution_count": 14, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nThis is HTML <b>bold</b> and <i>italic</i> text.\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>This is HTML bold and italic text.</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>This is HTML <b>bold</b> and <i>italic</i> text.</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "This is HTML <b>bold</b> and <i>italic</i> text.\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Same for something like center" ] }, { "cell_type": "code", "execution_count": 15, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n<center>Center aligned</center>\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>Center aligned</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><center>\n", "Center aligned\n", "</center></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "<center>Center aligned</center>\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Raw $\\LaTeX$ gets droppen entirely when converted to HTML. (I don't know why the HTML output is cropped here???)" ] }, { "cell_type": "code", "execution_count": 16, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nThis is \\\\LaTeX \\\\bf{bold} and \\\\emph{italic} text.\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>This is \\LaTeX \\bf{bold} and \\emph{italic} text.</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>This is </p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "This is \\LaTeX \\bf{bold} and \\emph{italic} text.\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "A combination of raw $\\LaTeX$ and raw HTML" ] }, { "cell_type": "code", "execution_count": 17, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n**foo** $\\\\left( \\\\sum_{k=1}^n a_k b_k \\\\right)^2 \\\\leq$ <b>b\\\\$ar</b> $$test$$ \\n\\\\cite{}\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\textbf{foo} $\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq$ b\\$ar \\[test\\]\n", "\\cite{}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p><strong>foo</strong> <span class=\"math\">\\(\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq\\)</span> <b>b$ar</b> <span class=\"math\">\\[test\\]</span> </p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac590>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "**foo** $\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq$ <b>b\\$ar</b> $$test$$ \n", "\\cite{}\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Tables" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "HTML tables render in the notebook, but not in Pandoc." ] }, { "cell_type": "code", "execution_count": 18, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n<table>\\n <tr>\\n <td>a</td>\\n <td>b</td>\\n </tr>\\n <tr>\\n <td>c</td>\\n <td>d</td>\\n </tr>\\n</table>\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>a\n", "\n", "b\n", "\n", "c\n", "\n", "d</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><table>\n", " <tr>\n", " <td>\n", "a\n", "</td>\n", " <td>\n", "b\n", "</td>\n", " </tr>\n", " <tr>\n", " <td>\n", "c\n", "</td>\n", " <td>\n", "d\n", "</td>\n", " </tr>\n", "</table></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac5d0>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "<table>\n", " <tr>\n", " <td>a</td>\n", " <td>b</td>\n", " </tr>\n", " <tr>\n", " <td>c</td>\n", " <td>d</td>\n", " </tr>\n", "</table>\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Instead, Pandoc supports simple ascii tables. Unfortunately marked.js doesn't support this, and therefore it is not supported in the notebook." ] }, { "cell_type": "code", "execution_count": 19, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n+---+---+\\n| a | b |\\n+---+---+\\n| c | d |\\n+---+---+\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\begin{longtable}[c]{@{}ll@{}}\n", "\\hline\\noalign{\\medskip}\n", "\\begin{minipage}[t]{0.06\\columnwidth}\\raggedright\n", "a\n", "\\end{minipage} & \\begin{minipage}[t]{0.06\\columnwidth}\\raggedright\n", "b\n", "\\end{minipage}\n", "\\\\\\noalign{\\medskip}\n", "\\begin{minipage}[t]{0.06\\columnwidth}\\raggedright\n", "c\n", "\\end{minipage} & \\begin{minipage}[t]{0.06\\columnwidth}\\raggedright\n", "d\n", "\\end{minipage}\n", "\\\\\\noalign{\\medskip}\n", "\\hline\n", "\\end{longtable}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><table>\n", "<col width=\"5%\" />\n", "<col width=\"5%\" />\n", "<tbody>\n", "<tr class=\"odd\">\n", "<td align=\"left\"><p>a</p></td>\n", "<td align=\"left\"><p>b</p></td>\n", "</tr>\n", "<tr class=\"even\">\n", "<td align=\"left\"><p>c</p></td>\n", "<td align=\"left\"><p>d</p></td>\n", "</tr>\n", "</tbody>\n", "</table></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac210>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "+---+---+\n", "| a | b |\n", "+---+---+\n", "| c | d |\n", "+---+---+\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "An alternative to basic ascii tables is pipe tables. Pipe tables can be recognized by Pandoc and are supported by marked, hence, this is the **best way to add tables**." ] }, { "cell_type": "code", "execution_count": 20, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n|Left |Center |Right|\\n|:----|:-----:|----:|\\n|Text1|Text2 |Text3|\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\begin{longtable}[c]{@{}lcr@{}}\n", "\\hline\\noalign{\\medskip}\n", "Left & Center & Right\n", "\\\\\\noalign{\\medskip}\n", "\\hline\\noalign{\\medskip}\n", "Text1 & Text2 & Text3\n", "\\\\\\noalign{\\medskip}\n", "\\hline\n", "\\end{longtable}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><table>\n", "<thead>\n", "<tr class=\"header\">\n", "<th align=\"left\">Left</th>\n", "<th align=\"center\">Center</th>\n", "<th align=\"right\">Right</th>\n", "</tr>\n", "</thead>\n", "<tbody>\n", "<tr class=\"odd\">\n", "<td align=\"left\">Text1</td>\n", "<td align=\"center\">Text2</td>\n", "<td align=\"right\">Text3</td>\n", "</tr>\n", "</tbody>\n", "</table></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac150>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "|Left |Center |Right|\n", "|:----|:-----:|----:|\n", "|Text1|Text2 |Text3|\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Pandoc recognizes cell alignment in simple tables. Since marked.js doesn't recognize ascii tables, it can't render this table." ] }, { "cell_type": "code", "execution_count": 21, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nRight Aligned Center Aligned Left Aligned\\n------------- -------------- ------------\\n Why does this\\n actually work? Who\\n knows ...\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\begin{longtable}[c]{@{}lll@{}}\n", "\\hline\\noalign{\\medskip}\n", "Right Aligned & Center Aligned & Left Aligned\n", "\\\\\\noalign{\\medskip}\n", "\\hline\\noalign{\\medskip}\n", "Why & does & this\n", "\\\\\\noalign{\\medskip}\n", "actually & work? & Who\n", "\\\\\\noalign{\\medskip}\n", "knows & \\ldots{} &\n", "\\\\\\noalign{\\medskip}\n", "\\hline\n", "\\end{longtable}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><table>\n", "<thead>\n", "<tr class=\"header\">\n", "<th align=\"left\">Right Aligned</th>\n", "<th align=\"left\">Center Aligned</th>\n", "<th align=\"left\">Left Aligned</th>\n", "</tr>\n", "</thead>\n", "<tbody>\n", "<tr class=\"odd\">\n", "<td align=\"left\">Why</td>\n", "<td align=\"left\">does</td>\n", "<td align=\"left\">this</td>\n", "</tr>\n", "<tr class=\"even\">\n", "<td align=\"left\">actually</td>\n", "<td align=\"left\">work?</td>\n", "<td align=\"left\">Who</td>\n", "</tr>\n", "<tr class=\"odd\">\n", "<td align=\"left\">knows</td>\n", "<td align=\"left\">...</td>\n", "<td align=\"left\"></td>\n", "</tr>\n", "</tbody>\n", "</table></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "name": "stdout", "output_type": "stream", "text": [ "\n", "\n", "\n", "\n", "\n", "\n" ] } ], "source": [ "compare_render(r\"\"\"\n", "Right Aligned Center Aligned Left Aligned\n", "------------- -------------- ------------\n", " Why does this\n", " actually work? Who\n", " knows ...\n", "\"\"\")\n", "\n", "print(\"\\n\"*5)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Images" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Markdown images work on both. However, remote images are not allowed in $\\LaTeX$. Maybe add a preprocessor to download these.\n", "The alternate text is displayed in nbviewer next to the image." ] }, { "cell_type": "code", "execution_count": 22, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n![Alternate Text](http://ipython.org/_static/IPy_header.png)\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b6690>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\begin{figure}[htbp]\n", "\\centering\n", "\\includegraphics{http://ipython.org/_static/IPy_header.png}\n", "\\caption{Alternate Text}\n", "\\end{figure}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><div class=\"figure\">\n", "<img src=\"http://ipython.org/_static/IPy_header.png\" alt=\"Alternate Text\" /><p class=\"caption\">Alternate Text</p>\n", "</div></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "![Alternate Text](http://ipython.org/_static/IPy_header.png)\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "HTML Images only work in the notebook." ] }, { "cell_type": "code", "execution_count": 23, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n<img src=\"http://ipython.org/_static/IPy_header.png\">\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b65d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp></xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p><img src=\"http://ipython.org/_static/IPy_header.png\"></p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "<img src=\"http://ipython.org/_static/IPy_header.png\">\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Math" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Simple inline and displaystyle maths work fine" ] }, { "cell_type": "code", "execution_count": 24, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nMy equation:\\n$$ 5/x=2y $$\\n\\nIt is inline $ 5/x=2y $ here.\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b6950>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>My equation: \\[ 5/x=2y \\]\n", "\n", "It is inline \\$ 5/x=2y \\$ here.</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>My equation: <span class=\"math\">\\[ 5/x=2y \\]</span></p>\n", "<p>It is inline $ 5/x=2y $ here.</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "My equation:\n", "$$ 5/x=2y $$\n", "\n", "It is inline $ 5/x=2y $ here.\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If the first \\$ is on a new line, the equation is not captured by md2tex, if both \\$s are on a new line md2html fails (Note the raw latex is dropped) but the notebook renders it correctly." ] }, { "cell_type": "code", "execution_count": 25, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n$5 \\\\cdot x=2$\\n\\n$\\n5 \\\\cdot x=2$\\n\\n$\\n5 \\\\cdot x=2\\n$\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b66d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>$5 \\cdot x=2$\n", "\n", "\\$ 5 \\cdot x=2\\$\n", "\n", "\\$ 5 \\cdot x=2 \\$</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p><span class=\"math\">\\(5 \\cdot x=2\\)</span></p>\n", "<p>$ 5 x=2$</p>\n", "<p>$ 5 x=2 $</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "$5 \\cdot x=2$\n", "\n", "$\n", "5 \\cdot x=2$\n", "\n", "$\n", "5 \\cdot x=2\n", "$\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "MathJax permits some $\\LaTeX$ math constructs without \\$s, of course these raw $\\LaTeX$ is stripped when converting to html.\n", "Moreove, the & are escaped by the lxml parsing [#4251](https://github.com/ipython/ipython/issues/4251)." ] }, { "cell_type": "code", "execution_count": 26, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n\\\\begin{align}\\na & b\\\\\\\\\\nd & c\\n\\\\end{align}\\n\\n\\\\begin{eqnarray}\\na & b \\\\\\\\\\nc & d\\n\\\\end{eqnarray}\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b6690>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>\\begin{align}\n", "a & b\\\\\n", "d & c\n", "\\end{align}\n", "\n", "\\begin{eqnarray}\n", "a & b \\\\\n", "c & d\n", "\\end{eqnarray}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "\\begin{align}\n", "a & b\\\\\n", "d & c\n", "\\end{align}\n", "\n", "\\begin{eqnarray}\n", "a & b \\\\\n", "c & d\n", "\\end{eqnarray}\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "There is another lxml issue, [#4283](https://github.com/ipython/ipython/issues/4283)" ] }, { "cell_type": "code", "execution_count": 27, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\n1<2 is true, but 3>4 is false.\\n\\n$1<2$ is true, but $3>4$ is false.\\n\\n1<2 it is even worse if it is alone in a line.\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b6950>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>14 is false.\n", "\n", "$14$ is false.\n", "\n", "1</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>1<2 is true, but 3>4 is false.</p>\n", "<p><span class=\"math\">\\(1<2\\)</span> is true, but <span class=\"math\">\\(3>4\\)</span> is false.</p>\n", "<p>1<2 it is even worse if it is alone in a line.</p></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "1<2 is true, but 3>4 is false.\n", "\n", "$1<2$ is true, but $3>4$ is false.\n", "\n", "1<2 it is even worse if it is alone in a line.\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Listings, and Code blocks" ] }, { "cell_type": "code", "execution_count": 28, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nsome source code\\n\\n```\\na = \"test\"\\nprint(a)\\n```\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b68d0>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>some source code\n", "\n", "\\begin{verbatim}\n", "a = \"test\"\n", "print(a)\n", "\\end{verbatim}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>some source code</p>\n", "<pre><code>a = "test"\n", "print(a)</code></pre></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "some source code\n", "\n", "```\n", "a = \"test\"\n", "print(a)\n", "```\n", "\"\"\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Language specific syntax highlighting by Pandoc requires additional dependencies to render correctly." ] }, { "cell_type": "code", "execution_count": 29, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var mdcell = new IPython.MarkdownCell();\n", "mdcell.create_element();\n", "mdcell.set_text('\\nsome source code\\n\\n```python\\na = \"test\"\\nprint(a)\\n```\\n');\n", "mdcell.render();\n", "$(element).append(mdcell.element)\n", ".removeClass()\n", ".css('left', '66%')\n", ".css('position', 'absolute')\n", ".css('width', '30%')\n", "mdcell.element.prepend(\n", " $('<div />')\n", " .removeClass()\n", " .css('background', '#AAAAFF')\n", " .css('width', '100 %')\n", " .html('Notebook Output')\n", "\n", ");\n", "container.show()\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x22b6850>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "<div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #AAFFAA; width: 100%;'>NBConvert Latex Output</div><pre class='prettyprint lang-tex' style='background: #EEFFEE; border: 1px solid #DDEEDD;'><xmp>some source code\n", "\n", "\\begin{Shaded}\n", "\\begin{Highlighting}[]\n", "\\NormalTok{a = }\\StringTok{\"test\"}\n", "\\KeywordTok{print}\\NormalTok{(a)}\n", "\\end{Highlighting}\n", "\\end{Shaded}</xmp></pre></div><div style='display: inline-block; width: 2%;'></div><div style='display: inline-block; width: 30%; vertical-align: top;'><div style='background: #FFAAAA; width: 100%;'>NBViewer Output</div><div style='display: inline-block; width: 100%;'><p>some source code</p>\n", "<pre class=\"sourceCode python\"><code class=\"sourceCode python\">a = <span class=\"st\">"test"</span>\n", "<span class=\"kw\">print</span>(a)</code></pre></div></div>" ], "text/plain": [ "<IPython.core.display.HTML at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", " $.getScript(\"https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js\");\n" ], "text/plain": [ "<IPython.core.display.Javascript at 0x21ac450>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "compare_render(r\"\"\"\n", "some source code\n", "\n", "```python\n", "a = \"test\"\n", "print(a)\n", "```\n", "\"\"\")" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.4.2" } }, "nbformat": 4, "nbformat_minor": 0 }