Agregar bloque de alerta personalizado en plantilla de Notebook

Author: nicoguaro

notebooks/xx_plantilla.ipynb

@@ -108,6 +108,27 @@
     "</div>"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Si queremos un recuadro con colores personalizados podemos usar el siguiente\n",
+    "bloque de código\n",
+    "\n",
+    "```html\n",
+    "<div class=\"alert alert-info\"\n",
+    "    style=\"color:#3c3c3c;background-color:#fd9df5;border-color:#9d6097\">\n",
+    "  <strong>¡Aviso!</strong> Este es un bloque con colores personalizados.\n",
+    "</div>\n",
+    "```\n",
+    "\n",
+    "\n",
+    "<div class=\"alert alert-info\"\n",
+    "    style=\"color:#3c3c3c;background-color:#fd9df5;border-color:#9d6097\">\n",
+    "  <strong>¡Aviso!</strong> Este es un bloque con colores personalizados.\n",
+    "</div>\n"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": 4,
@@ -174,140 +195,6 @@
     "\n",
     "2. Referencia bibliográfica 2."
    ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "La siguiente celda cambia el formato del Notebook."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "\n",
-       "<link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet' type='text/css'>\n",
-       "<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic' rel='stylesheet' type='text/css'>\n",
-       "<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'>\n",
-       "\n",
-       "<style>\n",
-       "\n",
-       "/*\n",
-       "Template for Notebooks for Modelación computacional.\n",
-       "\n",
-       "Based on Lorena Barba template available at:\n",
-       "\n",
-       "    https://github.com/barbagroup/AeroPython/blob/master/styles/custom.css\n",
-       "*/\n",
-       "\n",
-       "/* Fonts */\n",
-       "@font-face {\n",
-       "font-family: \"Computer Modern\";\n",
-       "src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');\n",
-       "}\n",
-       "\n",
-       "/* Text */\n",
-       "div.cell{\n",
-       "width:800px;\n",
-       "margin-left:16% !important;\n",
-       "margin-right:auto;\n",
-       "}\n",
-       "h1 {\n",
-       "font-family: 'Alegreya Sans', sans-serif;\n",
-       "}\n",
-       "h2 {\n",
-       "font-family: 'Fenix', serif;\n",
-       "}\n",
-       "h3{\n",
-       "font-family: 'Fenix', serif;\n",
-       "margin-top:12px;\n",
-       "margin-bottom: 3px;\n",
-       "}\n",
-       "h4{\n",
-       "font-family: 'Fenix', serif;\n",
-       "}\n",
-       "h5 {\n",
-       "font-family: 'Alegreya Sans', sans-serif;\n",
-       "}\t\n",
-       "div.text_cell_render{\n",
-       "font-family: 'Alegreya Sans',Computer Modern, \"Helvetica Neue\", Arial, Helvetica, Geneva, sans-serif;\n",
-       "line-height: 135%;\n",
-       "font-size: 120%;\n",
-       "width:600px;\n",
-       "margin-left:auto;\n",
-       "margin-right:auto;\n",
-       "}\n",
-       ".CodeMirror{\n",
-       "font-family: \"Source Code Pro\";\n",
-       "font-size: 90%;\n",
-       "}\n",
-       "/* .prompt{\n",
-       "display: None;\n",
-       "}*/\n",
-       ".text_cell_render h1 {\n",
-       "font-weight: 200;\n",
-       "font-size: 50pt;\n",
-       "line-height: 100%;\n",
-       "color:#CD2305;\n",
-       "margin-bottom: 0.5em;\n",
-       "margin-top: 0.5em;\n",
-       "display: block;\n",
-       "}\t\n",
-       ".text_cell_render h5 {\n",
-       "font-weight: 300;\n",
-       "font-size: 16pt;\n",
-       "color: #CD2305;\n",
-       "font-style: italic;\n",
-       "margin-bottom: .5em;\n",
-       "margin-top: 0.5em;\n",
-       "display: block;\n",
-       "}\n",
-       ".warning{\n",
-       "color: rgb( 240, 20, 20 )\n",
-       "}\n",
-       "</style>\n",
-       "\n",
-       "<script>\n",
-       "/* Equations */\n",
-       "\n",
-       "MathJax.Hub.Config({\n",
-       "TeX: {\n",
-       "extensions: [\"AMSmath.js\"]\n",
-       "},\n",
-       "tex2jax: {\n",
-       "inlineMath: [ ['$','$'], [\"\\\\(\",\"\\\\)\"] ],\n",
-       "displayMath: [ ['$$','$$'], [\"\\\\[\",\"\\\\]\"] ]\n",
-       "},\n",
-       "displayAlign: 'center', // Change this to 'center' to center equations.\n",
-       "\"HTML-CSS\": {\n",
-       "styles: {'.MathJax_Display': {\"margin\": 4}}\n",
-       "}\n",
-       "});\n",
-       "</script>\n",
-       "\n",
-       "\n"
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": 1,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "from IPython.core.display import HTML\n",
-    "def css_styling():\n",
-    "    styles = open('./nb_style.css', 'r').read()\n",
-    "    return HTML(styles)\n",
-    "css_styling()"
-   ]
   }
  ],
  "metadata": {
@@ -326,7 +213,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.12.3"
+   "version": "3.11.5"
   },
   "varInspector": {
    "cols": {