1

estaba trabajando en Jupyter con kernel de Python 3.5, y es un maravilloso reemplaso de Mathematica, en las celdas puedes seleccionar el tipo markdown y la celda te admitirá código HTML para modificar estructuras títulos y textos, uso con facilidad muchas etiqutas de HTML sin problemas sin necesidad de utilizar las etiqueta body pero ¿si quieres cambiar el color del título? intenté usar código CSS en una celda:

<head>
    <style>
    h1{
        color: green;
    }
    </style>
</head>
<h1>El titulo</h1>

pero no funcionó e intenté de otras formas (incluyendo la etiqueta "body") pero no pude, alguien saber si se puede implementar CSS con el código HTML en Jupyter.

1
  • Depende, este código html se renderiza en un explorador cierto ? (Google Chrome Mozilla) o es una aplicación independiente ? Commented el 4 jul. 2016 a las 2:24

2 respuestas 2

2

Tienes varias opciones:

  • Jupyter usa Bootstrap por lo que puedes usar las propias clases de bootstrap para customizar tu etiqueta <H1>. Esto te limita a Bootstrap...

  • Puedes introducir el estilo inline en la etiqueta que estés usando dentro de la celda Markdown: <H1 style="color: green;">Mi Título</H1>.

  • Puedes meter tu estilo directamente dentro de tu hoja de estilos. En Jupyter se puede usar el fichero custom.css del perfil del usuario. Para saber donde está la carpeta custom puedes usar el siguiente código (más abajo) dentro de una celda de código del notebook:

Código para saber la ruta en la que encontrar tu carpeta custom:

import jupyter_core
jupyter_core.paths.jupyter_config_dir()
1

Para meter estilos en un notebook tienes que meter los estilos en una celda HTML, que no está entre los tipos seleccionables.

El kernel de python, IPython, permite cambiar la salida para que sea html en lugar de texto. La forma más directa es usando el comando mágico %%html de la siguiente manera, introduciéndolo en una casilla de código python:

%%html
<style>
h1 {
 color: green;
 font-size: 5em !important;
}
</style>

Según el estilo, necesitarás añadir el !important para que sobreescriba los demás estilos que pueda estar heredando.

El problema ahora es ocultar esta celda para que no moleste. Hay varias formas, incluso extensiones de jupyter para hacerlo.

Suponiendo que sea la primera celda del notebook, un modo simple es añadirle código jquery para que se autooculte, algo tal que así:

%%html
<style>
h1 {
 color: green;
 font-size: 5em !important;
}
</style>
<script> 
$( document ).ready(function () {
    $("div#notebook-container").children().first().hide();
});
</script>

Si quieres volver a mostrar la primera celda, introduce en otra celda el código jquery para mostrarla:

%%javascript
$("div#notebook-container").children().first().show();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.