{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Prerequisite"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "the tsumiki cell magic extension can be loaded via:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "%load_ext tsumiki"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Usage with notebook."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Write with markdown."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tsumiki\">\n",
       "  <style>\n",
       "  .tsumiki .columns1 {\n",
       "    margin-bottom: 12px;\n",
       "  }\n",
       "</style>\n",
       "<h1>Title1</h1>\n",
       "<h2>Title2</h2>\n",
       "<h3>Title3</h3>\n",
       "<ul>\n",
       "<li>list1  </li>\n",
       "<li>list2</li>\n",
       "<li><input disabled=\"disabled\" type=\"checkbox\" /> foo</li>\n",
       "<li><input checked=\"checked\" disabled=\"disabled\" type=\"checkbox\" /> bar</li>\n",
       "</ul>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%tsumiki\n",
    "\n",
    ":Markdown:\n",
    "\n",
    "# Title1\n",
    "## Title2\n",
    "### Title3\n",
    "\n",
    "- list1  \n",
    "- list2\n",
    "- [ ] foo\n",
    "- [x] bar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Write with  HTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tsumiki\">\n",
       "  <style>\n",
       "  .tsumiki .columns1 {\n",
       "    margin-bottom: 12px;\n",
       "  }\n",
       "</style>\n",
       "<font color=\"red\">Red</font>\n",
       "</br>\n",
       "<font color=\"green\">Green</font>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%tsumiki\n",
    "\n",
    ":HTML:\n",
    "<font color=\"red\">Red</font>\n",
    "</br>\n",
    "<font color=\"green\">Green</font>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Multiple columns\n",
    "\n",
    "Specify `:` as the number of columns."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tsumiki\">\n",
       "  <style>\n",
       "  .tsumiki {\n",
       "      width: 100%;\n",
       "  }\n",
       "  .tsumiki .columns2 {\n",
       "    -webkit-columns: 2;\n",
       "    -moz-columns: 2;\n",
       "    -ms-columns: 2;\n",
       "    columns: 2;\n",
       "    display: inline-flex;\n",
       "    align-items: top;\n",
       "    width: 100%;\n",
       "  }\n",
       "\n",
       "\n",
       "  .tsumiki #col0 {\n",
       "      width: calc(100% / 2);\n",
       "  }\n",
       "\n",
       "  .tsumiki #col1 {\n",
       "      width: calc(100% / 2);\n",
       "  }\n",
       "\n",
       "</style>\n",
       "<div class=\"columns2\">\n",
       "  \n",
       "    <div id=\"col1\">\n",
       "    <ul>\n",
       "<li>left1</li>\n",
       "<li>left2</li>\n",
       "</ul>\n",
       "    </div>\n",
       "  \n",
       "    <div id=\"col2\">\n",
       "    <ul>\n",
       "<li>right1</li>\n",
       "<li>right2</li>\n",
       "</ul>\n",
       "    </div>\n",
       "  \n",
       "</div> \n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%tsumiki\n",
    "\n",
    ":Markdown::\n",
    "* left1\n",
    "* left2\n",
    "\n",
    ":Markdown::\n",
    "* right1\n",
    "* right2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Write with mixed markup langueges."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tsumiki\">\n",
       "  <style>\n",
       "  .tsumiki .columns1 {\n",
       "    margin-bottom: 12px;\n",
       "  }\n",
       "</style>\n",
       "<h1>Title</h1>\n",
       "<style>\n",
       "  .tsumiki {\n",
       "      width: 100%;\n",
       "  }\n",
       "  .tsumiki .columns3 {\n",
       "    -webkit-columns: 3;\n",
       "    -moz-columns: 3;\n",
       "    -ms-columns: 3;\n",
       "    columns: 3;\n",
       "    display: inline-flex;\n",
       "    align-items: top;\n",
       "    width: 100%;\n",
       "  }\n",
       "\n",
       "\n",
       "  .tsumiki #col0 {\n",
       "      width: calc(100% / 3);\n",
       "  }\n",
       "\n",
       "  .tsumiki #col1 {\n",
       "      width: calc(100% / 3);\n",
       "  }\n",
       "\n",
       "  .tsumiki #col2 {\n",
       "      width: calc(100% / 3);\n",
       "  }\n",
       "\n",
       "</style>\n",
       "<div class=\"columns3\">\n",
       "  \n",
       "    <div id=\"col1\">\n",
       "    <p>col0</p>\n",
       "<font color=\"red\">Red</font>\n",
       "</br>\n",
       "<font color=\"green\">Green</font>\n",
       "    </div>\n",
       "  \n",
       "    <div id=\"col2\">\n",
       "    <p>col1<br />\n",
       "<em> list1<br />\n",
       "</em> list2</p>\n",
       "    </div>\n",
       "  \n",
       "    <div id=\"col3\">\n",
       "    <p>col2<br />\n",
       "<em> list1<br />\n",
       "</em> list2</p>\n",
       "    </div>\n",
       "  \n",
       "</div> \n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%tsumiki\n",
    "\n",
    ":Markdown:\n",
    "# Title\n",
    "\n",
    ":HTML:::\n",
    "<p>col0</p>\n",
    "<font color=\"red\">Red</font>\n",
    "</br>\n",
    "<font color=\"green\">Green</font>\n",
    "\n",
    ":Markdown:::\n",
    "col1\n",
    "* list1\n",
    "* list2\n",
    "\n",
    ":Markdown:::\n",
    "col2\n",
    "* list1\n",
    "* list2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Usage with Python."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "import module"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "import tsumiki"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "text = \"\"\"\n",
    ":Markdown:\n",
    "# Title\n",
    "* list1\n",
    "* list2\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<div class=\"tsumiki\">\n",
      "  <style>\n",
      "  .tsumiki .columns1 {\n",
      "    margin-bottom: 12px;\n",
      "  }\n",
      "</style>\n",
      "<h1>Title</h1>\n",
      "<ul>\n",
      "<li>list1</li>\n",
      "<li>list2</li>\n",
      "</ul>\n",
      "</div>\n"
     ]
    }
   ],
   "source": [
    "print(tsumiki.Tsumiki(text).html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "hide_input": false,
  "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.6.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}