Markdown por ejemplo

Elementos de bloque Párrafos y líneas nuevas Encabezados Citas en bloque Listas Bloques de código Elementos de extensión de regla horizontal Enlaces Énfasis Imágenes de código en línea Misc. Escapando de A...

Saltar a

Como todos sabemos, HTML existe desde mucho tiempo y se usa para crear todos los sitios web en Internet, pero en realidad no es tan fácil de escribir. Claro, para muchos desarrolladores puede ser fácil, pero definitivamente no es conveniente gracias a la sintaxis detallada. Si eres un blogger, realmente no hay ninguna razón para tener que escribir HTML, ya que probablemente solo necesites un formato simple como énfasis y enlaces.

Aquí es donde entra en juego Reducción. En este artículo, explicaré qué es y, lo que es más importante, te mostraré algunos ejemplos de Markdown que puedes usar por tu cuenta.

¿Qué es Markdown?

Markdown es un lenguaje de marcado muy ligero que le permite crear texto enriquecido (es decir, texto que tiene énfasis, encabezados, etc.) en cualquier editor de texto sin formato. Markdown, como HTML, le permite especificar el formato de texto, pero es mucho menos expresivo que HTML, lo cual está perfectamente bien ya que solo está diseñado para formatear texto y no para crear páginas web completas.

El Markdown resultante que escribe se alimenta a un convertidor que reemplaza la sintaxis de Markdown con HTML, que luego se puede mostrar en una página web. Además de la sintaxis de Markdown, también puede escribir HTML sin formato, por lo que si tiene una estructura más complicada que desea agregar en línea con su texto, aún podrá hacerlo.

Juan Gruber creó la sintaxis Markdown con Aaron Swartz en 2004 como una forma de “escribir usando un formato de texto sin formato fácil de leer y escribir y, opcionalmente, convertir a XHTML estructuralmente válido (o HTML)".

Parece haber logrado su objetivo, pero ha habido problemas con Estandarización ya que no hay un estándar claramente definido más allá de la documentación inicial de Gruber . Debido a esto, ha habido algunos problemas de fragmentación con los convertidores, aunque muchos de ellos están de acuerdo en la mayoría de la sintaxis, todavía hay bastantes [sabores diferentes](https://github.com/jgm/CommonMark/wiki/ Markdown-Flavors) por ahí. A lo largo de este artículo, nos apegaremos lo más posible a la implementación original y tomaremos nota cuando describa una función que no es totalmente compatible.

Ejemplos de sintaxis de Markdown

Los ejemplos se dividirán en dos secciones diferentes, elementos de bloque y elementos de extensión. Los elementos de bloque son aquellos que ocupan su propia línea, como párrafos, código o encabezados.

Los elementos span se pueden usar en línea, lo que significa que se pueden usar dentro de un párrafo y no es necesario que estén en una línea propia.

Elementos de bloque {#elementos de bloque}

Párrafos y líneas nuevas

La creación de párrafos y líneas nuevas (o saltos de línea) es similar, pero tiene diferencias sutiles. Un nuevo elemento de párrafo, <p>...</p>, se crea cada vez que hay una línea en blanco entre dos líneas de texto. Como esto:

Reducción:

1
2
3
Hello, this is a paragraph.

This is a new paragraph!

HTML:

1
2
<p>Hello, this is a paragraph.</p>
<p>This is a new paragraph!</p>

Por otro lado, se inserta un salto de línea, <br /> cuando hay una nueva línea y no una línea en blanco separando el texto, así:

Reducción:

1
2
The paragraph starts here...
...and doesn't end until here.

HTML:

1
2
<p>The paragraph starts here...<br />
...and doesn't end until here.</p>
Encabezados

Hay dos formas de crear encabezados, Setexto y atx. El método que elija se basará en sus preferencias personales y el tamaño del encabezado que necesite.

Para declarar encabezados H1 o H2 en el formato Setext, puede usar un subrayado:

1
2
3
4
5
An H1 Header
============

An H2 Header
------------

Tenga en cuenta que el número de "=" o "-" que utilice no importa. Incluso colocar solo uno de estos caracteres debajo del texto le indicará a Markdown que cree el encabezado.

En cuanto al método atx, todo lo que necesita hacer es colocar signos de libra (#) antes del texto. El número de signos de libra que utilice determina la etiqueta de encabezado utilizada (hasta h6).

1
2
3
4
# An H1 Header
## An H2 Header
### An H3 Header
#### An H4 Header

Opcionalmente, puede agregar el signo de libra después del texto del encabezado, pero sería puramente por razones estéticas. Ni siquiera necesita hacer coincidir la cantidad de símbolos en el prefijo:

1
2
3
# An H1 Header #
## Still an H2 Header ####
### An H3 Header
Citas en bloque

Una cita en bloque es un elemento que se utiliza para mostrar comillas. Agregar estas comillas en bloque en Markdown es similar a cómo lo hace en muchos clientes de correo electrónico. Como muchos otros elementos, hay algunas opciones sobre cómo crearlos.

La primera opción es prefijar cada línea de la cita con un carácter mayor que (>).

Reducción:

1
2
> Of all the things I've lost 
> I miss my mind the most. - Mark Twain

HTML:

1
2
3
<blockquote>
  <p>Of all the things I've lost I miss my mind the most. - Mark Twain</p>
</blockquote>

Esto puede volverse un poco tedioso para bloques largos de texto continuo, así que en su lugar puedes usar un solo > antes de la primera línea de cada párrafo, y el resto seguirá:

Reducción:

1
> Measuring programming progress by lines of code is like measuring aircraft building progress by weight.  Bill Gates

También se pueden colocar otros elementos de Markdown en comillas en bloque, por lo que si la cita requiere formato, como énfasis, puede agregarla. Solo asegúrese de que la línea comience con el símbolo > para que esto funcione.

Listas

Ambos tipos de listas HTML son compatibles con Markdown: listas desordenadas (<ul>) y listas ordenadas (<ol>).

Para las listas desordenadas, hay un par de caracteres diferentes que se pueden usar para declarar un elemento de la lista. Aquí hay algunos ejemplos, todos los cuales producen la misma salida de lista desordenada:

rebajado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
* Item 1
* Item 2
* Item 3

+ Item 1
+ Item 2
+ Item 3

- Item 1
- Item 2
- Item 3

HTML:

1
2
3
4
5
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Incluso puede declarar listas anidadas simplemente sangrando el elemento.

Reducción:

1
2
3
4
5
- Item 1
  - Sub-item 1
  - Sub-item 2
- Item 2
  - Sub-item 1

HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<ul>
  <li>Item 1
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 2
    <ul>
      <li>Sub-item 1</li>
    </ul>
  </li>
</ul>

En cuanto a las listas ordenadas, las declara de manera similar, con la mayor diferencia de que usa números en lugar de los caracteres *, + o -.

Reducción:

1
2
3
1. Item 1
2. Item 2
3. Item 3

Con las listas ordenadas, ni siquiera importa qué números preceden a los elementos. Incluso si tuvieras números aleatorios como este:

Reducción:

1
2
3
45. Item 1
0. Item 2
910. Item 3

HTML:

1
2
3
4
5
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Las mismas reglas también se aplican a las listas ordenadas para agregar subelementos. Todo lo que tiene que hacer es sangrar el elemento y se iniciará una sublista.

De manera similar a las comillas en bloque, puede agregar bastante formato dentro de cada elemento de la lista, como código, comillas en bloque, párrafos y cualquier tipo de formato en línea. Solo asegúrese de que si agrega elementos de bloque (como nuevos párrafos o código) los tenga correctamente sangrados. Aquí hay un ejemplo de una lista con algunos párrafos y una cita en bloque:

1
2
3
4
5
6
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla velit sit amet lectus tincidunt, quis suscipit tortor maximus. Vestibulum facilisis sit amet tortor sed vestibulum.

  Sed nec egestas leo. Nam tristique tincidunt venenatis. Vestibulum vel justo tincidunt, aliquet sapien vitae, vestibulum ex.

  Donec commodo, nunc in posuere condimentum, diam est gravida ex, quis varius nisi neque et nunc.
* Nulla facilisi. Mauris eleifend felis a purus pretium egestas

HTML:

1
2
3
4
5
6
7
8
<ul>
  <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla velit sit amet lectus tincidunt, quis suscipit tortor maximus. Vestibulum facilisis sit amet tortor sed vestibulum.</p>

  <p>Sed nec egestas leo. Nam tristique tincidunt venenatis. Vestibulum vel justo tincidunt, aliquet sapien vitae, vestibulum ex.</p>

  <p>Donec commodo, nunc in posuere condimentum, diam est gravida ex, quis varius nisi neque et nunc.</p>
  <li><p>Nulla facilisi. Mauris eleifend felis a purus pretium egestas</p>
</ul>
Bloques de código

Para mostrar el código dentro de su contenido, generalmente usaría las etiquetas HTML pre y code. En Markdown, para agregar un bloque de código, solo necesita sangrar cada línea con 4 espacios o una sola pestaña. Sin embargo, esto no es como un párrafo en el que solo necesita sangrar la primera línea y el resto seguirá. Con los bloques de código, en realidad necesita sangrar cada línea para que se incluya en el bloque. Si hay líneas sin sangría entre el código, entonces lo dividirán en bloques separados.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
Check out this code:

    def fibonacci(number):
        if number <= 1:
            return number
        else:
            return fibonacci(number - 1) + fibonacci(number - 2)

And use the function like this:

    fib_number = fibonacci(8)
    print 'The 8th Fibonacci number is:', fib_number

Wow, that was amazing...

En algunos convertidores Markdown, puede usar alternativamente tres acentos graves (`) para crear bloques de código. Personalmente, prefiero este método más que sangrar ya que es más fácil de leer y escribir. Además, si tiene un resaltador de sintaxis, puede declarar en qué idioma se encuentra su código para que sepa cómo resaltar el código.

```python
name = 'Scott'
print 'Hi my name is ' + name
```

No necesita incluir 'python' allí, pero ayuda a que el resaltador de sintaxis sea más preciso. Lo hace agregando el idioma declarado como una clase. Entonces lo anterior resultaría en lo siguiente:

HTML:

1
2
3
4
<pre><code class="language-python">
name = 'Scott'
print 'Hi my name is ' + name
</code></pre>
Regla horizontal

Para dividir secciones en su texto, puede agregar reglas horizontales (<hr />), que son solo líneas largas que abarcan la longitud del bloque en el que se encuentra. Para agregar una con Markdown, solo agregue tres o más * o -.

1
2
3
4
5
***

or

---

También puede colocar espacios entre los caracteres si lo desea:

1
2
3
* * * * *

- - - - - - - -

Elementos de distribución

Enlaces

Hay bastantes formas diferentes de crear enlaces, cada una de las cuales depende de los metadatos que necesite, la organización y las preferencias personales. La primera y más sencilla forma de crear un enlace es con este formato: [ANCHOR-TEXT](LINK). Un ejemplo podría ser:

Reducción:

1
[Stack Abuse](https://wikihtp.com)

HTML:

1
<a href="https://wikihtp.com">Stack Abuse</a>

También puede agregar un atributo de título opcional a sus enlaces:

1
[Stack Abuse](https://wikihtp.com "Stack Abuse Title")

Si lo prefiere, puede utilizar enlaces de estilo de referencia donde el enlace real está separado de donde se hace referencia. Esta referencia puede estar en cualquier parte del texto, siempre que esté en una línea propia.

1
2
3
Here's a link to [Stack Abuse][SA], you guys.

[SA]: https://wikihtp.com "Stack Abuse Link Title"

El texto de anclaje también es opcional, en cuyo caso la ID se usaría como texto de anclaje en su lugar. La porción de identificación puede ser un número o texto, incluso con espacios.

Énfasis

Uno de los elementos más utilizados en HTML es el énfasis en el texto, como negrita o cursiva. Cualquiera de estos elementos se puede crear con un guión bajo (_) o un asterisco (*).

Para agregar etiquetas <em>, use un solo _ o * en cada lado del texto. Y para las etiquetas <strong>, use dos de esos caracteres en cada lado. Aquí están algunos ejemplos:

Reducción:

1
2
3
4
5
6
7
_This is emphasized text!_

__This is strong text!__

*This is emphasized text!*

**This is strong text!**

HTML:

1
2
3
4
5
6
7
<em>This is emphasized text!</em>

<strong>This is strong text!</strong>

<em>This is emphasized text!</em>

<strong>This is strong text!</strong>
Código en línea

El código en línea se puede agregar mediante acentos graves ` dentro de un párrafo, por lo que no es necesario que esté en su propia línea. Esto solo agregará etiquetas code alrededor del texto.

Reducción:

1
In JavaScript, use `console.log()` to print to the console.

HTML:

1
<p>In JavaScript, use <code>console.log()</code> to print to the console.</p>

Si alguna vez necesita usar acentos graves literales dentro de su espacio de código, debe usar dos acentos graves en los delimitadores de apertura y cierre. De esta manera puedes hacer cosas como esta:

Reducción:

A backtick `` ` `` is used for code blocks.

HTML:

1
<p>A backtick <code>`</code> is used for code blocks.</p>
Imágenes

Vincular imágenes es muy parecido a agregar enlaces URL. La pequeña diferencia es que debe prefijarlo con un signo de exclamación (!).

Reducción:

![My Alt Text](/path/to/my/pic.jpg "My Optional Title Text")

HTML:

1
<img alt="My Alt Text" title="My Optional Title Text" src="/path/to/my/pic.jpg">

Y lo mismo con los enlaces URL, también puedes usar referencias.

1
2
3
![My Alt Text][id]

[id]: /path/to/my/pic.jpg  "My Optional Title Text"

Varios

Escapando

Si alguna vez necesita usar caracteres reservados como *, # o _, deberá escapar con una barra invertida. Sin embargo, solo necesita escapar si el carácter reservado que se usa tiene el formato de sintaxis Markdown.

Reducción:

1
OMG \_this\_ had better not have emphasis...

HTML:

1
<p>OMG _this_ had better not have emphasis...</p>

Los siguientes caracteres se pueden escapar con una barra invertida:

  • \ (barra invertida)
  • ` (comilla grave)
  • * (asterisco)
  • _ (guion bajo)
  • {} (llaves)
  • [] (corchetes)
  • () (paréntesis)
  • # (símbolo de almohadilla)
  • + (signo más)
  • - (guión)
  • . (punto)
  • ! (signo de exclamación)
Vinculación automática

Hay una forma abreviada de enlace disponible para usted, pero a costa del texto de anclaje. Si desea agregar un enlace y solo tener la URL como texto de anclaje, puede usar esto:

Reducción:

1
<https://wikihtp.com>

HTML:

1
<a href="https://wikihtp.com">https://wikihtp.com</a>
Vinculación de correos electrónicos

Nota: aunque se declara en la especificación de Markdown, esta función no es compatible con todos los convertidores.

También puede utilizar el estilo de enlace abreviado para enlazar direcciones de correo electrónico con 'mailto'. Para su comodidad, el convertidor realizará una codificación de entidad hexadecimal en la dirección de correo electrónico, que aún se muestra como caracteres ASCII para el lector. Esto ayudará a evitar que muchos robots de recolección de correo electrónico lean el correo electrónico, pero no todos.

Reducción:

1
<[correo electrónico protegido]>

HTML:

1
<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

Conclusión

No olvide que Markdown también le permite insertar HTML sin formato. Entonces, si la sintaxis no le permite especificar los atributos que desea, como “alto” y “ancho” en una imagen, entonces puede usar HTML en su lugar. De aquí es de donde proviene gran parte del poder, en forma de flexibilidad.

Tenga en cuenta que esta no es una guía definitiva para la sintaxis de Markdown. Si desea un recurso más completo y completo, debe consultar el convertidor específico que está utilizando o la guía de John Gruber en [Bola de fuego atrevida] (http://daringfireball.net/projects/markdown/syntax ).