a demo on how the jupyter notebooks show html content

htmldemo.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 88,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "## demo for html content\n",
       "**jupyter notebook** support:\n",
       "* markdown \n",
       "* html\n",
       "* css\n",
       "* javascript\n",
       "\n",
       "see [doc](http://jupyter-notebook.readthedocs.io/en/stable/index.html) for more info"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%markdown\n",
    "## demo for html content\n",
    "**jupyter notebook** support:\n",
    "* markdown \n",
    "* html\n",
    "* css\n",
    "* javascript\n",
    "\n",
    "see [doc](http://jupyter-notebook.readthedocs.io/en/stable/index.html) for more info"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 89,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<h2> baidu iframe </h2>\n",
       "<iframe src=\"https://www.baidu.com\" width=\"100%\"></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html \n",
    "<h2> baidu iframe </h2>\n",
    "<iframe src=\"https://www.baidu.com\" width=\"100%\"></iframe>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<img src=\"http://wx2.sinaimg.cn/large/0069pyKMgy1fo9clvtm03j31jk111475.jpg\" width=\"90%\" alt=\"fancam\"/>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<img src=\"http://wx2.sinaimg.cn/large/0069pyKMgy1fo9clvtm03j31jk111475.jpg\" width=\"90%\" alt=\"fancam\"/>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 90,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<video src=\"http://v2v.cc/~j/theora_testsuite/320x240.ogg\" controls>\n",
       "</video>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<video src=\"http://v2v.cc/~j/theora_testsuite/320x240.ogg\" controls>\n",
    "</video>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 91,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "More on markdown\n",
       "------\n",
       "You can include code fence in md, and it even support mathematica!!\n",
       "```mathematica\n",
       "ll=Table[i^2,{i,1,10,2}]\n",
       "ll[[3;;]]\n",
       "NIntegrate[Sin[x],{x,0,Pi}]\n",
       "```\n",
       "or\n",
       "```python\n",
       "for i in array:\n",
       "    i = 3*i\n",
       "def demo():\n",
       "    return 1\n",
       "```\n",
       ">Table is also supported\n",
       "\n",
       "|t|e|s|t|\n",
       "|---|---|---|---|\n",
       "|1|2|3|4|\n",
       "\n",
       "inline formular $$x^2=1$$"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%markdown \n",
    "More on markdown\n",
    "------\n",
    "You can include code fence in md, and it even support mathematica!!\n",
    "```mathematica\n",
    "ll=Table[i^2,{i,1,10,2}]\n",
    "ll[[3;;]]\n",
    "NIntegrate[Sin[x],{x,0,Pi}]\n",
    "```\n",
    "or\n",
    "```python\n",
    "for i in array:\n",
    "    i = 3*i\n",
    "def demo():\n",
    "    return 1\n",
    "```\n",
    ">Table is also supported\n",
    "\n",
    "|t|e|s|t|\n",
    "|---|---|---|---|\n",
    "|1|2|3|4|\n",
    "\n",
    "inline formular $$x^2=1$$"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 93,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/latex": [
       "You can use latex directly in the notebook, too\n",
       "\\begin{equation}\n",
       "\\sin(x)=\\frac{1}{y^2\\pi}\n",
       "\\tag{*}\n",
       "\\label{theeq}\n",
       "\\end{equation}\n",
       "then we can cite the equation as eq.\\eqref{theeq}"
      ],
      "text/plain": [
       "<IPython.core.display.Latex object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%latex\n",
    "You can use latex directly in the notebook, too\n",
    "\\begin{equation}\n",
    "\\sin(x)=\\frac{1}{y^2\\pi}\n",
    "\\tag{*}\n",
    "\\label{theeq}\n",
    "\\end{equation}\n",
    "then we can cite the equation as eq.\\eqref{theeq}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 94,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<p>You can even include css to change the style of the whole notebook</p>\n",
       "<style>\n",
       "h1 {color:#00ff00;}\n",
       "p.ex {color:rgb(0,0,255);}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<p>You can even include css to change the style of the whole notebook</p>\n",
    "<style>\n",
    "h1 {color:#00ff00;}\n",
    "p.ex {color:rgb(0,0,255);}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<h1>This is green title</h1>\n",
       "<p> This cell shows the effect of the above css</p>\n",
       "<p class=\"ex\">This is paragraph with class \"ex\"</p>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<h1>This is green title</h1>\n",
    "<p> This cell shows the effect of the above css</p>\n",
    "<p class=\"ex\">This is paragraph with class \"ex\"</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 96,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "# title\n",
       "See? The css effect is global of the whole page. And it also controls markdown cell(as they are rendered as html first)."
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%markdown\n",
    "# title\n",
    "See? The css effect is global of the whole page. And it also controls markdown cell(as they are rendered as html first)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 72,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "test on\n",
       "* html in markdown cell\n",
       "* a link of external css\n",
       "<h1> watch the car! </h1>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n",
       "<i class=\"fa fa-car\" style=\"font-size:60px;color:red;\"></i>\n",
       "<p> show me the money <i class=\"fa fa-credit-card\"></i></p>"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%markdown\n",
    "test on\n",
    "* html in markdown cell\n",
    "* a link of external css\n",
    "<h1> watch the car! </h1>\n",
    "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n",
    "<i class=\"fa fa-car\" style=\"font-size:60px;color:red;\"></i>\n",
    "<p> show me the money <i class=\"fa fa-credit-card\"></i></p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 73,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "alert('Hello, welcome to read my blog on Jupyter notebook. (js demo from Jupyter notebook)')"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%js\n",
    "alert('hello')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 86,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js\">\n",
       "</script>\n",
       "<script>\n",
       "$(document).ready(function(){\n",
       "  $(\"h5\").click(function(){\n",
       "    $(this).hide();\n",
       "  });\n",
       "});\n",
       "</script>\n",
       "<h3> Oh, jQuery also works here! </h3>\n",
       "<h5>click to vanish</h5>\n",
       "<h5>click again</h5>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<script src=\"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js\">\n",
    "</script>\n",
    "<script>\n",
    "$(document).ready(function(){\n",
    "  $(\"h5\").click(function(){\n",
    "    $(this).hide();\n",
    "  });\n",
    "});\n",
    "</script>\n",
    "<h3> Oh, jQuery also works here! </h3>\n",
    "<h5>click to vanish</h5>\n",
    "<h5>click again</h5>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 105,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "<form>\n",
       "First name: <input type=\"text\" name=\"firstname\"><br>\n",
       "Last name: <input type=\"text\" name=\"lastname\">\n",
       "</form>\n",
       "<form>\n",
       "<input type=\"checkbox\" name=\"comments\" value=\"a\">Jupyter is amazing\n",
       "<input type=\"checkbox\" name=\"comments\" value=\"f\">Jupyter is fantastic \n",
       "</form>\n",
       "<canvas id=\"myCanvas\" width=\"220\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\n",
       "</canvas>\n",
       "\n",
       "<script>\n",
       "\n",
       "var c=document.getElementById(\"myCanvas\");\n",
       "var ctx=c.getContext(\"2d\");\n",
       "\n",
       "// Create gradient\n",
       "var grd=ctx.createLinearGradient(0,0,200,0);\n",
       "grd.addColorStop(0,\"blue\");\n",
       "grd.addColorStop(1,\"white\");\n",
       "\n",
       "// Fill with gradient\n",
       "ctx.fillStyle=grd;\n",
       "ctx.fillRect(10,10,200,80);\n",
       "\n",
       "</script>\n",
       "\n",
       "In a word, basically you can do **everything** the webpage can do in those cells!"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%markdown\n",
    "<form>\n",
    "First name: <input type=\"text\" name=\"firstname\"><br>\n",
    "Last name: <input type=\"text\" name=\"lastname\">\n",
    "</form>\n",
    "<form>\n",
    "<input type=\"checkbox\" name=\"comments\" value=\"a\">Jupyter is amazing\n",
    "<input type=\"checkbox\" name=\"comments\" value=\"f\">Jupyter is fantastic \n",
    "</form>\n",
    "<canvas id=\"myCanvas\" width=\"220\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\n",
    "</canvas>\n",
    "\n",
    "<script>\n",
    "\n",
    "var c=document.getElementById(\"myCanvas\");\n",
    "var ctx=c.getContext(\"2d\");\n",
    "\n",
    "// Create gradient\n",
    "var grd=ctx.createLinearGradient(0,0,200,0);\n",
    "grd.addColorStop(0,\"blue\");\n",
    "grd.addColorStop(1,\"white\");\n",
    "\n",
    "// Fill with gradient\n",
    "ctx.fillStyle=grd;\n",
    "ctx.fillRect(10,10,200,80);\n",
    "\n",
    "</script>\n",
    "\n",
    "In a word, basically you can do **everything** the webpage can do in those cells!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.5.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}

gist doesn't support all features of jupyter notebook. please view this via nbview: https://nbviewer.jupyter.org/gist/refraction-ray/2ead8ac5efdc0382d8a5e3d863f5425b.