about-literate.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Literate Programming\n",
    "\n",
    "The _Literacy_ package was designed to move data from the PyData ecosystem into interactive client side applications.  \n",
    "This library was specifically designed for the Jupyter notebooks.  The notebooks provide an interface for\n",
    "~50 kernels <font color=\"#ee0000\"><b>[50 kernels? Needs more detail]</b></font> that are tightly bound to client-side javascript and html.  \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from literacy import Literate\n",
    "Literate(namespace='library');"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Basic syntax\n",
    "\n",
    "`%%literate [<cell_tag>]`\n",
    "\n",
    "placed at the top of the cell. The optional `<cell_tag>` name allows cross-referencing to these cells from other cells.\n",
    "\n",
    "# Reasons to use literate cells..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "        \n",
       "        <h2>Reason 1: <code>%%literate</code> can mix code between languages, including markdown, in one cell</h2><p>According to Knuth's idea, indented code blocks are treated by default as Python.</p><hr>\n",
       "        \n",
       "        \n",
       "        \n",
       "        <hr><pre><code>this_is_a_variable = {'foo':'bar','baz':'club'}</code></pre><hr>\n",
       "        \n",
       "        \n",
       "\n",
       "        \n",
       "        <h6>javascript</h6><hr>\n",
       "        \n",
       "        \n",
       "        \n",
       "        <hr><pre><code>console.log(\"js executes javascript\")</code></pre><hr>\n",
       "        <script>console.log(\"js executes javascript\")</script>\n",
       "        \n",
       "\n",
       "        \n",
       "        <h6>css</h6><hr>\n",
       "        \n",
       "        \n",
       "        <style>h6 {\n",
       "    color: blue;\n",
       "}</style>\n",
       "        <hr><pre><code>h6 {\n",
       "    color: blue;\n",
       "}</code></pre><hr>\n",
       "        \n",
       "        \n",
       "\n",
       "        \n",
       "        <h6>html</h6><p>Some sweet bootstrap.</p><hr>\n",
       "        \n",
       "        \n",
       "        \n",
       "        <hr><pre><code><div class=\"list-group\">\n",
       "  <a href=\"#\" class=\"list-group-item active\">\n",
       "    Cras justo odio\n",
       "  </a>\n",
       "  <a href=\"#\" class=\"list-group-item\">Dapibus ac facilisis in</a>\n",
       "  <a href=\"#\" class=\"list-group-item\">Morbi leo risus</a>\n",
       "  <a href=\"#\" class=\"list-group-item\">Porta ac consectetur ac</a>\n",
       "  <a href=\"#\" class=\"list-group-item\">Vestibulum at eros</a>\n",
       "</div></code></pre><hr>\n",
       "        \n",
       "        "
      ],
      "text/plain": [
       "<literacy.cell.StaticCell object>"
      ]
     },
     "execution_count": 30,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%literate literate_is_markdown\n",
    "\n",
    "## Reason 1: `%%literate` can mix code between languages, including markdown, in one cell\n",
    "\n",
    "According to Knuth's idea, indented code blocks are treated by default as Python.\n",
    "\n",
    "    this_is_a_variable = {'foo':'bar','baz':'club'}\n",
    "    \n",
    "###### javascript\n",
    "\n",
    "```js\n",
    "console.log(\"js executes javascript\")\n",
    "```\n",
    "\n",
    "###### css\n",
    "\n",
    "```css\n",
    "h6 {\n",
    "    color: blue;\n",
    "}\n",
    "```\n",
    "\n",
    "###### html\n",
    "\n",
    "Some sweet bootstrap.\n",
    "\n",
    "```html\n",
    "<div class=\"list-group\">\n",
    "  <a href=\"#\" class=\"list-group-item active\">\n",
    "    Cras justo odio\n",
    "  </a>\n",
    "  <a href=\"#\" class=\"list-group-item\">Dapibus ac facilisis in</a>\n",
    "  <a href=\"#\" class=\"list-group-item\">Morbi leo risus</a>\n",
    "  <a href=\"#\" class=\"list-group-item\">Porta ac consectetur ac</a>\n",
    "  <a href=\"#\" class=\"list-group-item\">Vestibulum at eros</a>\n",
    "</div>\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "        \n",
       "        <h1>Reason 2: Place and interact with data dynamically within literate cells</h1><p>Earlier, <code>this_is_a_variable</code> was defined and it has the keys <code>['foo', 'baz']</code> with the values\n",
       "<code>['bar', 'club']</code>, respectively.</p><h2>Markdown and Code are executed in serial.</h2><p>Again, indented code is executed.</p><hr>\n",
       "        \n",
       "        \n",
       "        \n",
       "        <hr><pre><code>import numpy as np\n",
       "arr = np.random.randn(10,)</code></pre><hr>\n",
       "        \n",
       "        \n",
       "\n",
       "        \n",
       "        <p>The array has we just defined has a length 10 and an average of 0.531423113536.</p><hr>\n",
       "        \n",
       "        "
      ],
      "text/plain": [
       "<literacy.cell.StaticCell object>"
      ]
     },
     "execution_count": 31,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%literate literate_is_jinja\n",
    "# Reason 2: Place and interact with data dynamically within literate cells\n",
    "\n",
    "Earlier, `this_is_a_variable` was defined and it has the keys `{{list(this_is_a_variable.keys())}}` with the values\n",
    "`{{list(this_is_a_variable.values())}}`, respectively.\n",
    "\n",
    "## Markdown and Code are executed in serial.\n",
    "\n",
    "Again, indented code is executed.\n",
    "\n",
    "    import numpy as np\n",
    "    arr = np.random.randn(10,)\n",
    "    \n",
    "The array has we just defined has a length {{len(arr)}} and an average of {{arr.mean()}}."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Other information"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "        \n",
       "        <blockquote><p><code>Literate()</code> is %magic%.</p>\n",
       "</blockquote><p>There is no cell magic for Markdown because it is renderer by the browser.  All literate cells\n",
       "are effectively Markdown magic.</p><h2><code>%%literate</code> is Markdown</h2><p>The contents of a <code>%%literate</code> cell magic is markdown, even though it is written and executed in a Jupyter Code cell.\n",
       "The cell accepts any markdown syntaxes like lists</p><ul>\n",
       "<li>Item 1</li>\n",
       "<li>Item 2</li>\n",
       "</ul><p>or tables</p><table>\n",
       "<thead><tr>\n",
       "<th>id</th>\n",
       "<th>val</th>\n",
       "</tr>\n",
       "</thead>\n",
       "<tbody>\n",
       "<tr>\n",
       "<td>1</td>\n",
       "<td>10</td>\n",
       "</tr>\n",
       "<tr>\n",
       "<td>2</td>\n",
       "<td>27</td>\n",
       "</tr>\n",
       "</tbody>\n",
       "</table><hr>\n",
       "        \n",
       "        "
      ],
      "text/plain": [
       "<literacy.cell.StaticCell object>"
      ]
     },
     "execution_count": 28,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%literate literate_is_markdown\n",
    "\n",
    "> `Literate()` is %magic%. \n",
    "\n",
    "There is no cell magic for Markdown because it is renderer by the browser.  All literate cells\n",
    "are effectively Markdown magic.\n",
    "\n",
    "## `%%literate` is Markdown \n",
    "\n",
    "The contents of a `%%literate` cell magic is markdown, even though it is written and executed in a Jupyter Code cell.\n",
    "The cell accepts any markdown syntaxes like lists\n",
    "\n",
    "* Item 1\n",
    "* Item 2\n",
    "\n",
    "or tables\n",
    "\n",
    "|id|val|\n",
    "|--|---|\n",
    "|1 | 10|\n",
    "|2 | 27|"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# `%%literate` is hackable!\n",
    "\n",
    "<font color=\"#ee0000\"><b>[Needs examples filled out a bit, and then could be Reason #3]</b></font>\n",
    "\n",
    "* Default Language\n",
    "* Filename\n",
    "    * Saving Files\n",
    "* New Languages"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       "div.input, div.output_stderr {\n",
       "    display: none;\n",
       "}\n",
       "</style>\n",
       "<div style=\"bottom:20px;right:20px;position:fixed;opacity:.8;\" class=\"btn btn-lg btn-warning hide-input\">Toggle Inputs</div>\n",
       "<script>\n",
       "$('.hide-input').click( function(){\n",
       "    $('div.input,div.output_stderr').toggle()\n",
       "});\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<style>\n",
    "div.input, div.output_stderr {\n",
    "    display: none;\n",
    "}\n",
    "</style>\n",
    "<div style=\"bottom:20px;right:20px;position:fixed;opacity:.8;\" class=\"btn btn-lg btn-warning hide-input\">Toggle Inputs</div>\n",
    "<script>\n",
    "$('.hide-input').click( function(){\n",
    "    $('div.input,div.output_stderr').toggle()\n",
    "});\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.5"
  },
  "widgets": {
   "state": {},
   "version": "1.0.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}