Escribir código HTML no es fácil debido a la cantidad de etiquetas que hay que recordar, además, una vez escrito, intentar leer ese texto es muy difícil, por culpa precisamente de la cantidad de etiquetas intercaladas.

Markdown es una forma de escribir texto, aparentemente sin formato, aunque en realidad tiene un “formato ligero”. El texto creado con Markdown es fácil de escribir y de leer. Por tanto es ideal para crear documentos HTML, por ejemplo, muy útil para la creación de artículos en un blog.

Ejemplo:
Mis Memorias
-----------------------
## Puntos a tratar ##
* Lugar de nacimiento
* Lugar de trabajo

El resultado en un navegador sería este:

Mis Memorias

Puntos a tratar

Lugar de nacimiento
Lugar de trabajo

El objetivo es pasar ese texto posteriormente a HTML pero escribiendo y leyendo de forma fácil.
Algo escrito en Markdown (MD), tiene una apariencia de estar escrito en texto plano, pero si ese texto, mediante un programa especial intérprete de MD, lo pasamos a HTML, de repente aparece un texto bonitamente formateado.

Para escribir en Markdown sólo necesitamos el más sencillo de los editores de texto. El problema es que no sería exportable a HTML, por tanto, lo mejor es tener un programa editor de textos que a su vez permita la exportación a HTML desde el mismo. Por ejemplo: Haroopad. Esto es similar a escribir un programa en un lenguaje de programación, necesitamos el compilador para pasarlo a código máquina y que se pueda ejecutar.

En la propia web del creador de MD hay un enlace a un editor online para MD.

Hay que tener en cuenta que algunos programas interpretes de MD pueden ofrecer resultados un poco diferentes al tener otras funcionalidades.
Ejemplo de texto Markdown:

TITULO DEL CAPÍTULO  
====================  
Esto está escrito normal.   
Lo que viene a continuación: *Esto está en cursiva*  
Y esto otro: **Está en negrita**  
Y esta es mi lista de la compra:  
-------------------------------------  
* Pan  
* Agua  
* Leche

Como se puede ver, es fácil de leer. Con el programa adecuado, se podría exportar a formato HTML quedando:

<h1 id="titulo-del-capítulo"><a name="titulo-del-capítulo" 
href="#titulo-del-capítulo"></a>TITULO DEL CAPÍTULO</h1>
<p>Esto está escrito normal.<br>Lo que viene a continuación: 
<em>Esto está en cursiva</em><br>Y esto otro: 
<strong>Está en negrita</strong>  </p>
<h2 id="y-esta-es-mi-lista-de-la-compra:">
<a name="y-esta-es-mi-lista-de-la-compra:
" href="#y-esta-es-mi-lista-de-la-compra:"></a>
Y esta es mi lista de la compra:</h2>
<ul>
<li>Pan</li>
<li>Agua</li>
<li>Leche</li>
</ul>

Lo cual ya no es nada fácil de leer, ya que el texto queda muy entremezclado con las marcas HTML. Si llevamos el HTML a un navegador, el texto se vería así:

TITULO DEL CAPÍTULO

Esto está escrito normal.
Lo que viene a continuación: Esto está en cursiva
Y esto otro: Está en negrita

Y esta es mi lista de la compra:

Pan
Agua
Leche

Por tanto, queda clara ya la utilidad de MD, escribir y leer texto aparentemente sin formato, pero que al traducirlo a HTML, aparece formateado.

Saltos de línea y párrafos

Si se quiere poner un salto de línea manual, Y SEGUIR EN EL MISMO PÁRRAFO hay que terminar la línea con 2 o más espacios y pulsar ENTER. Esto hace el salto de línea pero no de párrafo. Por tanto no vale pulsar simplemente ENTER, ya que el texto en el editor aparecería en otra línea pero al traducirlo a HTML, estaría en la misma línea.
Otra forma de comenzar en otra línea y en otro párrafo, es dejando una línea en blanco entre 2 líneas de texto. En este caso el resultado son 2 líneas de texto con un salto en medio. Tendríamos 2 párrafos.

Ejemplo:

Parrafo 1. (Aquí se supone que hay 2 espacios + ENTER)
Sigo en párrafo 1.

Parrafo 2.

Parrafo 3.

En HTML:

<p>Parrafo 1. <br />
Sigo en párrafo 1.</p>

<p>Parrafo 2.</p>

<p>Parrafo 3.</p>

El fin de línea manual, con el uso de 2 o más espacios seguidos de ENTER, al traducirlo a HTML, insertará un <br> o un <br />. (Según W3C, todos los tags que no requieren tag de cierre, deben autocerrarse agregando un slash antes de terminar la etiqueta). Aquí se pueden encontrar diferencias entre intérpretes de MD.

Hay que tener en cuenta, que en MD, al igual que en HTML, los tabuladores o espacios seguidos se convierten en un solo espacio, por tanto no deben usarse para tabular el texto, ya que no lo hará.

En la siguiente imagen, se ve un intento fallido de tabular texto mediante espacios y tabuladores.

Énfasis

MD permite marcar fácilmente texto en cursiva y en negrita. Para esto utiliza el asterisco (*) y el guión bajo (_) como indicadores del énfasis (cursiva y negrita). Da igual un símbolo que otro, son equivalentes, hacen lo mismo.

Para colocar un texto en cursiva, debe quedar el texto entre los símbolos, es decir, tener el símbolo elegido al comienzo y otro al final, importante; NO puede haber un espacio a la derecha del primer símbolo ni a la izquierda del último.
Ejemplo:
Me gusta *la cursiva mucho.*
La utilizo *alguna vez*, pero no siempre.

En la web se vería así:

Me gusta la cursiva mucho.

La utilizo alguna vez, pero no siempre.

Si quiero poner algo en negrito, utilizo 2 símbolos al comienzo y 2 al final:

Me gusta **la negrita mucho.**

La utilizo __alguna vez__, pero no siempre.

En la web se vería así:

Me gusta la negrita mucho.
La utilizo alguna vez, pero no siempre.

También se pueden combinar:
Las 2 mezcladas _**me encantan**_.

En la web se vería así:
Las 2 mezcladas me encantan.

Backslash Escapes

Hemos visto que, por ejemplo el asterisco, tiene un significado especial para MD; si en alguna ocasión lo queremos usar pero sin el significado que le da MD, deberemos “escapar” el caracter utilizando el carácter especial backslash “\”. De esta forma el carácter ya no es interpretado y pasa a ser un literal mas dentro del texto.

MD proporciona los escapes del backslash para los siguientes caracteres:
\ backslash (barra invertida)
` backtick (acento grave)
* asterisk (asterisco)
_ underscore (subrayado)
{} curly braces (llaves)
[] square brackets (corchetes)
() parentheses (paréntesis)
# hash mark (almohadilla)
. dot (punto)
! exclamation mark (exclamación)

¿Que pasa entonces si quiero poner una palabra entre asteriscos? Por ejemplo si yo quiero que el resultado sea exactamente:
*Asturias*
Y no Asturias en cursiva. ¿Cómo lo hago para que MD no lo interprete como cursiva? En ese caso, le ponemos delante la barra inclinada a la izquierda “\” (escape) para que MD no lo tenga en cuenta. Por tanto deberíamos escribir:
\*Asturias\*

Todo el código anterior una vez pasado de MD a HTML quedaría así:

<p>*Asturias* <br />
Me gusta <em>la cursiva mucho.</em> <br />
Esto no está * en cursiva * por culpa de los espacios. <br />
La utilizo <em>alguna vez</em>, pero no siempre. 
Me gusta <strong>la negrita mucho.</strong> <br />
La utilizo <strong>alguna vez</strong> pero no siempre. <br />
Las 2 mezcladas <em><strong>me encantan</strong></em>.</p>

En la web se vería de la siguiente forma:

*Asturias*
Me gusta la cursiva mucho.
La utilizo alguna vez, pero no siempre.
Me gusta la negrita mucho.
La utilizo alguna vez pero no siempre.
Las 2 mezcladas me encantan.

HTML vs Markdown

Markdown está pensado para escribir textos para la web, textos sencillos, como las entradas de los blogs. NO es un sustituto de HTML, ya que este es más completo (y complejo).

Si algo no está disponible en MD, podemos usar directamente las etiquetas HTML, pero claro, sin abusar, ya que si no, no tendría sentido usar MD. No hay que olvidarse que usamos MD por la sencillez de leer el texto y escribirlo. Si empezamos a intercalar HTML, se pierde la sencillez.

Si nos vemos forzados en algún caso a usar etiquetas HTML, hay que tener en cuenta que los elementos a nivel de bloque (< div>, < table>, < pre>, < p>, etc). — deben estar separados del contenido que los rodea por líneas vacías y que las etiquetas de comienzo y final de bloque no deben tener tabuladores o espacios.

Por ejemplo, para añadir una tabla HTML a un artículo Markdown:

Inicio de texto. Ahora se va a crear una tabla:

<table>  
<tr>  
<td>Lunes</td> <td>Jueves</td> <td>Domingo</td>  
</tr>  
<td>*Enero*</td> <td>*Mayo*</td> <td>*Diciembre*</td>  
</table>

Fin de texto

Como se aprecia, al añadir etiquetas HTML se pierde mucha facilidad de lectura.

El texto, una vez exportado a HTML, quedaría así:

<p>Inicio de texto. Ahora se va a crear una tabla:</p>
<table>
    <tr>
    <td>Lunes</td> <td>Jueves</td> <td>Domingo</td>
    </tr>
    <td><em>Enero</em></td> <td><em>Mayo</em></td> 
    <td><em>Diciembre</em></td>
</table>

<p>Fin de texto.</p>

En el navegador:

Inicio de texto.
Ahora se va a crear una tabla:

Lunes	Jueves	Domingo
Enero	Mayo	Diciembre

Fin de texto

Algunos editores de MD, como Haroopad o Dilinger, tienen etiquetas para crear tablas:

| Lunes | Martes |  
|--------|-------|  
|  25    |   33  |

En la web se vería:

Lunes	Martes
25	33

Caracteres Especiales

Dependiendo del programa traductor de MD a HTML, podemos encontrarnos con alguna sorpresa al interpretar ciertos caracteres. Hay que tener también cuidado, cuando se copia y pega texto creado con otro editor en MD, ya que algún carácter puede dar problemas, como por ejemplo las comillas dobles “”.

En el lenguaje HTML, hay dos símbolos que exigen un tratamiento especial: < y &. El símbolo de ángulo izquierdo se utiliza para iniciar etiquetas HTML; los ampersands se utilizan para indicar entidades en HTML. Para usarlos como símbolos literales, se deben utilizar caracteres de escape:

Para “<” escribiríamos: <
Para “&” escribiríamos: &

MD permite utilizar estos símbolos realizando automáticamente los cambios sin son necesarios. Si encuentra escrito la entidad & no hace cambios, si encuentra el “&” en otra situación lo traduce automáticamente por &

Por ejemplo el símbolo de copyright en formato HTML:

©

MD lo dejará así en el código.

Pero si escribimos un & que no pertenece a una entidad HTML como por ejemplo en la frase:

Padre&Hijo

MD al traducirlo a HTML lo traduce a entidad.
En HTML:
Padre&Hijo

En la web:
Padre&Hijo

De forma similar, pasa con el símbolo <. Si está fuera de entidad, MD lo traduce:

Padre <- Hijo MD lo traducirá a: En HTML:
Padre <- Hijo

En la Web: Padre <- Hijo

Por tanto MD nos facilita bastante el trabajo.

Títulos y subtítulos

Para escribir un títulos basta con escribir el texto, dar ENTER y debajo subrayar el texto mediante signos igual, “=” (título), o mediante guiones, “-” (subtítulo).

Don Quijote de la Mancha
========================

Capítulo 1
------------------

El resultado en HTML:

<h1>Don Quijote de la Mancha</h1>
<h2> Capítulo 1</h2>

La vista del navegador:

Don Quijote de la Mancha

Capítulo 1

Funcionará igualmente aunque se pongan más o menos signos de subrayado, pero visualmente queda más bonito subrayando el texto exacto.

Si queremos tener más niveles de subtítulos, los 6 de HTML, en lugar de subrayar podemos utilizar el símbolo “#”, uno por cada nivel.

Ejemplo:

# Esto es el título es una H1

## Esto el subtítulo H2

###### Subtítulo H6

No es obligatorio, pero queda visualmente más bonito si también ponemos el símbolo al final.

# TÍTULO H1 #

### Subtítulo H3 ###

### También H3, aunque el cierre no coincide ######

En el Navegador:

TÍTULO H1

Subtítulo H3

También H3, aunque el cierre no coincide

Citas

MD, al igual que en los correos electrónicos utiliza caracteres “>“ para las citas. No es necesario el símbolo en cada línea de la cita. Para finalizar la cita hay que dejar una línea en blanco (nuevo párrafo) de separación con el siguiente texto.

Las citas se pueden anidar usando más símbolos “>”

> Aquí comienza una cita.
> Esta linea también está en la cita pero en otra línea.
Ojo esta también está en la cita
>> Esto está más anidado.
>>>> y esto más aún.

> Sigo en la cita tras una línea en blanco.

Esto ya no está en la cita (línea en blanco)

En HTML:

<blockquote>
<p>Aquí comienza una cita. <br />
gEsta linea también está en la cita pero en otra línea. <br />
Ojo esta también está en la cita</p>
<blockquote>
  <p>Esto está más anidado.</p>

<blockquote>
 <blockquote>
  <p>y esto más aún.</p>
</blockquote>
</blockquote>
</blockquote>

<p>Sigo en la cita tras una línea en blanco.</p>
</blockquote>

<p>Esto ya no está en la cita (línea en blanco)</p>

En el navegador:

Aquí comienza una cita.
Esta linea también está en la cita pero en otra línea.
Ojo esta también está en la cita

Esto está más anidado.

y esto más aún.

Sigo en la cita tras una línea en blanco.

Esto ya no está en la cita (línea en blanco)

Listas

MD permite las listas ordenadas (con números) y sin ordenar (con viñetas). Para pasar a una nueva línea entre elementos de la lista, basta con pulsar ENTER.

Las listas ordenadas usan números seguidos de punto. En realidad el número usado no importa, pero se mantiene el orden de escritura:

85.  Asturias
4.  Barcelona
40.  Badajoz

En HTML:

Asturias
Barcelona
Badajoz

En la web:

Asturias
Barcelona
Badajoz

El problema es que se puede crear una lista ordenada sin querer.
Por ejemplo:

Fechas importantes:

1492. Descubrimiento de América.
1939. Segunda Guerra Mundial.

Esto se convertiría en la web:

Descubrimiento de América.
Segunda Guerra Mundial.

Para evitarlo, hay que “escapar” el punto:

Fechas importantes:
1492\. Descubrimiento de América.
1939\. Segunda Guerra Mundial.

Resultado:
1492. Descubrimiento de América.
1939. Segunda Guerra Mundial.

Las listas no ordenadas pueden utilizar el signo más “+” o el guión “-” indiferentemente:

- Barcelona
- Madrid
* Málaga
- Gijón
* Tenerife

Código HTML:

<ul>
<li>Barcelona</li>
<li>Madrid</li>
<li>Málaga</li>
<li>Gijón</li>
<li>Tenerife</li>
</ul>

En la web:

Barcelona
Madrid
Málaga
Gijón
Tenerife

También se pueden sangrar los elementos formando subelementos de una lista. Un subelemento está sangrado 3 espacios a la derecha con respecto al anterior:

* Grupo 1. (pulso 2 espacios + enter)  

Sigo en el grupo 1.
   * Subgrupo 1.1
      * Subgrupo 1.1.1.
* Grupo 2.

En HTML:

<ul>
<li>Grupo 1. (pulso 2 espacios + enter) <br />
Sigo en el grupo 1.
<ul><li>Subgrupo 1.1
<ul><li>Subgrupo 1.1.1.</li></ul></li></ul></li>
<li>Grupo 2.</li>
</ul>

En la web:

Grupo 1. (pulso 2 espacios + enter)

Sigo en el grupo 1.

Subgrupo 1.1
- Subgrupo 1.1.1.
  - Grupo 2.

Combinando una lista con citas en su interior

* Primer elemento de la lista
> Ésta es una cita  
> dentro de un ítem de una lista.
* Segundo elemento

Resultado:

Primer elemento de la lista

Ésta es una cita
dentro de un ítem de una lista.
Segundo elemento

Bloques de código

Se suelen utilizar para mostrar el código fuente de un programa o de una página web. En estas situaciones, en que se pega código fuente, que suele llevar espacios adicionales, tabulaciones y signos no habituales, pueden aparecer errores a la hora de ver el resultado en la web. MD nos va a ayudar a que eso no pase.

Para colocar un bloque de código dentro de un la lista hay que utilizar el carácter tilde invertida (caída hacia la derecha, está al lado de la letra P y hay que pulsar otra tecla para que aparezca) “`”:

Mi programa:
`int main(void)
{

       printf("Hola mundo");

El resultado NO esperado:

int main(void)
{
    printf("Hola mundo");
}

Como se puede observar, el resultado no es el esperado. Tanto MD como HTML elimina cualquier espacio en blanco adicional que se inserte y los saltos de línea con un ENTER no se respetan.

Para evitarlo HTML utiliza la etiqueta < pre > ..... < /pre >, que indica que el texto debe aparecer tal cual está escrito. Normalmente se convertirá el texto afectado a fuente monoespaciada (todos los caracteres ocupan lo mismo) posiblemente al tipo de letra Courier.

MD puede insertar un bloque de código entre marcas < pre > y < code > automáticamente. Para hacerlo tiene que haber una línea en blanco de separación con el párrafo anterior y escribir o pegar el código comenzando con un sangrado de 4 espacios o un tabulador en cada línea:

Mi programa:

    int main(void)
    {
        printf("Hola mundo");
    }

Adios.

Resultado en HTML:

<p>Mi programa:</p> 
<pre><code>int main(void)
{
    printf("Hola mundo");
}
</code></pre>

<p>Adiós.</p>

En la web:
Mi programa:

int main(void)
{
       printf("Hola mundo");
}

Adiós.

MD considera que un bloque de código continúa hasta que alcanza una línea que no está sangrada. Fijarse en el detalle que al escribir en MD hay que sangrar con 4 espacios, pero en el resultado final se quitan, por tanto, sabemos que hay 4 espacios que no cuentan en el resultado final. Si quiero que en el resultado final aparezca sangrado con 3 espacios, por ejemplo, debería sangrar con 4+3= 7 espacios (4 espacios se quitaran).

Los bloques de código, en muchas ocasiones copiados de otro sitio, se espera que se respeten totalmente, por tanto MD no aplicará sus sintaxis si encuentra algún carácter de formato. Además, como dentro del bloque de código puede haber caracteres especiales como los ampersands (&) y los corchetes angulares (< y >), MD los convertirá automáticamente en entidades HTML. Esto hace muy fácil incluir código fuente HTML y que se vea perfecto.

Los bloques de código pueden aparecer en cualquier sitio, por ejemplo, dentro de una lista, en este ejemplo sin < pre >:

* Esto es el primer elemento de la lista
`Esto es código
dentro de la lista`
* Otro elemento de la lista.

En HTML:

<ul>
<li>Esto es el primer elemento de la lista <br />
<code>Esto es código <br />
dentro de la lista</code></li>
<li>Otro elemento de la lista.</li>
</ul>

En la web:

Esto es el primer elemento de la lista
Esto es código
dentro de la lista
Otro elemento de la lista.

Reglas horizontales

Para obtener la típica línea horizontal que separa textos (< hr />) basta con usar 3 o más guiones o asteriscos (indiferente). Pueden ir seguidos, pero lo mejor es usar espacios entre ellos, para no confundir con el formato título y subtítulo.

Ejemplo:

Tras este texto una línea
* * * * *

Tras este texto otra línea
- - - -

Resultado en HTML:

<p>Tras este texto una línea</p>

<hr />

<p>Tras este texto otra línea  </p>

<hr />

En la web:

Tras este texto una línea

Tras este texto otra línea

Se pueden usar 3 o más guiones o asteriscos seguidos, pero cuidado no ponerlo justo debajo de una linea con texto, ya que la tomará como título (subrayado). Usarlo en ese caso tras una línea en blanco. Por eso mejor usar la combinación símbolo + espacio repetido 3 o más veces.

Ejemplo:

Esto es un título
--------------------
Esto otro una línea separadora.

--------------------

Resultado en HTML:

<h2>Esto es un título</h2>

<p>Esto otro una línea separadora.</p>

<hr />

En la web:

Esto es un título

Esto otro una línea separadora.

Enlaces

Los enlaces a otras páginas web son muy usados al escribir código HTML. MD permite dos estilos de enlaces: en línea y referencias.

El texto del enlace está delimitado por corchetes: [texto del enlace].

Enlace en línea
Tras los corchetes con el texto, entre paréntesis la URL y opcionalmente un título para el enlace entre comillas. El título es el texto que aparece al poner el ratón sobre el enlace.

Ejemplo:

Para saber más pulsa [aquí](http://www.wikipedia.org/ "Wikipedia").

En HTML:

<p>Para saber más pulsa <a href="http://www.wikipedia.org/" 
title="Wikipedia">aquí</a>.</p>

En la web:

Para saber más pulsa aquí.

Enlaces referencia

Tras los corchetes con el texto, entre paréntesis se escribe la referencia a un recurso local (en el mismo servidor). Se pueden utilizar referencias relativas y absolutas.

Ejemplo:

Más datos sobre [mi](/about/).

En HTML:

<p>Más datos sobre <a href="/about/">mi</a>.</p>

En la web:

Más datos sobre mi.

Otro ejemplo:

Más datos sobre [mi](/about/ "Todo sobre mi").

En HTML:

<p>Más datos sobre <a href="/about/" title="Todo sobre mi">mi</a>.</p>

En la web:
Más datos sobre mi.

Enlaces de Referencia-estilo

En ocasiones, vemos en la web que aparece repetida varias veces la referencia a un sitio cada vez que aparece su nombre. Esto en teoría obligaría a poner la URL en cada lugar que se menciona. MD facilita esta tarea usando una especie de alias a la URL.

Se utiliza un segundo conjunto de corchetes, dentro de los cuales podemos poner una etiqueta a modo de alias para identificar el enlace. En otra parte del documento (delante o detrás) pondremos la verdadera definición de ese enlace (opcionalmente el título). De esta forma podemos usar el alias en lugar del texto verdadero que supuestamente es más largo.

En el siguiente ejemplo usamos el alias “[wikip]” para sustituir a “http://www.wikipedia.org/”:

Ejemplo (cuidado si se copia este ejemplo con las comillas dobles):

Para saber mas pulsa [aquí] [wikip].
Para otras consultas vete a este [lugar] [wikip].
Antes de finalizar no te olvides visitar [esto] [wikip] que te gustará.

[wikip]: http://www.wikipedia.org/ “Wikipedia”

Recuerda que para saber muchas cosas visita este [sitio][wikip]

En HTML:

<p>Para saber mas pulsa <a href="http://www.wikipedia.org/"
title="Wikipedia">aquí</a>. <br />
Para otras consultas vete a este <a href="http://www.wikipedia.org/"
title="Wikipedia">lugar</a>. <br />
Antes de finalizar no te olvides visitar 

<a href="http://www.wikipedia.org/" title="Wikipedia">esto</a> 
que te gustará.</p>

<p>Recuerda que para saber muchas cosas visita este 

<a href="http://www.wikipedia.org/" title="Wikipedia">sitio</a></p>

En un mismo documento pueden usarse distintos enlaces de este tipo.

Es posible omitir el nombre (alias) del enlace, en ese caso, el nombre del enlace será la referencia.

Ejemplo:

Me gusta el [Fútbol][].

[Fútbol]: http://www.realsporting.com/

Para ver [Fútbol] visita el campo del Molinón.

En HTML:

<p>Me gusta el <a href="http://www.realsporting.com/">Fútbol</a>.</p>

<p>Para ver <a href="http://www.realsporting.com/">Fútbol</a> visita 
el campo del Molinón.</p>

En la web:
Me gusta el Fútbol.

Para ver Fútbol visita el campo del Molinón.

Ejemplo con varias referencias:

El tiempo en [Asturias]1.
El tiempo en [Valencia][].
Las consultas en [Wikipedia]W.
[1]: http://meteoasturias.elcomercio.es/ “El tiempo Asturiano”
[Valencia]: http://www.eltiempo.es/valencia.html
[W]: http://www.wikipedia.org

En HTML:

<p>El tiempo en <a href="http://meteoasturias.elcomercio.es/" 

title="El tiempo Asturiano">Asturias</a>. <br />

El tiempo en <a href="http://www.eltiempo.es/valencia.html">

Valencia</a>. <br />

Las consultas en <a href="http://www.wikipedia.org">Wikipedia</a>.  </p>

En la web:

El tiempo en Asturias.
El tiempo en Valencia.
Las consultas en Wikipedia.

(Muno cuidado con las comillas dobles que dan problemas al copiarlas de otro sitio)

Los enlaces del referencia-estilo son más fáciles de leer y escribir que los enlaces en línea al permitir mover las etiquetas relativas a los meta datos fuera del párrafo, no interfiriendo tanto en la lectura.

Imágenes

Para las imágenes MD utiliza una sintaxis muy parecida a los enlaces, permitiendo dos estilos: en línea y referencia.

La sintaxis de imagen en línea se muestra así:

![Equivale al texto Alt](/ruta/a la/imagen/img01.jpg)

![Equivale al texto Alt](/ruta/a la/imagen/img01.jpg 
"El título es opcional")

Como en los enlaces el título es opcional.
También tiene el estilo “Referencia”:

![texto][id]

Donde "id" estará definido en otra parte del documento:

´[id]: url/de la/imagen "el título es opcional"´

Ejemplo:

Una imagen vale más que mil palabras:  

![barco][]

[barco]: http://www.diesl.com/wp-content/uploads/
2012/06/antena-terrestre-barco.png´

En HTML:

<p>Una imagen vale más que mil palabras:
<img src="http://www.diesl.com/wp-content/uploads/2012
/06/antena-terrestre-barco.png" alt="barco" /></p>

En la web:

Enlaces Automáticos

MD permite crear enlaces a URL o a direcciones de correo escribiéndolas entre los signos “<” y “>”

Por ejemplo:

La dirección de la Wikipedia es la siguiente: http://www.wikipedia.org
El resultado en HTML:

<p>La dirección de la Wikipedia es la siguiente: 
<a href="http://www.wikipedia.org">http://www.wikipedia.org</a></p>

Para evitar ayudar a los “spanners” a robar direcciones de correo electrónico, MD al pasarlas a HTML las codifica en formato hexadecimal.

Ejemplo:

Si te quieres comunicar conmigo envíame un correo a: amigosdelaweb@openmailbox.org

El resultado en HTML y en la web:

<p>Si te quieres comunicar conmigo envíame un correo a: 
<a href="&#109;&#97;&#105;&#108;&#x74;&#111;:&#x61;&#109;
i&#103;&#x6F;&#x73;&#x64;&#101;&#x6C;&#97;&#119;&#101;
&#98;&#64;o&#x70;&#101;&#110;&#109;&#x61;&#x69;
&#108;&#98;&#x6F;&#x78;&#46;&#x6F;&#114;&#x67;">
&#x61;&#109;i&#103;&#x6F;&#x73;&#x64;&#101;&#x6C;&#97;
&#119;&#101;&#98;&#64;o&#x70;&#101;&#110;&#109;&#x61;
&#x69;&#108;&#98;&#x6F;&#x78;&#46;&#x6F;&#114;&#x67;</a></p>

En la web:

Si te quieres comunicar conmigo envíame un correo a: amigosdelaweb@openmailbox.org

Buscar este blog

viernes, 28 de noviembre de 2014

Markdown para escribir en la web

Mis Memorias

Puntos a tratar

TITULO DEL CAPÍTULO

Y esta es mi lista de la compra:

Saltos de línea y párrafos

Énfasis

Backslash Escapes

HTML vs Markdown

Caracteres Especiales

Títulos y subtítulos

Don Quijote de la Mancha

Capítulo 1

TÍTULO H1

Subtítulo H3

También H3, aunque el cierre no coincide

Citas

Listas

Bloques de código

Reglas horizontales

Esto es un título

Enlaces

Enlaces referencia

Enlaces de Referencia-estilo

Imágenes

Enlaces Automáticos

No hay comentarios:

Publicar un comentario