Búsqueda de sitios web

Cómo trabajar con Markdown con sabor a GitHub en Linux


Markdown es un lenguaje de formato creado para la web. El propósito de Markdown es hacer la vida más fácil cuando escribimos en Internet. Con el tiempo, se crean muchos tipos de rebajas. Pero en este artículo, nos centraremos principalmente en Github Flavored Markdown (GFM).

Github está basado en CommonMark. Hay muchas funciones adicionales compatibles con GFM, como tablas, delimitación de código, etc. Entremos y exploremos la sintaxis de GFM y cómo usarla en diferentes casos.

Estoy usando VScode para demostrar esto, pero puedes elegir cualquier editor de Linux que sea adecuado para ti. Algunos editores como 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 encabezados al editor Markdown

Hay 6 niveles de encabezado admitidos en Markdown. Para crear un encabezado utilice 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 de forma predeterminada.

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

A veces es posible que desees alinear el rumbo hacia el centro. Pero lo triste es que la alineación no es compatible de forma predeterminada con Markdown. De forma predeterminada, los títulos se representan alineados a la izquierda. Puede incrustar etiquetas HTML/CSS dentro de 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 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 representar texto como una sola línea

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

Puedes crear saltos de línea de dos maneras.

  • Salto de línea suave
  • ruptura de línea dura

Se pueden crear saltos de línea suaves agregando dos espacios al final de la línea. De esta manera, Markdown hará que cada línea sea líneas separadas.

Se pueden crear saltos de línea 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 palabras o líneas en BOLD, rodee la palabra o las líneas entre asteriscos dobles (**) o guión bajo doble (__).

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

__Making this sentence bold using double underscore.__

Cómo poner un texto en cursiva

Para formar palabras o líneas CURSIVAS, rodee la palabra o las líneas entre asteriscos simples (*) o un guión bajo único (_).

*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 tachar cualquier cosa hay que utilizar doble tilde. Rodea todo lo que necesites 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

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

> Single line blockquote.

Vea cómo se representa la siguiente cita en bloque. 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 manera cada línea no se representará en una sola línea.

Deje las líneas alternativas vacías con el prefijo mayor que un símbolo. De esta manera puedes 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 en 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 palabras y el archivo Léame que se representaron 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 que el bloque se represente como un bloque de código. La característica importante a tener 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 mira el mismo ejemplo, la combinación de colores se aplica automáticamente. Esto es posible agregando el nombre del lenguaje de programación después de tres comillas invertidas que aplicarán la combinación de colores al código.

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

Código Python de muestra.

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

Consulta SQL de ejemplo.

```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. Lo interesante a tener en cuenta aquí es que los números no tienen por qué ser secuenciales. El motor 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 la muestra en el orden correcto. También puede crear una lista anidada como se muestra en la imagen.

Para crear una lista desordenada, utilice el signo más (+), los asteriscos (*) o el 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://linux-console.net "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 dentro del paréntesis.
  • Título: al pasar el mouse sobre el texto, se mostrará información sobre herramientas para el enlace. El título debe ir entre comillas como se muestra en la imagen.

En la imagen a continuación puede ver que "Tecmint" es mi texto para mostrar y cuando hago clic en él me redireccionará a "linux-console.net".

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 (![alt-text]). Si una imagen está rota o no se puede cargar, este texto se mostrará junto con un símbolo de rotura.
  • 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 ir entre comillas como se muestra en la imagen.

También puedes 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 pocas modificaciones. Rodee la misma sintaxis que usamos para insertar una imagen entre corchetes seguido de un enlace dentro del 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 la versión original de Markdown. Es una de las características especiales que vienen con GFM. Veamos cómo construir una mesa 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, utilice guiones (-) en combinación con dos puntos (:). Los guiones le dicen al motor de rebajas que esto se representará como una tabla y los dos puntos deciden si nuestro texto debe estar alineado en el centro, a la izquierda o a la derecha.

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

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

Desde la tercera línea, puedes 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.

Crear un emoji

GFM admite una amplia gama de emojis. Echa un vistazo a la hoja de referencia de emojis.

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