Empezando con Markdown [Beginner’s Guide]

En mi trabajo, a menudo tengo que escribir código, escribir la documentación que acompaña a ese código, crear páginas web y trabajar en proyectos de restauración de texto, y he escrito varios artículos formales mientras estaba en la escuela. También puedo incluir notas de clase aquí; Necesitaba escribirlos para casi todas las clases.

Utilizo Markdown para casi todo lo que escribo y me ahorra mucho tiempo.

En este artículo, voy a compartir mi experiencia con Markdown. Aprenderás lo siguiente:

  • ¿Qué es Markdown?
  • ¿Como funciona?
  • Sintaxis básica de Markdown y cómo usarla

¿Qué es Markdown?

Si es nuevo en Markdown, es una herramienta de conversión de texto a HTML para escritores web. Los archivos de Markdown siguen una sintaxis específica que es fácil de leer e igualmente fácil de escribir. Son archivos de texto sin formato, por lo que se pueden crear con cualquier editor de texto en cualquier computadora. Luego, estos archivos se pueden convertir en páginas web, y las páginas web se crean utilizando un marcado llamado HTML.

Markdown, entonces, es solo una forma de crear páginas web sin la necesidad (o incluso saber cómo) de escribir código HTML. En realidad, Markdown es una excelente manera de formatear texto sin formato incluso si no tiene que convertirlo a HTML. Alguien una vez me describió Markdown de esta manera:

“No es lo que ves es lo que obtienes, sino lo que ves es lo que quieres decir”.

Markdown, sin embargo, es más que un sencillo esquema de formato, también es una herramienta de software que convierte el formato de texto sin formato a HTML.

Por eso la sintaxis es importante. Si desea un título en su página web, Markdown creará uno basado en los caracteres que usa delante de su título. En esta captura de pantalla se muestra una muestra de la sintaxis de Markdown:

Conversión de Markdown a HTML

Entonces, ¿cómo hago esta conversión de texto sin formato a HTML?

Markdown de John Gruber es un script de Perl que se ejecuta en la línea de comandos. Básicamente, lee el texto de Markdown que usted crea y crea una página web a partir de él.

Evitaré la línea de comando aquí, ya que hay muchos editores de Markdown destacados que pueden hacer esta conversión por usted. No solo eso, muchos de estos editores le permitirán escribir su texto y mostrarle cómo se verá la página web (llamado renderizado) al mismo tiempo.

Los editores de Markdown generalmente están configurados para mostrar dos marcos. El marco izquierdo es donde escribe su texto y el marco derecho le muestra cómo se verá el texto formateado en HTML:

La mayoría de los editores de Markdown tienen dos paneles para escribir y obtener una vista previa del texto.

Cuando haya terminado con su texto y esté satisfecho con él, simplemente guarde el archivo Markdown. De esta manera, siempre lo tendrá en caso de que necesite editarlo o reescribirlo más tarde. Una vez que se guarda el archivo, puede hacer que el editor exporte el archivo de rebajas a HTML.

El editor creará la página web, utilizando su Markdown como referencia. Su archivo Markdown no se cambiará durante una exportación, todavía lo tendrá, junto con un archivo HTML (página web) recién creado por separado que puede colocar en un servidor web.

Nota: Muchos editores de Markdown también pueden exportar sus archivos de Markdown a otros formatos, como .doc, .docx, y .pdf. Puede obtener más información sobre esas configuraciones avanzadas y el software adicional que pueda necesitar más adelante.

Sintaxis básica de Markdown

Para que el nuevo usuario de Markdown se ponga al día rápidamente, limitaré esto para cubrir la sintaxis que uso con más frecuencia. Creo que estos serán los más útiles: puede ser productivo ahora mientras aprende más sobre lo que Markdown puede hacer por usted más adelante.

Escribir encabezados

Normalmente uso # caracteres para denotar títulos. Hay seis niveles:

# Level 1 Heading
## Level 2 Heading
### Level 3 Heading
#### Level 4 Heading
##### Level 5 Heading
###### Level 6 Heading

Hay otro estilo de título que usa líneas debajo del texto. Rara vez utilizo este tipo de encabezado ya que estoy limitado a solo dos. Una doble línea, que se hace con el = personaje, hace un H1 título. Una sola línea, hecha con el - personaje, hace un H2 título:

Level 1 Heading
===============

Level 2 Heading
---------------

Párrafos

Los párrafos están separados por una línea en blanco (asegúrese de que haya una línea en blanco entre los párrafos). No aplique ninguna sangría a la primera línea. Sangría con un <Tab> o <spaces> tiene un propósito diferente en Markdown.

Un párrafo es un bloque de texto y no debe tener sangría con espacios o tabulaciones. Puede tener una o varias líneas. Para terminar un párrafo y comenzar uno nuevo, el <Enter> la tecla se pulsa dos veces; los párrafos están separados por una línea en blanco.

Saltos de línea

Recuerda que con los párrafos se tiene que separar una línea en blanco y esto se hace presionando dos veces en el <Enter> llave. Markdown es estricto al respecto.

Markdown no admite párrafos “ajustados” o de “longitud de línea fija”. Es decir, golpeando el <Enter> una vez no forzará el texto a una nueva línea. Puede aparecer así en la ventana de edición, pero el HTML no lo mostrará.

Sin embargo, habrá ocasiones en las que deba dividir párrafos con alguna forma de dividir una línea. Markdown tiene una forma de hacer esto, pero puede parecer un poco extraño al principio: un salto de línea se hace terminando una línea con dos o más espacios y luego presionando el botón <Enter> clave una vez.

Aquí hay un trabajo example de un verso corto. Cada línea tiene dos espacios al final. La última línea, ya que es el final del verso, no tiene espacios adicionales. Como es el final del verso (párrafo), presioné el <Enter> clave dos veces:

Baa, baa oveja negra,
¿Tienes lana ?.
Sí señor. Sí señor.
Tres bolsas llenas.

Agregar dos espacios al final de una línea, para crear un salto de línea, puede llevar un tiempo acostumbrarse.

Reglas horizontales

Las reglas horizontales son excelentes para dividir el texto en secciones.

Usa tres o más guiones -, subrayados _o asteriscos * para reglas horizontales, así:

`---`

`***`

`___`

Incluso puedes poner espacios entre los personajes:

`- - -`

No utilizo reglas horizontales muy a menudo en artículos o trabajos, pero me resultan útiles en las entradas de diario, registros del sistema y notas de clase.

Énfasis en el texto con negrita y cursiva.

Cuando desee que una palabra o frase se destaque y se note, puede ponerla en negrita o en cursiva. El texto en cursiva y negrita se puede hacer de dos formas. La primera es rodear el texto con asteriscos. *, mientras que el segundo es utilizar guiones bajos _.

Para poner en cursiva una palabra o frase, rodee el texto con un guión bajo o asterisco. Para poner una palabra o frase en negrita, rodeela con dos guiones bajos o asteriscos:

This is *italics* made with asterisks.

This is _italics_ made with underscores.

This is **bold** made with asterisks.

This is __bold__ made with underscores.

Recuerde utilizar el mismo carácter. Un asterisco a un lado de una palabra o frase y un guión bajo al lado no funcionarán. El mismo carácter debe estar a ambos lados de la palabra o frase.

Cotizaciones en bloque

Las cotizaciones en bloque se utilizan para cotizaciones directas. Si estaba escribiendo una entrada de blog y quería repetir algo que dijo Benjamin Franklin, podría usar una cita en bloque.

Se utiliza un corchete en ángulo recto para especificar una cita en bloque:

> This is a block quote.

>> Use two right angle brackets if you want a block quote that is further indented.

Agregar enlaces en Markdown

Los enlaces son simplemente geniales. Hay tres formas de crear enlaces en Markdown básico, pero solo cubriré dos aquí: enlaces regulares y enlaces automáticos.

El tercer tipo de enlace, llamado enlaces de referencia, es compatible con Markdown básico y versiones más avanzadas. Quiero empezar rápidamente. Puede buscar enlaces de referencia cuando esté listo para eso.

Los enlaces regulares le permiten enlazar a varios sitios web. El nombre del sitio, o una frase que desee utilizar, se coloca entre corchetes. []. El enlace real está entre paréntesis. ().

Visit [It's FOSS](https://itsfoss.com) today!

Los enlaces automáticos se hacen con corchetes angulares <> rodeando el enlace. El enlace es una dirección real (ya sea una dirección web o de correo electrónico). El enlace se detalla y, cuando se convierte a HTML, el enlace deletreado se convierte en un enlace funcional.

<https://automatic-link-to-url.com/>

<[email protected]>

Esto es útil cuando desea deletrear la dirección en su texto:

Agregar imágenes en Markdown

Los enlaces a imágenes son casi idénticos a los enlaces a sitios web. La pequeña diferencia entre los enlaces del sitio y las imágenes es que los enlaces de las imágenes comienzan con una explosión (signo de exclamación) !

El nombre de la imagen, o una frase descriptiva de la imagen, se coloca entre corchetes. []. El enlace real está entre paréntesis. ().

Puede incrustar imágenes así:

![alternate text](./images/image.jpg)

Aquí hay un example Enlace de imágen. Es un enlace de muestra, sin imagen, pero es una muestra decente de cómo se vería un enlace real:

![a picture of bill](./images/my_photo_of_me.jpg)

Liza

Las listas se hacen por muchas razones. Se pueden utilizar como elementos de “cosas por hacer”, elementos temáticos en un esquema, listas de piezas en un proyecto de ensamblaje, etc. Hay dos tipos principales de listas: ordenadas y desordenadas.

Las listas desordenadas no están numeradas; estos son los “elementos con viñetas” que vemos en muchos documentos. Las listas ordenadas están numeradas.

Para crear una lista ordenada (numerada), simplemente comience cada línea con un número, así:

1. Item one.
2. Item two.
3. Item three.

Las listas desordenadas no están numeradas, pero usan un asterisco *, un signo más +o un signo menos - al principio de cada elemento de la lista. Prefiero usar un asterisco o un signo menos, pero puedes elegir:

* Item one.
+ Item two.
- Item three.

Los subelementos se pueden agregar a listas ordenadas y desordenadas mediante sangría, así:

1. Item 1
1. Sub-item 1
2. Sub-item 2
2. Item 2
3. Item 3

Hoja de referencia de sintaxis de Markdown

Para su referencia, aquí hay una breve lista de la sintaxis de Markdown que se ha cubierto en esta pequeña introducción.

Si decide adoptarlo como herramienta de escritura, encontrará que Markdown tiene los medios para simplificar aún más la escritura.

Descargar la hoja de referencia de Markdown en formato PDF

Conclusión

Markdown puede hacer más de lo que he descrito aquí. Un gran porcentaje de mi escritura se puede lograr con la sintaxis de Markdown que he cubierto aquí, y estos son los elementos que uso con más frecuencia, incluso en proyectos más complejos.

Si todo esto parece demasiado simple, realmente es así de fácil. Markdown se creó simplemente para la tarea de escritura, pero no tienes que creer en mi palabra. ¡Pruébalo! No es necesario instalar un editor de Markdown; Puedes hacer esto en línea. Hay varios buenos editores de Markdown en línea. Aquí hay tres que prefiero:

De John Gruber Perdió, Editor.md, y Dillinger. Editor.md y Dillinger te permitirán ver tu Markdown renderizado como HTML en tiempo real. Dingus no tiene una vista previa en tiempo real, pero hay una hoja de trucos de sintaxis de Markdown en la página como referencia.

Pruebe algunos de los ejemplos de este artículo en cualquiera de estos editores en línea. Pruebe también algunas de sus propias ideas. Esto le permitirá acostumbrarse a Markdown antes de posiblemente comprometerse a aprender más sobre él.

Y si desea ser compatible con It’s FOSS, puede comprar nuestra guía de Markdown en formato PDF y EPUB. Cubre lo que acaba de aprender con un poco más de explicación y ejemplos.

Obtenga el libro ‘Uso de Makrdown’ y soporte Es FOSS