{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".rendered_html .hrepr table {\n",
       "\tmargin-top: 0px;\n",
       "\tmargin-bottom: 0px;\n",
       "\ttable-layout: auto;\n",
       "}\n",
       "\n",
       ".rendered_html tr, .rendered_html th, .rendered_html td {\n",
       "\tpadding: 2px;\n",
       "\ttext-align: left;\n",
       "}\n",
       "</style><style>\n",
       ":root, :host {\n",
       "\t--instance-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--struct-border: 2px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hreprv-True, .hreprv-False, .hreprv-None, .hreprt-int, .hreprt-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hreprt-int, .hreprt-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hreprt-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hreprt-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hreprt-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hreprt-bytes {\n",
       "\tcolor: #666;\n",
       "\tfont-family: monospace;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hreprt-bytes:before {\n",
       "\tcontent: \"b“\";\n",
       "}\n",
       "\n",
       ".hreprt-bytes:after {\n",
       "\tcontent: \"”\";\n",
       "}\n",
       "\n",
       ".hreprv-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hreprv-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hreprv-None {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic layouts */\n",
       "\n",
       ".hreprl-h, .hreprl-s {\n",
       "\tdisplay: inline-flex;\n",
       "\tflex-direction: row;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hreprl-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-body.hreprl-h,\n",
       ".hrepr-body.hreprl-v {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-body.hreprl-v > *,\n",
       ".hrepr-body.hreprl-h > * {\n",
       "\tmargin: 2px;\n",
       "\tpadding: 1px;\n",
       "\tbackground: white;\n",
       "\tdisplay: inline-flex;\n",
       "\tplace-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-body.hreprl-s > * {\n",
       "\tpadding: 1px;\n",
       "}\n",
       "\n",
       ".hrepr-bracketed {\n",
       "\tdisplay: inline-flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-bracketed {\n",
       "\tdisplay: inline-flex;\n",
       "\tflex-direction: row;\n",
       "\tplace-items: center;\n",
       "\tbackground: black;\n",
       "\tborder: var(--struct-border) solid black;\n",
       "}\n",
       "\n",
       ".hrepr-bracketed > .hrepr-open {\n",
       "\tpadding-right: var(--struct-border);\n",
       "}\n",
       ".hrepr-bracketed > .hrepr-close {\n",
       "\tpadding-left: var(--struct-border);\n",
       "}\n",
       ".hrepr-bracketed > .hrepr-open,\n",
       ".hrepr-bracketed > .hrepr-close,\n",
       ".hrepr-instance > .hrepr-title,\n",
       ".hreprl-s {\n",
       "\tcolor: white;\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-instance {\n",
       "\tbackground: var(--instance-color);\n",
       "\tborder: var(--struct-border) solid var(--instance-color);\n",
       "}\n",
       ".hrepr-instance > .hrepr-title {\n",
       "\tcolor: white;\n",
       "\tfont-weight: bold;\n",
       "}\n",
       ".hrepr-instance.hreprl-v > .hrepr-title {\n",
       "\tpadding-bottom: var(--struct-border);\n",
       "}\n",
       ".hrepr-instance.hreprl-h > .hrepr-title,\n",
       ".hrepr-instance.hreprl-s > .hrepr-title {\n",
       "\tpadding-right: var(--struct-border);\n",
       "\tplace-self: center;\n",
       "}\n",
       "\n",
       "\n",
       "/* Colors for structures. */\n",
       "\n",
       ".hreprt-dict {\n",
       "\tbackground: var(--dict-color);\n",
       "\tborder-color: var(--dict-color);\n",
       "}\n",
       "\n",
       ".hreprt-list {\n",
       "\tbackground: var(--list-color);\n",
       "\tborder-color: var(--list-color);\n",
       "}\n",
       "\n",
       ".hreprt-tuple {\n",
       "\tbackground: var(--tuple-color);\n",
       "\tborder-color: var(--tuple-color);\n",
       "}\n",
       "\n",
       ".hreprt-set {\n",
       "\tbackground: var(--set-color);\n",
       "\tborder-color: var(--set-color);\n",
       "}\n",
       "\n",
       ".hreprt-frozenset {\n",
       "\tbackground: var(--frozenset-color);\n",
       "\tborder-color: var(--frozenset-color);\n",
       "}\n",
       "\n",
       "table.hrepr-body {\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "}\n",
       "\n",
       "table.hrepr-body > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       "table.hrepr-body > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       "\n",
       "/* References */\n",
       "\n",
       ".hrepr-ref {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "\n",
       ".hrepr-refbox {\n",
       "\tdisplay: inline-block;\n",
       "\tposition: relative;\n",
       "}\n",
       "\n",
       "/* .hrepr-refbox > :first-child {\n",
       "\tposition: absolute;\n",
       "\tcolor: white;\n",
       "\tbackground: magenta;\n",
       "\tpadding: 2px;\n",
       "\tfont-size: 9px;\n",
       "\tleft: 0px;\n",
       "\ttop: 0px;\n",
       "} */\n",
       "</style><div class=\"hrepr\"><div class=\"hrepr-bracketed hreprt-dict\"><div class=\"hrepr-open\">{</div><table class=\"hrepr-body\"><tr><td><span class=\"hreprt-str\">strings</span></td><td class=\"hrepr-delim\">: </td><td><span class=\"hreprt-str\">Hello this is hrepr</span></td></tr><tr><td><span class=\"hreprt-str\">numbers</span></td><td class=\"hrepr-delim\">: </td><td><div class=\"hreprt-list hrepr-bracketed\"><div class=\"hrepr-open\">[</div><div class=\"hrepr-body hreprl-h\"><div><span class=\"hreprt-int\">1</span></div><div><span class=\"hreprt-int\">-2</span></div><div><span class=\"hreprt-float\">3.0</span></div></div><div class=\"hrepr-close\">]</div></div></td></tr><tr><td><span class=\"hreprt-str\">booleans</span></td><td class=\"hrepr-delim\">: </td><td><div class=\"hrepr-bracketed hreprt-tuple\"><div class=\"hrepr-open\">(</div><div class=\"hrepr-body hreprl-h\"><div><span class=\"hreprv-True\">True</span></div><div><span class=\"hreprv-False\">False</span></div></div><div class=\"hrepr-close\">)</div></div></td></tr><tr><td><span class=\"hreprt-str\">none</span></td><td class=\"hrepr-delim\">: </td><td><span class=\"hreprv-None\">None</span></td></tr></table><div class=\"hrepr-close\">}</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hrepr-bracketed hreprt-dict\"><div class=\"hrepr-open\">{</div><table class=\"hrepr-body\"><tr><td><span class=\"hreprt-str\">strings</span></td><td class=\"hrepr-delim\">: </td><td><span class=\"hreprt-str\">Hello this is hrepr</span></td></tr><tr><td><span class=\"hreprt-str\">numbers</span></td><td class=\"hrepr-delim\">: </td><td><div class=\"hreprt-list hrepr-bracketed\"><div class=\"hrepr-open\">[</div><div class=\"hrepr-body hreprl-h\"><div><span class=\"hreprt-int\">1</span></div><div><span class=\"hreprt-int\">-2</span></div><div><span class=\"hreprt-float\">3.0</span></div></div><div class=\"hrepr-close\">]</div></div></td></tr><tr><td><span class=\"hreprt-str\">booleans</span></td><td class=\"hrepr-delim\">: </td><td><div class=\"hrepr-bracketed hreprt-tuple\"><div class=\"hrepr-open\">(</div><div class=\"hrepr-body hreprl-h\"><div><span class=\"hreprv-True\">True</span></div><div><span class=\"hreprv-False\">False</span></div></div><div class=\"hrepr-close\">)</div></div></td></tr><tr><td><span class=\"hreprt-str\">none</span></td><td class=\"hrepr-delim\">: </td><td><span class=\"hreprv-None\">None</span></td></tr></table><div class=\"hrepr-close\">}</div></div>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from hrepr import hrepr\n",
    "\n",
    "hrepr({\n",
    "    'strings': \"Hello this is hrepr\",\n",
    "    'numbers': [1, -2, 3.0],\n",
    "    'booleans': (True, False),\n",
    "    'none': None\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "ename": "AttributeError",
     "evalue": "'StdHrepr' object has no attribute 'stdrepr_object'",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mAttributeError\u001b[0m                            Traceback (most recent call last)",
      "\u001b[0;32m<ipython-input-2-46b8f708b186>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[1;32m     15\u001b[0m \u001b[0malice\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mPerson\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m'Alice'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;36m46\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m'chef'\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     16\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m---> 17\u001b[0;31m \u001b[0mdisplay_html\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mhrepr\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0malice\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m               \u001b[0;31m# Triggers __hrepr__\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m     18\u001b[0m \u001b[0mdisplay_html\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mhrepr\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0malice\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mmax_depth\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;36m0\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m  \u001b[0;31m# Triggers __hrepr_short__ at given depth\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;32m~/code/hrepr/hrepr/core.py\u001b[0m in \u001b[0;36m__call__\u001b[0;34m(self, hclass, mixins, preprocess, postprocess, *objs, **config)\u001b[0m\n\u001b[1;32m    393\u001b[0m         )\n\u001b[1;32m    394\u001b[0m         \u001b[0;32mif\u001b[0m \u001b[0mlen\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobjs\u001b[0m\u001b[0;34m)\u001b[0m \u001b[0;34m==\u001b[0m \u001b[0;36m1\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 395\u001b[0;31m             \u001b[0mrval\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mhcall\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobjs\u001b[0m\u001b[0;34m[\u001b[0m\u001b[0;36m0\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    396\u001b[0m         \u001b[0;32melse\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    397\u001b[0m             \u001b[0mrval\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mH\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0minline\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m*\u001b[0m\u001b[0mmap\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mhcall\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mobjs\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;32m~/code/hrepr/hrepr/core.py\u001b[0m in \u001b[0;36m__call__\u001b[0;34m(self, obj, **config)\u001b[0m\n\u001b[1;32m    183\u001b[0m             \u001b[0mrval\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mrunner\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mhrepr_short\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobj\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    184\u001b[0m         \u001b[0;32melse\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 185\u001b[0;31m             \u001b[0mrval\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mrunner\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mhrepr\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobj\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    186\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    187\u001b[0m         \u001b[0;32mif\u001b[0m \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mpostprocess\u001b[0m \u001b[0;32mis\u001b[0m \u001b[0;32mnot\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;32m~/code/hrepr/hrepr/core.py\u001b[0m in \u001b[0;36mhrepr.dispatch\u001b[0;34m(ovldcall, obj)\u001b[0m\n\u001b[1;32m    137\u001b[0m     \u001b[0;32mdef\u001b[0m \u001b[0mhrepr\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0movldcall\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mobj\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    138\u001b[0m         \u001b[0mself\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0movldcall\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mobj\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 139\u001b[0;31m         \u001b[0mrval\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0movldcall\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mresolve\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobj\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobj\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    140\u001b[0m         \u001b[0;32mif\u001b[0m \u001b[0mrval\u001b[0m \u001b[0;32mis\u001b[0m \u001b[0mNotImplemented\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    141\u001b[0m             \u001b[0;32mreturn\u001b[0m \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mhrepr_short\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobj\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;32m~/code/hrepr/hrepr/core.py\u001b[0m in \u001b[0;36mhrepr[*]\u001b[0;34m(self, obj)\u001b[0m\n\u001b[1;32m    146\u001b[0m     \u001b[0;32mdef\u001b[0m \u001b[0mhrepr\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mself\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mobj\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mobject\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    147\u001b[0m         \u001b[0;32mif\u001b[0m \u001b[0mhasattr\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mobj\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m\"__hrepr__\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 148\u001b[0;31m             \u001b[0;32mreturn\u001b[0m \u001b[0mobj\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0m__hrepr__\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mH\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mself\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    149\u001b[0m         \u001b[0;32melse\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    150\u001b[0m             \u001b[0;32mreturn\u001b[0m \u001b[0mNotImplemented\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;32m<ipython-input-2-46b8f708b186>\u001b[0m in \u001b[0;36m__hrepr__\u001b[0;34m(self, H, hrepr)\u001b[0m\n\u001b[1;32m      8\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      9\u001b[0m     \u001b[0;32mdef\u001b[0m \u001b[0m__hrepr__\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mself\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mH\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mhrepr\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m---> 10\u001b[0;31m         \u001b[0;32mreturn\u001b[0m \u001b[0mhrepr\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mstdrepr_object\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mname\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m'age'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mage\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m(\u001b[0m\u001b[0;34m'job'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mjob\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m     11\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     12\u001b[0m     \u001b[0;32mdef\u001b[0m \u001b[0m__hrepr_short__\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mself\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mH\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mhrepr\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;31mAttributeError\u001b[0m: 'StdHrepr' object has no attribute 'stdrepr_object'"
     ]
    }
   ],
   "source": [
    "from IPython.display import display_html\n",
    "\n",
    "class Person:\n",
    "    def __init__(self, name, age, job):\n",
    "        self.name = name\n",
    "        self.age = age\n",
    "        self.job = job\n",
    "\n",
    "    def __hrepr__(self, H, hrepr):\n",
    "        return hrepr.stdrepr_object(self.name, [('age', self.age), ('job', self.job)])\n",
    "\n",
    "    def __hrepr_short__(self, H, hrepr):\n",
    "        return H.strong(self.name, style='color:blue')\n",
    "\n",
    "alice = Person('Alice', 46, 'chef')\n",
    "\n",
    "display_html(hrepr(alice))               # Triggers __hrepr__\n",
    "display_html(hrepr(alice, max_depth=0))  # Triggers __hrepr_short__ at given depth"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".hrepr td {\n",
       "\ttext-align: left;\n",
       "}\n",
       "</style><style>\n",
       ":root, :host {\n",
       "\t--object-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--titled-box-radius: 0px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hrepr-True, .hrepr-False, .hrepr-NoneType, .hrepr-int, .hrepr-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-int, .hrepr-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hrepr-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hrepr-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hrepr-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hrepr-NoneType {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic object formatting */\n",
       "\n",
       ".hrepr-title {\n",
       "\tbackground: var(--object-color);\n",
       "\tcolor: white;\n",
       "\tvertical-align: middle;\n",
       "\tdisplay: flex;\n",
       "\talign-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v > .hrepr-title {\n",
       "\tfont-weight: bold;\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tpadding-top: 2px;\n",
       "\tpadding-bottom: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title {\n",
       "\tpadding-left: 2px;\n",
       "\tpadding-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:first-child {\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:last-child {\n",
       "\tpadding-left: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-contents-h {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v, .hrepr-contents-v {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-titled-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tborder: 1px solid var(--object-color);\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h {\n",
       "\talign-items: center;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > * {\n",
       "\tmargin-left: 2px;\n",
       "\tmargin-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(odd),\n",
       ".hrepr-contents-v > :nth-child(odd),\n",
       ".hrepr-object-table > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(even),\n",
       ".hrepr-contents-v > :nth-child(even),\n",
       ".hrepr-object-table > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-object-table {\n",
       "\tdisplay: inline-block;\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td.hrepr-delimiter {\n",
       "\tpadding: 0px;\n",
       "}\n",
       "\n",
       "/* .hrepr-object-table > tbody > tr > td > * {\n",
       "\tdisplay: inline-block;\n",
       "} */\n",
       "\n",
       ".hrepr-object-kvpair {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tbackground: #eee;\n",
       "}\n",
       "\n",
       "/* Colorize boxes for standard data structures */\n",
       "\n",
       ".hrepr-dict { border: 1px solid var(--dict-color); }\n",
       ".hrepr-dict > .hrepr-title { background: var(--dict-color); }\n",
       "\n",
       ".hrepr-tuple { border: 1px solid var(--tuple-color); }\n",
       ".hrepr-tuple > .hrepr-title { background: var(--tuple-color); }\n",
       "\n",
       ".hrepr-list { border: 1px solid var(--list-color); }\n",
       ".hrepr-list > .hrepr-title { background: var(--list-color); }\n",
       "\n",
       ".hrepr-set { border: 1px solid var(--set-color); }\n",
       ".hrepr-set > .hrepr-title { background: var(--set-color); }\n",
       "\n",
       ".hrepr-frozenset { border: 1px solid var(--frozenset-color); }\n",
       ".hrepr-frozenset > .hrepr-title { background: var(--frozenset-color); }\n",
       "\n",
       ".hrepr-ellipsis {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-circular {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "</style><div class=\"hrepr\"><div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><div style=\"\n",
       "        background: rgb(0, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(16, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(32, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(48, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(64, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(80, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(96, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(112, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(128, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(144, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(160, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(176, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(192, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(208, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(224, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(240, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(256, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div></div><div class=\"hrepr-title\">]</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><div style=\"\n",
       "        background: rgb(0, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(16, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(32, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(48, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(64, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(80, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(96, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(112, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(128, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(144, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(160, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(176, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(192, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(208, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(224, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(240, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div><div style=\"\n",
       "        background: rgb(256, 0, 0);\n",
       "        width: 20px;\n",
       "        height: 20px;\n",
       "        margin: 3px;\n",
       "        \"></div></div><div class=\"hrepr-title\">]</div></div>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "class Color:\n",
    "    def __init__(self, r, g, b):\n",
    "        self.r = r\n",
    "        self.g = g\n",
    "        self.b = b\n",
    "\n",
    "    def __hrepr__(self, H, hrepr):\n",
    "        size = hrepr.config.swatch_size or 25\n",
    "        style = f\"\"\"\n",
    "        background: rgb({self.r}, {self.g}, {self.b});\n",
    "        width: {size}px;\n",
    "        height: {size}px;\n",
    "        margin: 3px;\n",
    "        \"\"\"\n",
    "        return H.div(style=style)\n",
    "\n",
    "hrepr([Color(i*16, 0, 0) for i in range(17)], swatch_size=20)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".hrepr td {\n",
       "\ttext-align: left;\n",
       "}\n",
       "</style><style>\n",
       ":root, :host {\n",
       "\t--object-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--titled-box-radius: 0px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hrepr-True, .hrepr-False, .hrepr-NoneType, .hrepr-int, .hrepr-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-int, .hrepr-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hrepr-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hrepr-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hrepr-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hrepr-NoneType {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic object formatting */\n",
       "\n",
       ".hrepr-title {\n",
       "\tbackground: var(--object-color);\n",
       "\tcolor: white;\n",
       "\tvertical-align: middle;\n",
       "\tdisplay: flex;\n",
       "\talign-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v > .hrepr-title {\n",
       "\tfont-weight: bold;\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tpadding-top: 2px;\n",
       "\tpadding-bottom: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title {\n",
       "\tpadding-left: 2px;\n",
       "\tpadding-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:first-child {\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:last-child {\n",
       "\tpadding-left: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-contents-h {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v, .hrepr-contents-v {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-titled-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tborder: 1px solid var(--object-color);\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h {\n",
       "\talign-items: center;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > * {\n",
       "\tmargin-left: 2px;\n",
       "\tmargin-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(odd),\n",
       ".hrepr-contents-v > :nth-child(odd),\n",
       ".hrepr-object-table > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(even),\n",
       ".hrepr-contents-v > :nth-child(even),\n",
       ".hrepr-object-table > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-object-table {\n",
       "\tdisplay: inline-block;\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td.hrepr-delimiter {\n",
       "\tpadding: 0px;\n",
       "}\n",
       "\n",
       "/* .hrepr-object-table > tbody > tr > td > * {\n",
       "\tdisplay: inline-block;\n",
       "} */\n",
       "\n",
       ".hrepr-object-kvpair {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tbackground: #eee;\n",
       "}\n",
       "\n",
       "/* Colorize boxes for standard data structures */\n",
       "\n",
       ".hrepr-dict { border: 1px solid var(--dict-color); }\n",
       ".hrepr-dict > .hrepr-title { background: var(--dict-color); }\n",
       "\n",
       ".hrepr-tuple { border: 1px solid var(--tuple-color); }\n",
       ".hrepr-tuple > .hrepr-title { background: var(--tuple-color); }\n",
       "\n",
       ".hrepr-list { border: 1px solid var(--list-color); }\n",
       ".hrepr-list > .hrepr-title { background: var(--list-color); }\n",
       "\n",
       ".hrepr-set { border: 1px solid var(--set-color); }\n",
       ".hrepr-set > .hrepr-title { background: var(--set-color); }\n",
       "\n",
       ".hrepr-frozenset { border: 1px solid var(--frozenset-color); }\n",
       ".hrepr-frozenset > .hrepr-title { background: var(--frozenset-color); }\n",
       "\n",
       ".hrepr-ellipsis {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-circular {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "</style><div class=\"hrepr\"><div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div></div><div class=\"hrepr-title\">]</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-ellipsis\">⋮</span></div><div class=\"hrepr-title\">}</div></div></div><div class=\"hrepr-title\">]</div></div>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "hrepr([{i: i * i} for i in range(10)], max_depth=1)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".hrepr td {\n",
       "\ttext-align: left;\n",
       "}\n",
       "</style><style>.my-integer { color: fuchsia; }</style><style>\n",
       ":root, :host {\n",
       "\t--object-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--titled-box-radius: 0px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hrepr-True, .hrepr-False, .hrepr-NoneType, .hrepr-int, .hrepr-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-int, .hrepr-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hrepr-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hrepr-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hrepr-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hrepr-NoneType {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic object formatting */\n",
       "\n",
       ".hrepr-title {\n",
       "\tbackground: var(--object-color);\n",
       "\tcolor: white;\n",
       "\tvertical-align: middle;\n",
       "\tdisplay: flex;\n",
       "\talign-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v > .hrepr-title {\n",
       "\tfont-weight: bold;\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tpadding-top: 2px;\n",
       "\tpadding-bottom: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title {\n",
       "\tpadding-left: 2px;\n",
       "\tpadding-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:first-child {\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:last-child {\n",
       "\tpadding-left: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-contents-h {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v, .hrepr-contents-v {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-titled-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tborder: 1px solid var(--object-color);\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h {\n",
       "\talign-items: center;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > * {\n",
       "\tmargin-left: 2px;\n",
       "\tmargin-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(odd),\n",
       ".hrepr-contents-v > :nth-child(odd),\n",
       ".hrepr-object-table > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(even),\n",
       ".hrepr-contents-v > :nth-child(even),\n",
       ".hrepr-object-table > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-object-table {\n",
       "\tdisplay: inline-block;\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td.hrepr-delimiter {\n",
       "\tpadding: 0px;\n",
       "}\n",
       "\n",
       "/* .hrepr-object-table > tbody > tr > td > * {\n",
       "\tdisplay: inline-block;\n",
       "} */\n",
       "\n",
       ".hrepr-object-kvpair {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tbackground: #eee;\n",
       "}\n",
       "\n",
       "/* Colorize boxes for standard data structures */\n",
       "\n",
       ".hrepr-dict { border: 1px solid var(--dict-color); }\n",
       ".hrepr-dict > .hrepr-title { background: var(--dict-color); }\n",
       "\n",
       ".hrepr-tuple { border: 1px solid var(--tuple-color); }\n",
       ".hrepr-tuple > .hrepr-title { background: var(--tuple-color); }\n",
       "\n",
       ".hrepr-list { border: 1px solid var(--list-color); }\n",
       ".hrepr-list > .hrepr-title { background: var(--list-color); }\n",
       "\n",
       ".hrepr-set { border: 1px solid var(--set-color); }\n",
       ".hrepr-set > .hrepr-title { background: var(--set-color); }\n",
       "\n",
       ".hrepr-frozenset { border: 1px solid var(--frozenset-color); }\n",
       ".hrepr-frozenset > .hrepr-title { background: var(--frozenset-color); }\n",
       "\n",
       ".hrepr-ellipsis {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-circular {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "</style><div class=\"hrepr\"><div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"my-integer\">The number 1</span><span class=\"my-integer\">The number 2</span><span class=\"my-integer\">The number 3</span><span class=\"my-integer\">The number 4</span></div><div class=\"hrepr-title\">]</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"my-integer\">The number 1</span><span class=\"my-integer\">The number 2</span><span class=\"my-integer\">The number 3</span><span class=\"my-integer\">The number 4</span></div><div class=\"hrepr-title\">]</div></div>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "class MyIntRepr:\n",
    "    def resources(self, H):\n",
    "        return H.style(\".my-integer { color: fuchsia; }\")\n",
    "\n",
    "    def __call__(self, n, H, hrepr):\n",
    "        return H.span['my-integer']('The number ', str(n))\n",
    "\n",
    "hrepr([1, 2, 3, 4], type_handlers={int: MyIntRepr()})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".hrepr td {\n",
       "\ttext-align: left;\n",
       "}\n",
       "</style><style>\n",
       ":root, :host {\n",
       "\t--object-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--titled-box-radius: 0px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hrepr-True, .hrepr-False, .hrepr-NoneType, .hrepr-int, .hrepr-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-int, .hrepr-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hrepr-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hrepr-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hrepr-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hrepr-NoneType {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic object formatting */\n",
       "\n",
       ".hrepr-title {\n",
       "\tbackground: var(--object-color);\n",
       "\tcolor: white;\n",
       "\tvertical-align: middle;\n",
       "\tdisplay: flex;\n",
       "\talign-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v > .hrepr-title {\n",
       "\tfont-weight: bold;\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tpadding-top: 2px;\n",
       "\tpadding-bottom: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title {\n",
       "\tpadding-left: 2px;\n",
       "\tpadding-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:first-child {\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:last-child {\n",
       "\tpadding-left: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-contents-h {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v, .hrepr-contents-v {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-titled-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tborder: 1px solid var(--object-color);\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h {\n",
       "\talign-items: center;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > * {\n",
       "\tmargin-left: 2px;\n",
       "\tmargin-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(odd),\n",
       ".hrepr-contents-v > :nth-child(odd),\n",
       ".hrepr-object-table > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(even),\n",
       ".hrepr-contents-v > :nth-child(even),\n",
       ".hrepr-object-table > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-object-table {\n",
       "\tdisplay: inline-block;\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td.hrepr-delimiter {\n",
       "\tpadding: 0px;\n",
       "}\n",
       "\n",
       "/* .hrepr-object-table > tbody > tr > td > * {\n",
       "\tdisplay: inline-block;\n",
       "} */\n",
       "\n",
       ".hrepr-object-kvpair {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tbackground: #eee;\n",
       "}\n",
       "\n",
       "/* Colorize boxes for standard data structures */\n",
       "\n",
       ".hrepr-dict { border: 1px solid var(--dict-color); }\n",
       ".hrepr-dict > .hrepr-title { background: var(--dict-color); }\n",
       "\n",
       ".hrepr-tuple { border: 1px solid var(--tuple-color); }\n",
       ".hrepr-tuple > .hrepr-title { background: var(--tuple-color); }\n",
       "\n",
       ".hrepr-list { border: 1px solid var(--list-color); }\n",
       ".hrepr-list > .hrepr-title { background: var(--list-color); }\n",
       "\n",
       ".hrepr-set { border: 1px solid var(--set-color); }\n",
       ".hrepr-set > .hrepr-title { background: var(--set-color); }\n",
       "\n",
       ".hrepr-frozenset { border: 1px solid var(--frozenset-color); }\n",
       ".hrepr-frozenset > .hrepr-title { background: var(--frozenset-color); }\n",
       "\n",
       ".hrepr-ellipsis {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-circular {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "</style><style>.my-str { font-weight: bold; }</style><div class=\"hrepr\"><div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"my-str\">AVOCADO</span><span class=\"my-str\">BANANA</span><span class=\"my-str\">CHERRY</span></div><div class=\"hrepr-title\">]</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"my-str\">AVOCADO</span><span class=\"my-str\">BANANA</span><span class=\"my-str\">CHERRY</span></div><div class=\"hrepr-title\">]</div></div>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Another way to do the same thing\n",
    "\n",
    "def mystr_repr(s, H, hrepr):\n",
    "    return H.span['my-str'](s.upper())\n",
    "\n",
    "def mystr_resources(H):\n",
    "    return H.style(\".my-str { font-weight: bold; }\")\n",
    "\n",
    "hrepr(['avocado', 'banana', 'cherry'], type_handlers={str: mystr_repr}, resources=mystr_resources)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".hrepr td {\n",
       "\ttext-align: left;\n",
       "}\n",
       "</style><style>.highlight { background: red !IMPORTANT; color: white !IMPORTANT; }</style><style>\n",
       ":root, :host {\n",
       "\t--object-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--titled-box-radius: 0px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hrepr-True, .hrepr-False, .hrepr-NoneType, .hrepr-int, .hrepr-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-int, .hrepr-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hrepr-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hrepr-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hrepr-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hrepr-NoneType {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic object formatting */\n",
       "\n",
       ".hrepr-title {\n",
       "\tbackground: var(--object-color);\n",
       "\tcolor: white;\n",
       "\tvertical-align: middle;\n",
       "\tdisplay: flex;\n",
       "\talign-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v > .hrepr-title {\n",
       "\tfont-weight: bold;\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tpadding-top: 2px;\n",
       "\tpadding-bottom: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title {\n",
       "\tpadding-left: 2px;\n",
       "\tpadding-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:first-child {\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:last-child {\n",
       "\tpadding-left: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-contents-h {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v, .hrepr-contents-v {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-titled-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tborder: 1px solid var(--object-color);\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h {\n",
       "\talign-items: center;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > * {\n",
       "\tmargin-left: 2px;\n",
       "\tmargin-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(odd),\n",
       ".hrepr-contents-v > :nth-child(odd),\n",
       ".hrepr-object-table > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(even),\n",
       ".hrepr-contents-v > :nth-child(even),\n",
       ".hrepr-object-table > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-object-table {\n",
       "\tdisplay: inline-block;\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td.hrepr-delimiter {\n",
       "\tpadding: 0px;\n",
       "}\n",
       "\n",
       "/* .hrepr-object-table > tbody > tr > td > * {\n",
       "\tdisplay: inline-block;\n",
       "} */\n",
       "\n",
       ".hrepr-object-kvpair {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tbackground: #eee;\n",
       "}\n",
       "\n",
       "/* Colorize boxes for standard data structures */\n",
       "\n",
       ".hrepr-dict { border: 1px solid var(--dict-color); }\n",
       ".hrepr-dict > .hrepr-title { background: var(--dict-color); }\n",
       "\n",
       ".hrepr-tuple { border: 1px solid var(--tuple-color); }\n",
       ".hrepr-tuple > .hrepr-title { background: var(--tuple-color); }\n",
       "\n",
       ".hrepr-list { border: 1px solid var(--list-color); }\n",
       ".hrepr-list > .hrepr-title { background: var(--list-color); }\n",
       "\n",
       ".hrepr-set { border: 1px solid var(--set-color); }\n",
       ".hrepr-set > .hrepr-title { background: var(--set-color); }\n",
       "\n",
       ".hrepr-frozenset { border: 1px solid var(--frozenset-color); }\n",
       ".hrepr-frozenset > .hrepr-title { background: var(--frozenset-color); }\n",
       "\n",
       ".hrepr-ellipsis {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-circular {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "</style><div class=\"hrepr\"><div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-int\">-2</span><span class=\"hrepr-int highlight\">-1</span><span class=\"hrepr-int highlight\">0</span><span class=\"hrepr-int\">1</span><span class=\"hrepr-int highlight\">2</span></div><div class=\"hrepr-title\">]</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hrepr-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"hrepr-int\">-2</span><span class=\"hrepr-int highlight\">-1</span><span class=\"hrepr-int highlight\">0</span><span class=\"hrepr-int\">1</span><span class=\"hrepr-int highlight\">2</span></div><div class=\"hrepr-title\">]</div></div>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def highlighter(*objs):\n",
    "    def post(obj, elem, H, hrepr):\n",
    "        if obj in objs:\n",
    "            return elem['highlight']  # This is simply a copy of elem with the 'highlight' class tacked on\n",
    "    return post\n",
    "\n",
    "def hl_resources(H):\n",
    "    return H.style(\".highlight { background: red !IMPORTANT; color: white !IMPORTANT; }\")\n",
    "\n",
    "hrepr([-2, -1, 0, 1, 2], postprocess=highlighter(-1, 0, 2), resources=hl_resources)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".hrepr td {\n",
       "\ttext-align: left;\n",
       "}\n",
       "</style><style>\n",
       ":root, :host {\n",
       "\t--object-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--titled-box-radius: 0px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hrepr-True, .hrepr-False, .hrepr-NoneType, .hrepr-int, .hrepr-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-int, .hrepr-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hrepr-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hrepr-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hrepr-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hrepr-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hrepr-NoneType {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic object formatting */\n",
       "\n",
       ".hrepr-title {\n",
       "\tbackground: var(--object-color);\n",
       "\tcolor: white;\n",
       "\tvertical-align: middle;\n",
       "\tdisplay: flex;\n",
       "\talign-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v > .hrepr-title {\n",
       "\tfont-weight: bold;\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tpadding-top: 2px;\n",
       "\tpadding-bottom: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title {\n",
       "\tpadding-left: 2px;\n",
       "\tpadding-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:first-child {\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:last-child {\n",
       "\tpadding-left: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-contents-h {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v, .hrepr-contents-v {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-titled-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tborder: 1px solid var(--object-color);\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h {\n",
       "\talign-items: center;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > * {\n",
       "\tmargin-left: 2px;\n",
       "\tmargin-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(odd),\n",
       ".hrepr-contents-v > :nth-child(odd),\n",
       ".hrepr-object-table > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(even),\n",
       ".hrepr-contents-v > :nth-child(even),\n",
       ".hrepr-object-table > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-object-table {\n",
       "\tdisplay: inline-block;\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-object-table > tbody > tr > td.hrepr-delimiter {\n",
       "\tpadding: 0px;\n",
       "}\n",
       "\n",
       "/* .hrepr-object-table > tbody > tr > td > * {\n",
       "\tdisplay: inline-block;\n",
       "} */\n",
       "\n",
       ".hrepr-object-kvpair {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tbackground: #eee;\n",
       "}\n",
       "\n",
       "/* Colorize boxes for standard data structures */\n",
       "\n",
       ".hrepr-dict { border: 1px solid var(--dict-color); }\n",
       ".hrepr-dict > .hrepr-title { background: var(--dict-color); }\n",
       "\n",
       ".hrepr-tuple { border: 1px solid var(--tuple-color); }\n",
       ".hrepr-tuple > .hrepr-title { background: var(--tuple-color); }\n",
       "\n",
       ".hrepr-list { border: 1px solid var(--list-color); }\n",
       ".hrepr-list > .hrepr-title { background: var(--list-color); }\n",
       "\n",
       ".hrepr-set { border: 1px solid var(--set-color); }\n",
       ".hrepr-set > .hrepr-title { background: var(--set-color); }\n",
       "\n",
       ".hrepr-frozenset { border: 1px solid var(--frozenset-color); }\n",
       ".hrepr-frozenset > .hrepr-title { background: var(--frozenset-color); }\n",
       "\n",
       ".hrepr-ellipsis {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-circular {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "</style><div class=\"hrepr\"><div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-v\"><table class=\"hrepr-object-table\"><tr><td><span class=\"hrepr-str\">hello</span></td><td class=\"hrepr-delimiter\"> ↦ </td><td><span class=\"hrepr-int\">1</span></td></tr><tr><td><span class=\"hrepr-str\">xyz</span></td><td class=\"hrepr-delimiter\"> ↦ </td><td><span class=\"hrepr-int\">3</span></td></tr></table></div><div class=\"hrepr-title\">}</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hrepr-dict hrepr-titled-h\"><div class=\"hrepr-title\">{</div><div class=\"hrepr-contents-v\"><table class=\"hrepr-object-table\"><tr><td><span class=\"hrepr-str\">hello</span></td><td class=\"hrepr-delimiter\"> ↦ </td><td><span class=\"hrepr-int\">1</span></td></tr><tr><td><span class=\"hrepr-str\">xyz</span></td><td class=\"hrepr-delimiter\"> ↦ </td><td><span class=\"hrepr-int\">3</span></td></tr></table></div><div class=\"hrepr-title\">}</div></div>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def no_underscores(obj, hrepr):\n",
    "    if isinstance(obj, dict):\n",
    "        return {k: v for k, v in obj.items() if not k.startswith('_')}\n",
    "    else:\n",
    "        return obj\n",
    "\n",
    "hrepr({'hello': 1, '_secret': 2, 'xyz': 3}, preprocess=no_underscores)"
   ]
  }
 ],
 "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.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
