Cómo trabajar con GitHub Flavored Markdown en Linux


Markdown es un lenguaje de formato que se crea para la web. El propósito de Markdown es facilitar la vida cuando escribimos en Internet. Con el tiempo, hay rebajas con sabor a Github (GFM).

Github se basa en CommonMark. Hay muchas características adicionales admitidas en GFM como tablas, vallas de código, etc. Vamos a entrar y explorar la sintaxis de GFM y cómo usarlo en diferentes casos.

Estoy usando Atom y Vscode vienen con soporte de rebajas y para algunos editores, necesitamos instalar un complemento de rebajas.

Para trabajar con Markdown, el archivo debe guardarse con .md o .markdown como extensión.

Cómo agregar títulos al editor de Markdown

Hay 6 niveles de encabezado admitidos en la rebaja. Para crear un encabezado, use el símbolo Hash (#) seguido de un espacio y el nombre del encabezado. Cuanto mayor sea el valor hash, menor será el tamaño del encabezado.

NOTA: H1 y H2 tendrán un estilo de subrayado por defecto.

# Heading1
## Heading2
### Heading3
#### Heading4
##### Heading5
###### Heading 6

A veces, es posible que desee alinear el rumbo hacia el centro. Pero la triste historia es que la alineación no se admite de forma predeterminada en las rebajas. De forma predeterminada, los títulos se representan con alineación a la izquierda. Puede incrustar etiquetas HTML/CSS dentro del markdown para lograr la alineación.

<h1 style="text-align:center">MARKDOWN</h1>
<h1 style="text-align:left">MARKDOWN</h1>
<h1 style="text-align:right">MARKDOWN</h1>
<h1 style="text-align:justify">MARKDOWN</h1>

Cómo agregar comentarios al editor de Markdown

Los comentarios son una forma de documentar ciertas cosas para una mejor comprensión del código/documentos. Esto no será procesado por el motor de rebajas.

<!--
Comment block
-->

Cómo renderizar texto como una sola línea

Normalmente, cuando escribe algo en líneas separadas, una tras otra, la rebaja lo representará como una sola línea.

Puede crear saltos de línea de dos formas.

  • Salto de línea suave
  • Ruptura de la línea dura

Se pueden crear saltos de línea suaves agregando dos espacios al final de la línea. De esta manera, la rebaja convertirá cada línea en líneas separadas.

Se pueden crear saltos de línea dura insertando una línea vacía entre cada línea.

Cómo agregar líneas horizontales

La regla horizontal se puede crear colocando tres o más asteriscos (*), guiones (-) o guiones bajos (_) en una sola línea. También está bien agregar espacio entre ellos.

* * *
---
___

Cómo poner un texto en negrita

Para poner una palabra o líneas en NEGRITA, rodee la palabra o líneas entre asteriscos dobles (**) o doble subrayado (__) .

**Making this sentence bold using double asterisks.**

__Making this sentence bold using double underscore.__

Cómo poner un texto en cursiva

Para convertir palabras o líneas en ITALICAS, rodee la palabra o líneas entre asteriscos simples (*) o guiones bajos (_) .

*Making this line to be italicized using asterisks.*

_Making this line to be italicized using underscore._

Cómo agregar un tachado a las líneas

Para golpear cualquier cosa tienes que usar una tilde doble. Rodee todo lo que necesite para tachar entre tildes dobles (~~) .

I am just striking the word ~~Howdy~~.

~~I am striking off the entire line.~~

Cómo agregar una cita en bloque

Use Mayor que un símbolo (>) para blockquote.

> Single line blockquote.

Vea cómo se representa la cita de bloque a continuación. Ambas líneas se representan en la misma línea.

> first line
> Second line
> Third line
> Fourth line

Puede utilizar el retorno de línea dejando dos espacios al final de cada línea. De esta forma, cada línea no se representará en una sola línea.

Deje las líneas alternas vacías con el prefijo mayor que un símbolo. De esta manera, puede crear un salto de línea entre cada línea dentro del mismo bloque.

> first line
> 
> Second line
> 
> Third line
> 
> Fourth line 

También puede crear comillas de bloque anidadas agregando dos símbolos mayores que (>>) .

Crear código en línea

Utilice BACKTICK para crear código en línea. El siguiente ejemplo demuestra cómo crear código en línea. Mire las notas de la palabra y el archivo Léame que se representó como código en línea.

Markdown is one of the best tools for taking `notes` and creating `readme` files.

Agregar resaltado de sintaxis de bloque de código

Agregue pestañas o 4 espacios y coloque su código para representarlo como un bloque de código. Alternativamente, coloque su código entre tres comillas invertidas para hacer que el bloque se represente como un bloque de código. La característica importante que debe tenerse en cuenta aquí es el resaltado de sintaxis. Normalmente, cuando coloca el código dentro del bloque, no se le aplica ningún esquema de color.

```
echo "Hello world"
```

Ahora mire el mismo ejemplo, el esquema de color se aplica automáticamente. Esto es posible agregando el nombre del lenguaje de programación después de tres comillas invertidas que aplicarán el esquema de color al código.

```bash
echo "Hello world"
```

Ejemplo de código de Python.

```python
def fp():
  print("Hello World!!!")
fp()
```

Ejemplo de consulta SQL.

```sql
SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE   
WHERE SALARY_EMP<(SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE)
```

Crear listas ordenadas y desordenadas

Los elementos se pueden organizar en listas ordenadas y listas desordenadas en rebajas. Para crear una lista ordenada, agregue números seguidos de un punto. La parte interesante a tener en cuenta aquí es que el número no necesita ser secuencial. El motor de Markdown es lo suficientemente inteligente como para comprender que es una lista ordenada incluso si hacemos el pedido no secuencial.

En el siguiente ejemplo, puede ver que creé una lista ordenada con orden no secuencial (10, 15, 150) pero el motor de rebajas lo muestra en el orden correcto. También puede crear una lista anidada como se muestra en la imagen.

Para crear una lista desordenada, use el signo más (+) asteriscos (*) o guión (-) seguido de un espacio y el contenido de la lista. De manera similar a la lista ordenada, aquí también puede crear una lista anidada.

Crear lista de tareas

Esta es una característica especial de GFM. Puede crear una lista de tareas como se muestra en la siguiente imagen. Para marcar la tarea como completada, debe agregar "x" entre llaves como se muestra en la imagen.

Agregar enlaces al texto

Para agregar un enlace, siga la siguiente sintaxis.

[Tecmint](https://tecmint.com "The best site for Linux")

Dividamos la sintaxis en 3 partes.

  • Texto que se mostrará: este es el texto que se colocará entre llaves ([Tecmint]).
  • Enlace: colocará el enlace real entre paréntesis.
  • Título: cuando pase el mouse sobre el texto, se mostrará una información sobre herramientas para el enlace. El título debe colocarse entre comillas como se muestra en la imagen.

En la imagen de abajo, puede ver que "Tecmint" es mi texto de visualización y cuando hago clic en él, me redirigirá a "Tecmint.com".

También puede crear enlaces colocándolos entre corchetes angulares <> .

Agregar enlaces a imágenes

La sintaxis de la imagen es similar a la de agregar enlaces. Para agregar una imagen, siga la siguiente sintaxis.

![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")

Dividamos la sintaxis en 3 partes.

  • Texto alternativo: el texto alternativo se colocará entre corchetes (! [texto alternativo]). Si una imagen está rota o no se puede cargar, este texto se mostrará junto con un símbolo roto.
  • Enlace: dentro de los corchetes, colocará el enlace real a la imagen.
  • Título: cuando pasa el mouse sobre la imagen, se mostrará el nombre de la imagen. El título debe colocarse entre comillas como se muestra en la imagen.

También puede crear un enlace con imágenes. Cuando un usuario hace clic en la imagen, será redirigido a un enlace externo. La sintaxis sigue siendo la misma con algunas modificaciones. Rodee la misma sintaxis que usamos para insertar una imagen entre corchetes seguida de un enlace entre paréntesis.

[![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")](https://en.wikipedia.org/wiki/Markdown)

Crear una tabla

Las tablas no son compatibles con el tipo original de rebajas. Es una de las características especiales que vienen con GFM. Veamos cómo crear una tabla paso a paso.

La primera parte es crear nombres de columnas. Los nombres de las columnas se pueden crear separándolos con barras verticales (|) .

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |

En la segunda línea, use guiones (-) en combinación con dos puntos (:) . Los guiones le dicen al motor de rebajas que esto se debe representar como una tabla y los dos puntos deciden si nuestro texto debe estar alineado en el centro, la izquierda o la derecha.

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|

:---:  ⇒ Center alignment
:---   ⇒ Left alignment
---:   ⇒ Right alignment

Desde la tercera línea, puede comenzar a crear registros. Los registros deben estar separados por una barra vertical (|) .

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|
|  Ravi         |   30         |  127        |
|  karthick     |   27         |  128        |

En la imagen de arriba, puede ver que la tabla se representa correctamente. La columna 1 está alineada al centro, las columnas 2 y 3 están alineadas a la izquierda y a la derecha. Si está utilizando Vscode, puede utilizar "Markdown Table Prettifier" para formatear la tabla de forma ordenada.

Crea un emoji

GFM admite una amplia gama de emojis. Eche un vistazo a la hoja de trucos de emoji.

Eso es todo por este artículo. Si tiene algún comentario, publíquelo en la sección de comentarios.