Guía de Markdown¶

Índice¶

Introducción
Títulos
Énfasis
Código
Listas
Citas
Bloques de HTML
Líneas y caracteres especiales
Enlaces
Imágenes
Cuadros
Matemáticas

Introducción¶

Markdown es un lenguaje de marcas nacido para simplificar el desarrollo de páginas web. Provisto de una sintaxis muy simple, Markdown permite escribir un documento en texto plano, fácilmente legible, que luego el intérprete de este lenguaje convierte a HTML para que pueda ser procesado por un navegador. Por ejemplo, el código Markdown

Las *estaciones* del año son:
* primavera,
* verano,
* otoño,
* invierno.

es equivalente, en HTML, a

<p>Las <em>estaciones</em> del año son:</p>
<ul>
<li>primavera,</li>
<li>verano,</li>
<li>otoño,</li>
<li>invierno.</li>
</ul>

Como bien muestra este ejemplo, es obviamente mucho más fácil escribir y leer el código Markdown que el HTML.

Desarrollado inicialmente por John Gruber, existen hoy en día múltiples variantes e intérpretes de Markdown. En esta guía explicaremos la sintaxis de la versión llamada GFM (Github Flavoured Markdown), que es, esencialmente, la que se usa en las celdas de texto de un cuaderno Jupyter. Para ampliar detalles, cabe acudir a la especificación completa de este lenguaje.

En la mayor parte de los ejemplos que proporcionaremos se indica primero cuál es la entrada, esto es, el código Markdown que se introduce en la celda de texto, y se presenta después cuál es el resultado visible en la celda tras evaluar ésta (pulsando, por ejemplo, Shift + Return o Ctrl + Return).

Volver al índice

Títulos¶

Para generar el título de un apartado, se escribe de una a seis veces el carácter #, según el nivel que se quiera asignar al título:

# Título de primer nivel
## Título de segundo nivel
### Título de tercer nivel

Y así sucesivamente. Por ejemplo, el título principal de este documento se genera así:

# Guía de Markdown

Los títulos de primer y segundo nivel también se pueden obtener mediante un subrayado con los caracteres = (primer nivel) o -(segundo nivel), repetidos al menos tres veces. Por ejemplo,

Título de primer nivel
====

Título de segundo nivel
-----------------------

Volver al índice

Énfasis¶

Se puede resaltar el texto escribiéndolo en letra cursiva, en negrita, tachándolo o combinando estos estilos:

Entrada	Resultado
`Texto en cursiva`	Texto en cursiva
`_Texto en cursiva_`	Texto en cursiva
`Texto en negrita`	Texto en negrita
`Texto en negrita y _también cursiva_`	Texto en negrita y también cursiva
`_Texto en cursiva y también negrita_`	Texto en cursiva y también negrita
`~~Texto tachado~~`	~~Texto tachado~~

Volver al índice

Código¶

Para mostrar bloques de código de un lenguaje de programación, se anteponen cuatro espacios a cada línea de código, o bien se encierra todo el bloque entre dos líneas que contienen los caracteres \`\`\` (tres acentos graves) o \~\~\~ (tres tildes). En la primera línea, tras estos caracteres, se puede añadir el nombre del lenguaje de programación.

Ejemplo¶

```python
def dibujar(n, a=-2*pi, b=2*pi, **args):
    show(plot(x*sin(n*x), (x,a,b), **args))
dibujar(2, b=5*pi, color="green", frame=True)
```

def dibujar(n, a=-2*pi, b=2*pi, **args):
    show(plot(x*sin(n*x), (x,a,b), **args))
dibujar(2, b=5*pi, color="green", frame=True)

Volver al índice

Listas¶

En una lista no numerada, se marcan todos los ítems con uno de los siguientes caracteres: *, + o -. En las listas numeradas, cada ítem va precedido de un número y un punto; no hace falta que el número sea distinto en cada ítem. Las listas pueden estar anidadas. Asimismo, si además se añaden los caracteres [ ] o [x], se obtiene una lista de tareas.

Ejemplo¶

Asignaturas de primer curso de los grados de Ciencias y de Ciencia de Datos:

1. Grado de Ciencias
   * Primer cuatrimestre
     + Álgebra lineal
     + Cálculo I
     + Biología
     + Programación
     + Introducción a la Ciencia de Datos
   * Segundo cuatrimestre
     - Estadística I
     - Fundamentos de Física
     - Estructura de datos
     - Matemática discreta
     - Cálculo II
1. Grado de Ciencia de Datos
   * Primer cuatrimestre:
     1. Álgebra lineal
     1. Cálculo I
     1. Biología
     1. Programación
     1. Química
   * Segundo cuatrimestre:
     1. Estadística I
     1. Fundamentos de Física
     1. Química para las biociencias
     1. Bioquímica
     1. Cálculo II

Asignaturas de primer curso de los grados de Ciencias y de Ciencia de Datos:

Grado de Ciencias
- Primer cuatrimestre
  - Álgebra lineal
  - Cálculo I
  - Biología
  - Programación
  - Introducción a la Ciencia de Datos
- Segundo cuatrimestre
  - Estadística I
  - Fundamentos de Física
  - Estructura de datos
  - Matemática discreta
  - Cálculo II
Grado de Ciencia de Datos
- Primer cuatrimestre:
  1. Álgebra lineal
  2. Cálculo I
  3. Biología
  4. Programación
  5. Química
- Segundo cuatrimestre:
  1. Estadística I
  2. Fundamentos de Física
  3. Química para las biociencias
  4. Bioquímica
  5. Cálculo II

Ejemplo¶

Cosas que hacer el fin de semana:
- [ ] Ordenar la habitación
- [x] Salir con los amigos
- [x] Ver el partido de Osasuna
- [ ] Estudiar Cálculo II
- [x] Ayudar a mi hermano a hacer los deberes

Cosas que hacer el fin de semana:

[ ] Ordenar la habitación
[x] Salir con los amigos
[x] Ver el partido de Osasuna
[ ] Estudiar Cálculo II
[x] Ayudar a mi hermano a hacer los deberes

Volver al índice

Citas¶

Se antepone el signo > a cada línea del texto citado. Duplicando o triplicando este signo se obtienen más niveles de citas.

Ejemplo¶

Dámaso Alonso, poeta, filólogo y otrora director de la RAE,
afirmaba:
> Bécquer es el creador de uno de los mundos poéticos más
> simples, más hondos, más etéreos, más irreales y
> extraordinarios de los que la humanidad ha producido.

Dámaso Alonso, poeta, filólogo y otrora director de la RAE, afirmaba:

Bécquer es el creador de uno de los mundos poéticos más simples, más hondos, más etéreos, más irreales y extraordinarios de los que la humanidad ha producido.

Volver al índice

Bloques de HTML¶

En las celdas de texto se puede mezclar Markdown y HTML, pero, si se hace de cualquier manera, lo más probable es que el código Markdown no pueda ser interpretado. Las reglas concretas que cabe aplicar son un tanto complejas. No obstante, como regla general, hay que separar mediante líneas en blanco el código Markdown y las etiquetas HTML siempre que éstas sean, como div o p, de las que generan texto en modo resaltado.

Ejemplo¶

<p>
El **código Markdown** de este párrafo _no_ es procesado.
</p>

<p>

El **código Markdown** de este párrafo, en cambio, _sí_ es procesado.

</p>

El **código Markdown** de este párrafo _no_ es procesado.

El código Markdown de este párrafo, en cambio, sí es procesado.

Volver al índice

Líneas y caracteres especiales¶

Las líneas horizontales se generan escribiendo --- en un renglón aislado. También se puede usar *** o ___. En los tres casos, puede haber más de tres caracteres, los cuales, además, pueden estar separados por espacios en blanco. Así pues, es válido escribir, por ejemplo, * * * * para obtener la siguiente línea:

Para introducir un salto de línea, basta con terminar ésta con dos o más espacios en blanco o con <br>. Por último, si se antepone la barra inversa a un carácter, éste se comporta como un carácter ordinario y es escrito tal cual.

Ejemplo¶

Algunas \*palabras\* de este párrafo están acotadas por  
\*\*asteriscos\*\*, pero no son escritas en *cursiva* o  
**negrita** porque los asteriscos correspondientes están  
precedidos del carácter \\. Por cierto, los cinco primeros  
renglones de este párrafo acaban con dos espacios en  
blanco (no visibles).

Algunas *palabras* de este párrafo están acotadas por
**asteriscos**, pero no son escritas en cursiva o
negrita porque los asteriscos correspondientes están
precedidos del carácter \. Por cierto, los cinco primeros
renglones de este párrafo acaban con dos espacios en
blanco (no visibles).

Volver al índice

Enlaces¶

Toda dirección web escrita en la celda se transforma inmediatamente en un enlace, como, por ejemplo, http://www.unavarra.es. En cambio, para asociar un enlace a un texto, la sintaxis es

[texto](dirección_web "título")

o bien

[texto][etiqueta]

[etiqueta]: dirección_web "título"

El título, que se puede omitir, es el texto que se muestra al pasar el cursor sobre el enlace. En el segundo tipo de sintaxis, se sitúa [texto][etiqueta] en el punto en el que deba aparecer el enlace; la otra línea puede estar antes o después dentro de la celda. Si el texto y la etiqueta son iguales, se puede escribir simplemente [etiqueta] en lugar de [etiqueta][etiqueta].

Ejemplo¶

En la *web* de la [UPNA](http://www.unavarra.es/ "Universidad Pública de Navarra")
se puede encontrar información completa sobre los grados de [Ciencias] y de 
[Ciencia de Datos][CdD], así como sobre el doble grado de 
[Ciencia de Datos y Administración de Empresas][CdD+ADE].

[Ciencias]: http://www.unavarra.es/sites/grados/ciencias/ciencias/presentacion.html
[CdD]: http://www.unavarra.es/sites/grados/ciencias/ciencia-de-datos/presentacion.html
[CdD+ADE]: http://www.unavarra.es/sites/grados/ciencias/doble-ciencia-datos-ade/presentacion.html

En la web de la UPNA se puede encontrar información completa sobre los grados de Ciencias y de Ciencia de Datos, así como sobre el doble grado de Ciencia de Datos y Administración de Empresas.

La dirección_web puede ser también un identificador de la propia página, para así crear enlaces internos. Si se pasa el cursor sobre un título, por ejemplo, se puede ver el identificador que automáticamente se le ha asociado.

Ejemplo¶

Tras concluir la lectura de este apartado, quizá quieras volver al [principio](#Guía-de-Markdown) o revisar las secciones sobre [confección de listas](#Listas) o [bloques de HTML](#Bloques-de-HTML).

Tras concluir la lectura de este apartado, quizá quieras volver al principio o revisar las secciones sobre confección de listas o bloques de HTML.

Volver al índice

Imágenes¶

Si se arrastra una imagen sobre una celda de texto o, equivalentemente, si se selecciona ésta mediante el menú Edit▸ Insert Image del cuaderno Jupyter, se inserta un código de la forma

![texto_alternativo](attachment:nombre_del_fichero)

Al evaluar la celda, se muestra la imagen correspondiente. También se puede escribir este código directamente. Así pues, para incorporar, por ejemplo, el fichero bosque.jpg, que muestra la fotografía de un bosque en otoño, se podría escribir lo siguiente:

![Bosque en otoño](attachment:bosque.jpg)

Si la foto está localizable en internet, se puede proporcionar su dirección a modo de nombre del fichero.

Ejemplo¶

La página principal de la UPNA presenta uno de sus logotipos, en concreto, éste:
![Logotipo de la UPNA](http://www.unavarra.es/si/assets/img/core/upna-logo.svg)

La página principal de la UPNA presenta uno de sus logotipos, en concreto, éste:

El inconveniente de este modo de proceder es que no se puede regular el tamaño de la imagen. Para conseguir esto, no queda más remedio que usar directamente HTML.

Ejemplo¶

La siguiente fotografía muestra a los componentes del equipo iGEM 2019 de la UPNA, en el que participaron algunos estudiantes de los grados de Ciencias y de Ciencia de Datos:
<img src="http://www2.unavarra.es/gesadj/seccionActualidad/Fotos%20Notas%20Prensa/2019/06/06/Concurso%20iGEM.jpg" width="450px">

La siguiente fotografía muestra a los componentes del equipo iGEM 2019 de la UPNA, en el que participaron algunos estudiantes de los grados de Ciencias y de Ciencia de Datos:

Volver al índice

Cuadros¶

La sintaxis para la construcción de cuadros es bastante simple. Ha de seguir el siguiente esquema:

| Cabecera 1 | Cabecera 2 | ... | Cabecera n |
|------------|------------|-----|------------|
| Celda 11   | Celda 12   | ... | Celda 1n   |
| Celda 21   | Celda 22   | ... | Celda 2n   |
| ...        | ...        | ... | ...        |
| Celda m1   | Celda m2   | ... | Celda mn   |

No hace falta que, como en este esquema, el contenido de las columnas esté alineado; no obstante, facilita la lectura del código. Se obtiene el cuadro siguiente:

Cabecera 1	Cabecera 2	...	Cabecera n
Celda 11	Celda 12	...	Celda 1n
Celda 21	Celda 22	...	Celda 2n
...	...	...	...
Celda m1	Celda m2	...	Celda mn

Si se quiere tener un mayor control sobre la presentación del cuadro, es preciso recurrir a HTML y CSS.

Ejemplo¶

El cuadro siguiente muestra los valores de las temperaturas en Pamplona a lo largo del año, expresadas en ºC, así como las precipitaciones mensuales, medidas en mm:

| Mes | Temp. mínima | Temp. media | Temp. máxima | Precipitaciones |
|------------|------|------|------|----|
| enero      |  1.2 |  5   | 8.9  | 63 |
| febrero    |  1.9 |  6.5 | 11.1 | 52 |
| marzo      |  3.3 |  8.6 | 14   | 52 |
| abril      |  4.9 | 10.2 | 15.5 | 77 |
| mayo       |  8.2 | 14   | 19.8 | 74 |
| junio      | 11.2 | 17.5 | 23.9 | 47 |
| julio      | 13.7 | 20.7 | 27.6 | 40 |
| agosto     | 14   | 20.9 | 27.8 | 43 |
| septiembre | 11.7 | 18   | 24.4 | 43 |
| octubre    |  8.4 | 13.6 | 18.7 | 74 |
| noviembre  |  4.3 |  8.6 | 12.8 | 80 |
| diciembre  |  2.4 |  6   |  9.7 | 75 |

El cuadro siguiente muestra los valores de las temperaturas en Pamplona a lo largo del año, expresadas en ºC, así como las precipitaciones mensuales, medidas en mm:

Mes	Temp. mínima	Temp. media	Temp. máxima	Precipitaciones
enero	1.2	5	8.9	63
febrero	1.9	6.5	11.1	52
marzo	3.3	8.6	14	52
abril	4.9	10.2	15.5	77
mayo	8.2	14	19.8	74
junio	11.2	17.5	23.9	47
julio	13.7	20.7	27.6	40
agosto	14	20.9	27.8	43
septiembre	11.7	18	24.4	43
octubre	8.4	13.6	18.7	74
noviembre	4.3	8.6	12.8	80
diciembre	2.4	6	9.7	75

Volver al índice

Matemáticas¶

Markdown no tiene, propiamente, ningún modo propio de escritura de fórmulas o expresiones matemáticas. No obstante, en las celdas de texto de un cuaderno Jupyter, es posible incluir texto matemático escrito en lenguaje LaTeX, que es convertido en HTML y CSS por un intérprete llamado MathJax para que así pueda ser mostrado en el navegador.

MathJax procesa todo el texto que se encuentre en modo matemático, del cual se distinguen dos tipos. Se escriben en el modo ordinario las expresiones matemáticas que se entremezclan en los párrafos con el texto normal. El modo resaltado se emplea para destacar una expresión matemática, mostrándola en uno o más renglones separados del texto que la rodea. En una celda de un cuaderno Jupyter, la sintaxis que corresponde a cada modo es la siguiente:

modo ordinario: \$expresión matemática\$ o bien $expresión_matemática$ ,
modo resaltado: \\[expresión_matemática\\] o bien $$expresión_matemática$$.

En este último modo, los caracteres que acotan la expresión pueden estar en líneas independientes. Observemos asimismo que la duplicación de la barra inversa se debe a que la celda es leída primero por Markdown, lenguaje en el que, como en LaTeX, tal carácter tiene un significado especial. En LaTeX estándar, o en otro entorno de uso de MathJax, se escribe directamente $...$ o \[...\]. Hay también otros modos de entrar en modo matemático resaltado.

Nos conformaremos aquí con dar sólo un ejemplo.

Ejemplo¶

La igualdad $(a+b)^2=a^2+b^2+2ab$ no es más que un caso particular de la fórmula conocida como *binomio de Newton*:
$$
  (a+b)^n = \sum_{k=0}^n \binom{n}{k} a^{n-k}b^k.
$$
En efecto, si $n=2$, esta fórmula establece que
$$
  (a+b)^2 = \binom{2}{0} a^2 + \binom{2}{1} ab + \binom{2}{2} b^2. 
$$
Pero
$$
  \binom{2}{0}=\binom{2}{0}=1 \qquad\text{y}\qquad \binom{2}{1}=2,
$$
de donde resulta la igualdad mencionada.

La igualdad $(a+b)^2=a^2+b^2+2ab$ no es más que un caso particular de la fórmula conocida como binomio de Newton: $$ (a+b)^n = \sum_{k=0}^n \binom{n}{k} a^{n-k}b^k. $$ En efecto, si $n=2$, esta fórmula establece que $$ (a+b)^2 = \binom{2}{0} a^2 + \binom{2}{1} ab + \binom{2}{2} b^2. $$ Pero $$ \binom{2}{0}=\binom{2}{0}=1 \qquad\text{y}\qquad \binom{2}{1}=2, $$ de donde resulta la igualdad mencionada.

Volver al índice

Celda de configuración. La evaluación de la celda siguiente cambia el formato por omisión de este cuaderno.

%%html
<style>
h1{text-align: center; color: rgb(185,74,72);}
h2{text-align: center; color: rgb(0,102,0); padding: 0.25em 0;
   border: 2px solid rgb(0,191,0); border-width: 2px 0;}
h3{border-bottom: 2px solid rgb(153,153,153);} 
h4{color: rgb(58,135,173); font-size: 115%!important;
   font-weight: bold!important;}
.text_cell_render{font-family: "Trebuchet MS",Geneva,sans-serif;
                  font-size: 110%; line-height: 1.5;}
.MathJax_Display{margin: 0.5em 0;}
th, td{font-size: larger;}
hr.ejemplo{border: 1px solid rgb(58,135,173); background: white;}
hr.medio{border: 1px dashed gray; background: white;}
</style>

Realizado por Juan José Torrens para la asignatura de Cálculo II
Grados de Ciencias y de Ciencia de Datos
Universidad Pública de Navarra
Última versión: 15-1-2021