Markdown por ejemplo

M

Como todos sabemos, HTML existe desde hace mucho tiempo y se utiliza 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 Reducción entra en juego. En este artículo, explicaré qué es y, lo que es más importante, le mostraré algunos ejemplos de Markdown que puede usar por su 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á destinado a formatear texto y no 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.

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

Parece haber logrado su objetivo, pero ha habido problemas con Estandarización ya que no hay un estándar claramente definido que no sea 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 allí afuera. A lo largo de este artículo, nos ceñiremos lo más posible a la implementación original y notaremos cuando describo 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 tramo. Los elementos de bloque son aquellos que ocupan su propia línea, como párrafos, código o encabezados.

Los elementos de extensión 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

Párrafos y nuevas líneas

La creación de párrafos y nuevas líneas (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. Me gusta esto:

Reducción:

Hello, this is a paragraph.

OMG, this is a new paragraph, you guys.

HTML:

<p>Hello, this is a paragraph.</p>
<p>OMG, this is a new paragraph, you guys.</p>

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

Reducción:

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

HTML:

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

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

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

An H1 Header
============

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

Tenga en cuenta que no importa el número de “=” o “-” que utilice. 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 utiliza determina la etiqueta de encabezado utilizada (hasta h6).

# An H1 Header
## An H2 Header
### An H3 Header
#### An H4 Header

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

# An H1 Header #
## Still an H2 Header ####
### An H3 Header
Blockquotes

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

La primera opción es anteponer cada línea de la cita con un mayor que (>) personaje.

Reducción:

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

HTML:

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

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

Reducción:

> 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 las citas en bloque, por lo que si la cita requiere formato, como énfasis, puede agregarla. Solo asegúrate de que la línea comience con el > símbolo para que esto funcione.

Liza

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

Para las listas no ordenadas, 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:

Markdodwn:

* Item 1
* Item 2
* Item 3

+ Item 1
+ Item 2
+ Item 3

- Item 1
- Item 2
- Item 3

HTML:

<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:

- Item 1
  - Sub-item 1
  - Sub-item 2
- Item 2
  - Sub-item 1

HTML:

<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 declaras de manera similar, con la mayor diferencia en que usas números en lugar de *, +o - caracteres.

Reducción:

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

Con listas ordenadas, ni siquiera importa qué números prefijen los elementos. Incluso si tuviera números aleatorios como este:

Reducción:

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

HTML:

<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 citas en bloque, puede agregar bastante formato dentro de cada elemento de la lista, como código, citas 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 tiene sangrados correctamente. Aquí hay un ejemplo de una lista con algunos párrafos y una cita en bloque:

* 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:

<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, normalmente usaría el pre y code Etiquetas HTML. 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, lo dividirán en bloques separados.

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 de Markdown, puede utilizar alternativamente tres comillas invertidas (`) para crear bloques de código. Personalmente, prefiero este método a la sangría, ya que es más fácil de leer y escribir. Además, si tiene un resaltador de sintaxis, puede declarar en qué idioma está su código para que sepa cómo resaltar el código.

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

No es necesario 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 daría como resultado lo siguiente:

HTML:

<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 -.

***

or

---

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

* * * * *

- - - - - - - -

Elementos de tramo

Hay bastantes formas diferentes de crear enlaces, cada una de las cuales depende de los metadatos que necesita, 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:

[Stack Abuse](http://Pharos.sh.com)

HTML:

<a href="http://Pharos.sh.com">Stack Abuse</a>

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

[Stack Abuse](http://Pharos.sh.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.

OMG it is sooo fun to link to [Stack Abuse][SA], you guys.

[SA]: http://Pharos.sh.com "Stack Abuse Link Title"

El texto de anclaje también es opcional, en cuyo caso la ID se utilizaría como texto de anclaje. La parte de ID 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 asterisco (*).

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

Reducción:

_This is emphasized text!_

__This is strong text!__

*This is emphasized text!*

**This is strong text!**

HTML:

<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 comillas invertidas ` dentro de un párrafo, por lo que no es necesario que esté en su propia línea. Esto solo agregará code etiquetas alrededor del texto.

Reducción:

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

HTML:

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

Si alguna vez necesita usar comillas inversas literales dentro de su intervalo de código, debe usar dos comillas inversas 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:

<p>A backtick <code>`</code> is used for code blocks.</p>
Imagenes

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

Reducción:

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

HTML:

<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 puede utilizar referencias.

![My Alt Text][id]

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

Misc.

Escapando

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

Reducción:

OMG _this_ had better not have emphasis...

HTML:

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

Los siguientes caracteres se pueden escapar con una barra invertida:

  • (barra invertida)
  • `(tilde)
  • * (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:

<http://Pharos.sh.com>

HTML:

<a href="http://Pharos.sh.com">http://Pharos.sh.com</a>
Vinculación de correos electrónicos

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

También puede utilizar el estilo de enlace abreviado para enlazar a 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 al lector. Esto ayudará a evitar que muchos robots recolectores de correo electrónico lean el correo electrónico, pero no todos.

Reducción:

<[email protected]>

HTML:

<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 lo olvide, Markdown también le permite insertar HTML sin formato. Entonces, si la sintaxis no le permite especificar los atributos que desea, como height y width en una imagen, puede usar HTML en su lugar. De ahí 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.

 

About the author

Ramiro de la Vega

Bienvenido a Pharos.sh

Soy Ramiro de la Vega, Estadounidense con raíces Españolas. Empecé a programar hace casi 20 años cuando era muy jovencito.

Espero que en mi web encuentres la inspiración y ayuda que necesitas para adentrarte en el fantástico mundo de la programación y conseguir tus objetivos por difíciles que sean.

Add comment

Sobre mi

Últimos Post

Etiquetas

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad