Print Markdown in the HTML widget using Markdown library.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Print Markdown in the HTML widget using Markdown library\n",
    "\n",
    "The easiest way to pring Markdown in a Jupyter Notebook cell is using the IPython `Markdown()` class, as shown in the first example `Markdown in jupyter notebook cell`.\n",
    "\n",
    "But when there's the need to use Markdown inside ipywidgets to accomplish more complex stuff, it doesn't work. Then the solution could be to use the [HTML ipywidget](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html#HTML) and the [markdown package](https://pypi.org/project/Markdown/) as explained in second example `Markdown using HTML widget and markdown package`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Import needed packages"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "import markdown\n",
    "from IPython.display import display, Markdown, TextDisplayObject"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## the markdown text to use in the example"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "md_text = \"\"\"### Markdown content\n",
    "\n",
    "#### Animals\n",
    "\n",
    "* Dog\n",
    "* Cat\n",
    "* Elephant\n",
    "\n",
    "#### Markdown syntax\n",
    "\n",
    "In this phrase there are **bold** and *italic* words.\n",
    "\n",
    "> Here is a blockquote!\n",
    "\n",
    "#### Now a table :-)\n",
    "\n",
    "| Fruit     | Color   | Count |\n",
    "| --------- |-------- | ------|\n",
    "| apples    | red     |   73  |\n",
    "| bananas   | yellow  |   12  |\n",
    "| oranges   | orange  |   25  |\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "---\n",
    "\n",
    "## First example: Markdown in jupyter notebook cell"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "### Markdown content\n",
       "\n",
       "#### Animals\n",
       "\n",
       "* Dog\n",
       "* Cat\n",
       "* Elephant\n",
       "\n",
       "#### Markdown syntax\n",
       "\n",
       "In this phrase there are **bold** and *italic* words.\n",
       "\n",
       "> Here is a blockquote!\n",
       "\n",
       "#### Now a table :-)\n",
       "\n",
       "| Fruit     | Color   | Count |\n",
       "| --------- |-------- | ------|\n",
       "| apples    | red     |   73  |\n",
       "| bananas   | yellow  |   12  |\n",
       "| oranges   | orange  |   25  |\n"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "Markdown(md_text)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "---\n",
    "\n",
    "## Second example: Markdown using HTML widget and markdown package\n",
    "\n",
    "I created a class with all the widgets and its logic:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MarkdownText(object):\n",
    "    \n",
    "    def __init__(self):\n",
    "        style = {'description_width': 'initial'}        \n",
    "        \n",
    "        self.ta_info_description = widgets.Label('Write markdown text:') \n",
    "        \n",
    "        self.ta_info = widgets.Textarea(\n",
    "            placeholder='*Type something*',\n",
    "            value = md_text,\n",
    "            disabled=False,\n",
    "            style=style,\n",
    "            layout= widgets.Layout(width='400px', height='500px')\n",
    "        )\n",
    "        \n",
    "        self.html_md_description = widgets.Label('The markdown text formatted in HTML:', style=style)\n",
    "        \n",
    "        self.html_md = widgets.HTML(\n",
    "                value='',\n",
    "                placeholder='Some HTML',\n",
    "                style=style,\n",
    "                layout=widgets.Layout(border='3px solid black', width='400px', height='500px')\n",
    "            )\n",
    "        \n",
    "        self.box_md = widgets.HBox([widgets.VBox([self.ta_info_description, self.ta_info]),\n",
    "                                   widgets.VBox([self.html_md_description, self.html_md])])\n",
    "\n",
    "        self.chk_auto_update = widgets.Checkbox(\n",
    "            description='Auto update',\n",
    "            value=False,\n",
    "            style=style\n",
    "        )\n",
    "        \n",
    "        self.btn_show_md = widgets.Button(\n",
    "            description='Show Markdown',\n",
    "            disabled=False,\n",
    "            button_style='info', # 'success', 'info', 'warning', 'danger' or ''\n",
    "            icon='',\n",
    "            style=style\n",
    "        )        \n",
    "        \n",
    "        self.btn_show_md.on_click(self.btn_show_md__on_click)\n",
    "        \n",
    "        self.ta_info.observe(self.ta_info__on_change, names='value')\n",
    "        \n",
    "        self.box = widgets.VBox([self.box_md, self.chk_auto_update, self.btn_show_md])\n",
    "        \n",
    "    def btn_show_md__on_click(self, b):\n",
    "        self.html_md.value = markdown.markdown(self.ta_info.value, extensions=['markdown.extensions.tables'])\n",
    "        \n",
    "    def ta_info__on_change(self, change):\n",
    "        if self.chk_auto_update.value:\n",
    "            self.html_md.value = markdown.markdown(self.ta_info.value, extensions=['markdown.extensions.tables'])\n",
    "        "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Displaying the box created\n",
    "\n",
    "Then just with two lines of code we've it running.\n",
    "\n",
    "The Markdown HTML formated can be refreshed in two ways:\n",
    "* Using the button `Show Markdown`.\n",
    "* Using the checkbox `Auto update`: then every time there's a change in the Textarea, the formatted HTML will be updated."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "7335c8a19c85478583832cd59023a45f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(HBox(children=(VBox(children=(Label(value='Write markdown text:'), Textarea(value='### Markdown…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "m = MarkdownText()\n",
    "display(m.box)"
   ]
  }
 ],
 "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.6.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}