Jupyter notebook CSS & Javascript Example

style.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Title: Hello World"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Second Heading\n",
    "\n",
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet eros vehicula, sodales eros quis, iaculis velit. Donec aliquet justo diam, a tincidunt odio tincidunt id. Cras ornare fringilla eros, eget cursus tortor viverra ut. Duis nec lobortis dui. Quisque ac ullamcorper lectus. Phasellus libero magna, maximus non vehicula quis, vehicula quis nulla. Cras in dapibus ex, quis vehicula tellus. Curabitur vestibulum sollicitudin auctor. Phasellus ultricies tellus nec commodo semper. Nam nibh justo, blandit sed fringilla non, ullamcorper eu arcu. Aenean mollis tincidunt diam vel cursus."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Another Sub Heading\n",
    "\n",
    "Nulla in aliquet odio. Cras elementum venenatis hendrerit. In varius sapien et mauris convallis, at venenatis neque bibendum. Nam eleifend neque in dui varius, et posuere lorem dictum. Integer at tristique diam, at condimentum sapien. Sed faucibus, nisl vitae vehicula sollicitudin, urna sem convallis mi, sed viverra dui libero vel justo. Sed ut enim finibus, tincidunt felis ac, scelerisque arcu. Nulla facilisi. Vestibulum bibendum arcu quis condimentum bibendum. Aliquam accumsan vel nisi at imperdiet. Mauris commodo ultricies dignissim."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       "@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);\n",
       "\n",
       "/* equivalent to Jupyter notebook cell */\n",
       "div.cell { \n",
       "margin-top: 1.5em;\n",
       "margin-bottom: 1.5em;\n",
       "}\n",
       "\n",
       "/* text area is called `text_cell_render` */\n",
       "div.text_cell_render h1 {\n",
       "font-size: 2.2em;\n",
       "line-height:1.4em;\n",
       "text-align:center;\n",
       "}\n",
       "\n",
       "div.text_cell_render h2 { /*  Parts names nearer from text */\n",
       "margin: 1em 0;\n",
       "padding-bottom: .5em;\n",
       "border-bottom: 1px solid rgb(200, 100, 100);\n",
       "}\n",
       "\n",
       "div.text_cell_render { /* Customize text cells */\n",
       "font-family: 'Nanum Gothic';\n",
       "font-size: 1.5em;\n",
       "line-height: 150%;\n",
       "padding: 0\n",
       "}\n",
       "\n",
       "/* code area is called `highlight` but only works in Nbviewer */\n",
       "div.highlight {\n",
       "}\n",
       "</style>\n",
       "\n",
       "<script>\n",
       "alert(\"You can even embed a Javascript\");\n",
       "function toggleCell() {\n",
       "    document\n",
       "    .querySelectorAll(\".highlight\")\n",
       "    .forEach(x => {\n",
       "        if (x.style.display === \"none\")\n",
       "          x.style.display = \"\";\n",
       "        else\n",
       "          x.style.display = \"none\";\n",
       "    });\n",
       "}\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<style>\n",
    "@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);\n",
    "\n",
    "/* equivalent to Jupyter notebook cell */\n",
    "div.cell { \n",
    "margin-top: 1.5em;\n",
    "margin-bottom: 1.5em;\n",
    "}\n",
    "\n",
    "/* text area is called `text_cell_render` */\n",
    "div.text_cell_render h1 {\n",
    "font-size: 2.2em;\n",
    "line-height:1.4em;\n",
    "text-align:center;\n",
    "}\n",
    "\n",
    "div.text_cell_render h2 { /*  Parts names nearer from text */\n",
    "margin: 1em 0;\n",
    "padding-bottom: .5em;\n",
    "border-bottom: 1px solid rgb(200, 100, 100);\n",
    "}\n",
    "\n",
    "div.text_cell_render { /* Customize text cells */\n",
    "font-family: 'Nanum Gothic';\n",
    "font-size: 1.5em;\n",
    "line-height: 150%;\n",
    "padding: 0\n",
    "}\n",
    "\n",
    "/* code area is called `highlight` but only works in Nbviewer */\n",
    "div.highlight {\n",
    "}\n",
    "</style>\n",
    "\n",
    "<script>\n",
    "alert(\"You can even embed a Javascript\");\n",
    "function toggleCell() {\n",
    "    document\n",
    "    .querySelectorAll(\".highlight\")\n",
    "    .forEach(x => {\n",
    "        if (x.style.display === \"none\")\n",
    "          x.style.display = \"\";\n",
    "        else\n",
    "          x.style.display = \"none\";\n",
    "    });\n",
    "}\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "alert(\"Hello World\");\n",
       "document.addEventListener(\"DOMContentLoaded\", function(event) {\n",
       "    toggleCell();\n",
       "    var cells = document.querySelectorAll(\"div.cell\");\n",
       "    var last_cell = cells[cells.length - 1];\n",
       "    var button = document.createElement(\"button\");\n",
       "    button.innerHTML = \"클릭해주세요\";\n",
       "    last_cell.appendChild(button);\n",
       "    \n",
       "    button.addEventListener(\"click\", (event) => {\n",
       "      event.preventDefault();\n",
       "      toggleCell();  \n",
       "    });\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "alert(\"Hello World\");\n",
    "document.addEventListener(\"DOMContentLoaded\", (event) => {\n",
    "    toggleCell();\n",
    "    let cells = document.querySelectorAll(\"div.cell\");\n",
    "    let last_cell = cells[cells.length - 1];\n",
    "    let button = document.createElement(\"button\");\n",
    "    button.innerHTML = \"클릭해주세요\";\n",
    "    last_cell.appendChild(button);\n",
    "    \n",
    "    button.addEventListener(\"click\", (event) => {\n",
    "      event.preventDefault();\n",
    "      toggleCell();  \n",
    "    });\n",
    "});"
   ]
  }
 ],
 "metadata": {
  "_draft": {
   "nbviewer_url": "https://gist.github.com/d44b60eb35d025c1de99502c8b4eabc3"
  },
  "gist": {
   "data": {
    "description": "Jupyter Notebook Style Sheet",
    "public": true
   },
   "id": "d44b60eb35d025c1de99502c8b4eabc3"
  },
  "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.1"
  },
  "toc": {
   "colors": {
    "hover_highlight": "#DAA520",
    "navigate_num": "#000000",
    "navigate_text": "#333333",
    "running_highlight": "#FF0000",
    "selected_highlight": "#FFD700",
    "sidebar_border": "#EEEEEE",
    "wrapper_background": "#FFFFFF"
   },
   "moveMenuLeft": true,
   "nav_menu": {
    "height": "66px",
    "width": "252px"
   },
   "navigate_menu": true,
   "number_sections": true,
   "sideBar": false,
   "threshold": 4,
   "toc_cell": false,
   "toc_position": {
    "height": "413px",
    "left": "1px",
    "right": "20px",
    "top": "135px",
    "width": "212px"
   },
   "toc_section_display": "block",
   "toc_window_display": false,
   "widenNotebook": false
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}