Saltar al contenido principal
InicioTutorialesDataLab

Tutorial de Markdown en Jupyter Notebook

En este tutorial, aprenderás a utilizar y escribir con diferentes etiquetas de marcado utilizando Jupyter Notebook.
may 2024  · 9 min leer

Markdown es un lenguaje de marcado ligero y popular que constituye un estándar de escritura para científicos y analistas de datos. A menudo se convierte en el HTML correspondiente mediante el procesador Markdown, lo que permite compartirlo fácilmente entre distintos dispositivos y personas.

El lenguaje de marcado es similar al Lenguaje de Marcado de Hipertexto (HTML) hecho de etiquetas de marcado, y consiste en la etiqueta de apertura <tagname> y la etiqueta de cierre </tagname>.

En este tutorial, se puede ver el mismo resultado obtenido mediante el uso de etiquetas Markup, y también la sintaxis Markdown que es compatible con Jupyter Notebook.

Necesitas tener Jupyter Notebook, el entorno se puede configurar utilizando el tutorial de DataCamp: Tutorial de Jupyter Notebook: La guía definitiva.

Las celdas Markdown pueden seleccionarse en Jupyter Notebook utilizando el desplegable o también mediante el atajo de teclado 'm/M' inmediatamente después de insertar una nueva celda.

celda markdown

Empieza a aprender Python gratis

Writing Functions in Python

BeginnerSkill Level
4 hr
83.2K learners
Learn to use best practices to write maintainable, reusable, complex functions with good documentation.

Run and edit the code from this tutorial online

Run Code

Rúbricas

Los títulos comienzan con "#", es decir, el símbolo de almohadilla seguido de un espacio, y hay seis títulos: el más grande sólo utiliza un símbolo de almohadilla y los más pequeños, seis.

# (Cabecera 1, título)

## (Encabezado 2, títulos principales)

### (Encabezado 3, subencabezados)

#### (Cabecera 4)

##### (Cabecera 5)

###### (Cabecera 6)``

Como alternativa, los encabezamientos pueden comenzar con etiquetas de marcado, es decir, de h1 a h6 con las siguientes sintaxis.

<h1>Cabecera 1,título<h1>
<h2>Cabecera 2,títulos principales<h2>
<h3>Cabecera 3,subtítulos<h3>
<h4>Cabecera 4<h4>
<h5>Cabecera 5<h5>
<h6>Cabecera 6<h6>

Ambas sintaxis pueden mostrar los encabezados de h1 a h6 después de hacer clic en "Ejecutar" en la barra de herramientas.

Rúbricas

Blockquotes

Las comillas de bloque pueden contener grandes trozos de texto y suelen ir sangradas. Se pueden obtener utilizando el símbolo de Markdown <> o con <blockquote>texto para blockquote</blockquote>.

  • >Esto es bueno
  • <blockquote>Esto es bueno</blockquote>

Ambas sintaxis pueden mostrar el texto en forma sangrada después de hacer clic en "Ejecutar" en la barra de herramientas.

Blockquotes

Sección del Código

La sección Código es la parte que especifica el código de los diferentes lenguajes de programación y se puede representar donde el código inline comienza con ' `inline code goes here` ' tildes a su alrededor, pero el bloque de código comienza con tres tildes ' `` block line code goes here ``` ' '. Además, la etiqueta Markup para una sección de Código es ' <code>code va aquí<code> '.

El ejemplo de código en línea se da a continuación:
`x =5`

Usted puede ver después de hacer clic en "Ejecutar" el código en línea se presenta con el resaltado del código.

Sección del Código

A continuación se ofrecen ejemplos de secciones de código:

    • Uso de Markdown
    • ```Python
      str = "Esto es código a nivel de bloque"
      print(str)
      ```
    • Uso de etiquetas de marcado
    • <code>Python
      str = "Este es un código a nivel de bloque"
      print(str)
    </code>

Usando Markdown, puede obtener el resaltado de sintaxis del código si el nombre del lenguaje de programación se menciona después de las tres marcas '```' y el ejemplo se da a continuación:

Sección del Código

Usando Markdown, no obtendrá resaltado de sintaxis, pero el código se resalta:

Sección del Código

Símbolo matemático

El símbolo matemático en Markdown se incluye en '\$ expresión matemática va aquí \$' encerrado en un símbolo de dólar y en Markup puede seguir este enlace para más detalles: Operadores matemáticos. A continuación puedes ver un ejemplo del uso de los símbolos matemáticos.

\$\sqrt{k}$

El ejemplo anterior mostrará la expresión matemática en negrita.

Símbolo matemático

Salto de línea

La etiqueta de salto de línea comienza con la etiqueta <br> sin etiqueta de cierre que rompe la línea, y el contenido restante comienza con una nueva línea con el ejemplo que se muestra a continuación.

The line breaks after using <br> br tags and it is awesome.

Después de hacer clic en "Ejecutar" en la barra de herramientas, puede ver el salto de línea después de usar la etiqueta <br>. El resto del texto comienza en una nueva línea.

Salto de línea

Texto en negrita y cursiva

Puede utilizar etiquetas <b>, '**' es decir, 'doble asterisco' o '__' es decir, 'doble guión bajo' para obtener texto en negrita con la siguiente sintaxis.

  • <b>Esto es texto en negrita</b>
  • ** Esto es texto en negrita
  • Esto es texto en negrita

Todas las sintaxis anteriores pueden mostrar texto en negrita después de hacer clic en "Ejecutar" en la barra de herramientas.

Texto en negrita y cursiva

Puede utilizar etiquetas <i>, '*' es decir, asterisco simple o '_' es decir, guión bajo simple para obtener el texto en cursiva para la siguiente sintaxis.

    • <i>Esto es texto en cursiva </i>.
    • * Esto es texto en cursiva
    • Esto es texto en cursiva

Todas las sintaxis anteriores pueden mostrar el texto en cursiva después de hacer clic en "Ejecutar" en la barra de herramientas.

Texto en negrita y cursiva

Horizontal Line

Puede obtener una línea horizontal utilizando Markdown '---' tres guiones o etiquetas Markup <hr>.

Ambas sintaxis harán que la línea horizontal cruce de un extremo a otro después de hacer clic en "Ejecutar".

Horizontal Line

Lista ordenada

La Lista ordenada es la lista numerada que se obtiene comenzando con la etiqueta <ol> y terminando con la etiqueta </ol> con el elemento requerido entre las etiquetas <li> y </li>. La etiqueta, es decir, "ol", es la forma abreviada de una lista ordenada y "li" es la forma abreviada del elemento de la lista. Por ejemplo, puede ver a continuación la Lista ordenada que contiene el artículo para la lista de la compra.

<ol>
<li>Pescado</li>
<li>Huevos</li>
<li>Queso</li>
</ol>

Alternativamente, puede enumerar por '1. ' es decir, el número requerido seguido de espacio con el ejemplo que se da a continuación.

  1. Pescado
  2. Huevos
  3. Queso

Ambas sintaxis pueden generar la lista numerada tras hacer clic en "Ejecutar" en la barra de herramientas.

Lista ordenada

Lista desordenada

La lista desordenada es una lista con viñetas que se obtiene utilizando la etiqueta <ul> y terminando con la etiqueta </ul>, véase el ejemplo siguiente:

<ul>
<li>Pescado</li>
<li>Huevos</li>
<li>Queso</li>
</ul>

Alternativamente, la lista desordenada puede empezar con el símbolo '-' con espacio, que da el símbolo de círculo negro y también puede empezar con el símbolo '*' con espacio, que da el símbolo de cuadrado negro.

- Pescado
- Huevos
- Queso

El ejemplo anterior muestra que la lista de viñetas contiene el símbolo '-' seguido de un espacio con los elementos que da el símbolo del círculo negro.

Las dos sintaxis anteriores pueden dar el mismo resultado siguiente, en el que los elementos de la lista aparecen en el círculo negro, después de hacer clic en "Ejecutar" en la barra de herramientas.

Lista desordenada

Enlace interno y externo

Enlace interno en Markdown comienza con <a> etiqueta con id único definido por el atributo <id> que se puede vincular en el cuaderno con el ejemplo de abajo:

<a id = "division_ID"text goes here></a>

Además, el id definido anteriormente puede vincularse a la sección del cuaderno siguiendo el código que hace que se pueda hacer clic en el enlace.

[Título de la sección](#division_ID)

El ejemplo de lo anterior se puede ver a continuación, donde el id definido está vinculado con la sección y el enlace clicable obtenido después de hacer clic en "Ejecutar" en la barra de herramientas.

Enlace interno y externo

Enlace externo en Markdown comienza con <a> y termina con <a> etiqueta, es decir, <a> significa ancla que define el enlace, y tiene atributo 'href' también llamado como hiper referencia que contiene la dirección de destino del enlace o URL y textos entre las etiquetas es visible y se puede hacer clic para abrir la dirección de destino como se muestra a continuación.

<a> href="https://www.google.com">Enlace a Google</a>

Alternativamente, también podría empezar con __[enlace de texto](URL del sitio)__ donde el doble guión bajo está a ambos lados con el enlace de texto encerrado entre corchetes y la URL del sitio entre paréntesis seguida de la URL.

Enlace a Google

Las dos sintaxis anteriores pueden dar el mismo resultado a continuación, donde el texto pulsable y subrayado puede llevar a una nueva página después de pulsar "Ejecutar" en la barra de herramientas.

Enlace interno y externo

Cuadro

La Tabla contiene la información en filas y columnas y se construye mediante la combinación de '|' es decir, 'tubo vertical' para separar cada columna y '-' es decir, símbolo de guión para crear la cabecera donde la línea en blanco, es decir, una combinación de tubo vertical y guiones para dar el formato de tabla.

Además, puedes variar las celdas alineándolas aproximadamente con las columnas, y el bloc de notas redimensionará automáticamente el contenido de la celda en cuestión.

|Name|Address|Salary| |-----|-------|------| |Hanna|Brisbane|4000| |Adam|Sydney|5000|

Alternativamente, el Markdown se puede utilizar para construir tablas donde < tabla> se utiliza para definir una tabla con su anchura en porcentajes.<tr> establece fila de la tabla que da la negrita con el texto centrado junto con el encabezado de la tabla se describe por <th> está en la parte superior de la tabla con las otras entradas en la tabla se establecen por el <td> es decir, etiqueta de datos de la tabla.

<table style="width:20%">
<tr>
<th><Nombre></th>
<th><Dirección></th>
<th><Salario></th>
</tr>

<tr>
<td><Hanna></td>
<td><Brisbane></td>
<td><4000></td>
</tr>

<tr>
<td><Adam></td>
<td><Sydney></td>
<td><5000></td>
</tr>
</table>

Ambas sintaxis pueden dar el mismo resultado después de hacer clic en "Ejecutar" en la barra de herramientas.

Cuadro

Imágenes

Puede insertar una imagen desde la barra de herramientas eligiendo "Insertar imagen" en el menú Edición y puede buscar la imagen deseada como se muestra a continuación.

Imágenes

Imágenes

La imagen puede contener la etiqueta Markdown <img> con fuente, es decir, src como un atributo que consiste en el enlace a la imagen con propiedades opcionales como anchura y altura, y el ejemplo de ello es el siguiente.

<img> <src="https://i.imgur.com/WWrydEh.png" width ="500" height=500 >

Los dos procesos anteriores pueden renderizar la misma imagen después de hacer clic en "Ejecutar" en la barra de herramientas.

imagen

Conclusión

En este tutorial, usted ha aprendido acerca de las diferentes etiquetas Markup, que se define por el lenguaje Markup y también la sintaxis relacionada con las celdas Markdown específicas para el Jupyter Notebook que se utiliza junto con el código para describir el contenido de manera más eficaz.

Si quieres saber más sobre Markdown, echa un vistazo a la Guía Markdown.

Temas

Cursos de Python

Course

Introduction to Python

4 hr
5.5M
Master the basics of data analysis with Python in just four hours. This online course will introduce the Python interface and explore popular packages.
See DetailsRight Arrow
Start Course
Ver másRight Arrow
Relacionado

tutorial

Tutorial de introducción a JupyterLab

En este artículo, le presentaremos JupyterLab, uno de los IDE más populares para la ciencia de datos.

Javier Canales Luna

7 min

tutorial

Cómo utilizar Jupyter Notebooks: La guía definitiva

Este artículo explica qué son los blocs de notas y por qué deberías utilizarlos. También profundizamos en los cuadernos alojados, que facilitan el intercambio y la colaboración. Este artículo también incluye consejos, trucos y atajos de teclado.
Adam Shafi's photo

Adam Shafi

25 min

tutorial

Tutorial de GitHub y Git para principiantes

Un tutorial para principiantes que muestra cómo funciona el control de versiones Git y por qué es crucial para los proyectos de ciencia de datos.
Abid Ali Awan's photo

Abid Ali Awan

17 min

tutorial

Tutorial de Docstrings en Python

Aprende sobre las Docstrings de Python. Encuentra diferentes ejemplos y tipos de formato de docstrings para Sphinx, Numpy y Pydoc.
Aditya Sharma's photo

Aditya Sharma

15 min

tutorial

Función del guión bajo(_) en el tutorial de Python

En este tutorial, vas a aprender sobre los usos del guión bajo(_) en python.
Hafeezul Kareem Shaik's photo

Hafeezul Kareem Shaik

8 min

tutorial

Introducción al trazado con Matplotlib en Python

Este tutorial muestra cómo utilizar Matplotlib, una potente biblioteca de visualización de datos en Python, para crear gráficos de líneas, barras y dispersión con datos bursátiles.

Kevin Babitz

25 min

See MoreSee More