Com treballar amb GitHub Flavored Markdown a Linux


Markdown és un llenguatge de format que es crea per a la web. El propòsit de la reducció és facilitar la vida quan escrivim a Internet. Amb el temps hi ha Github Flavored Markdown (GFM).

Github es basa en CommonMark. Hi ha moltes funcions addicionals compatibles amb GFM, com ara taules, tanques de codi, etc. Anem a entrar i explorar la sintaxi de GFM i com utilitzar-la en diferents casos.

Estic fent servir Atom i Vscode vénen amb suport de reducció i, per a alguns editors, hem d'instal·lar un connector de reducció.

Per treballar amb markdown, el fitxer s'ha de desar amb .md o .markdown com a extensió.

Com afegir encapçalaments a l'editor Markdown

Hi ha 6 nivells d'encapçalament compatibles amb la reducció. Per crear un encapçalament utilitzeu el símbol Hash (#) seguit d'un espai i el nom de l'encapçalament. Més gran és el valor hash, menor la mida de l'encapçalament.

NOTA: H1 i H2 tindran un estil subratllat per defecte.

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

De vegades és possible que vulgueu alinear la direcció cap al centre. Però la trista història és que l'alineació no s'admet de manera predeterminada a la reducció. Per defecte, els encapçalaments es representen amb alineació a l'esquerra. Podeu incrustar etiquetes HTML/CSS dins de Markdown per aconseguir l'alineació.

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

Com afegir comentaris a Markdown Editor

Els comentaris són una manera de documentar certes coses per a una millor comprensió del codi/Documents. Això no serà representat pel motor de reducció.

<!--
Comment block
-->

Com representar el text com una línia única

Normalment, quan escriviu alguna cosa en línies separades una darrere l'altra, el marcador el representarà com una línia única.

Podeu crear salts de línia de dues maneres.

  • Salt de línia suau
  • Pausa de línia dura

Es poden crear salts de línia suaus afegint dos espais al final de la línia. D'aquesta manera, la reducció farà que cada línia siguin línies separades.

Els trencaments de línia dura es poden crear inserint una línia buida entre cada línia.

Com afegir línies horitzontals

La regla horitzontal es pot crear col·locant tres o més asteriscs (*), guions (-) o guions baixos (_) en una sola línia. També està bé afegir espai entre ells.

* * *
---
___

Com fer un text en negreta

Per fer una paraula o línies en NEGRETA, envolta la paraula o les línies entre asteriscs dobles (**) o guió baix doble (__).

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

__Making this sentence bold using double underscore.__

Com fer un text en cursiva

Per fer que les paraules o línies siguin CURSIVAS, envolta la paraula o les línies entre asteriscs únics (*) o guió baix únic (_).

*Making this line to be italicized using asterisks.*

_Making this line to be italicized using underscore._

Com afegir un tallat a les línies

Per colpejar qualsevol cosa, heu d'utilitzar una doble tilda. Envolta tot el que necessites per colpejar entre dobles tildes (~~).

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

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

Com afegir una cita de bloc

Utilitzeu Més gran que un símbol (>) per a la cita de bloc.

> Single line blockquote.

Vegeu com es representa la cita de bloc següent. Les dues línies es representen a la mateixa línia.

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

Podeu utilitzar el retorn de línia deixant dos espais al final de cada línia. D'aquesta manera, cada línia no es representarà en una sola línia.

Deixeu les línies alternatives buides amb el prefix d'un símbol més gran que. D'aquesta manera podeu crear un salt de línia entre cada línia dins del mateix bloc.

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

També podeu crear cometes de bloc imbricades afegint dos símbols més grans que (>>).

Crea codi en línia

Utilitzeu BACKTICK per crear codi en línia. L'exemple següent mostra com crear codi en línia. Mireu les notes de paraula i llegiu-me que es va representar com a codi en línia.

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

Afegeix el ressaltat de sintaxi del bloc de codi

Afegiu pestanyes o 4 espais i col·loqueu el vostre codi per representar-lo com a bloc de codi. Alternativament, col·loqueu el vostre codi entre tres tecles enrere per fer que el bloc es mostri com a bloc de codi. La característica important que cal destacar aquí és el ressaltat de la sintaxi. Normalment, quan col·loqueu el codi dins del bloc, no hi ha cap esquema de colors aplicat.

```
echo "Hello world"
```

Ara mireu el mateix exemple, l'esquema de colors s'aplica automàticament. Això és possible afegint el nom del llenguatge de programació després de tres retrocessos que aplicaran l'esquema de colors al codi.

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

Exemple de codi Python.

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

Exemple de consulta SQL.

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

Crea llistes ordenades i no ordenades

Els elements es poden organitzar en llistes ordenades i llistes no ordenades amb reducció. Per crear una llista ordenada, afegiu números seguits d'un punt. La part interessant a tenir en compte aquí és que el nombre no ha de ser seqüencial. El motor Markdown és prou intel·ligent com per entendre que és una llista ordenada encara que fem l'ordre no seqüencial.

A l'exemple següent, podeu veure que he creat una llista ordenada amb un ordre no seqüencial (10, 15, 150), però el motor de reducció la mostra en un ordre adequat. També podeu crear una llista imbricada tal com es mostra a la imatge.

Per crear una llista no ordenada, utilitzeu el signe més (+) asteriscs (*) o guió (-) seguit d'un espai i contingut de la llista. De manera similar a la llista ordenada, també podeu crear una llista imbricada aquí.

Crea una llista de tasques

Aquesta és una característica especial de GFM. Podeu crear una llista de tasques tal com es mostra a la imatge següent. Per marcar la tasca com a completada, heu d'afegir ‘x’ entre claus quadrades tal com es mostra a la imatge.

Afegeix enllaços al text

Per afegir un enllaç, seguiu la sintaxi següent.

[Tecmint](https://linux-console.net "The best site for Linux")

Desglossem la sintaxi en 3 parts.

  • Text que es mostrarà: aquest és el text que es col·locarà dins de claus quadrades ([Tecmint]).
  • Enllaç: col·locaràs l'enllaç real dins del parèntesi.
  • Títol: quan passeu el ratolí per sobre del text, es mostrarà una informació sobre eines per a l'enllaç. El títol s'ha de col·locar entre cometes com es mostra a la imatge.

A la imatge de sota podeu veure que \Tecmint és el meu text de visualització i, quan hi faci clic, em redirigirà a \linux-console.net.

També podeu crear enllaços col·locant-los entre claudàtors angulars < >.

Afegeix enllaços a imatges

La sintaxi de la imatge s'assembla a afegir enllaços. Per afegir una imatge, seguiu la sintaxi següent.

![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")

Desglossem la sintaxi en 3 parts.

  • Text alternatiu: el text alternatiu es col·locarà entre claudàtors (![text alternatiu]). Si una imatge està trencada o no es pot carregar, aquest text es mostrarà juntament amb un símbol trencat.
  • Enllaç: dins dels claudàtors, col·locaràs l'enllaç real a la imatge.
  • Títol: quan passeu el ratolí per sobre de la imatge, es mostrarà el nom de la imatge. El títol s'ha de col·locar entre cometes com es mostra a la imatge.

També podeu crear un enllaç amb imatges. Quan un usuari faci clic a la imatge, es redirigirà a un enllaç extern. La sintaxi segueix sent la mateixa amb poques modificacions. Envolta la mateixa sintaxi que hem utilitzat per inserir una imatge entre claudàtors seguit d'un enllaç dins dels 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)

Crea una taula

Les taules no s'admeten amb el gust original de rebaixa. És una de les característiques especials que inclou GFM. Vegem com construir una taula de manera pas a pas.

La primera part és crear noms de columnes. Els noms de columnes es poden crear separant-los amb tubs (|).

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |

A la segona línia, utilitzeu guions (-) en combinació amb dos punts (:). Els guions indiquen al motor de reducció que s'ha de representar com a taula i els dos punts decideixen si el nostre text ha d'estar alineat al centre, a l'esquerra o a la dreta.

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

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

A partir de la tercera línia, podeu començar a crear registres. Els registres haurien d'estar separats per un tub (|).

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

A la imatge de dalt, podeu veure que la taula es representa correctament. La columna 1 està alineada al centre, les columnes 2 i 3 estan alineades a l'esquerra ia la dreta. Si utilitzeu Vscode, podeu utilitzar \Markdown Table Prettifier per formatar la taula perfectament.

Crea un emoji

GFM admet una àmplia gamma d'emojis. Fes una ullada al full de trucs dels emojis.

Això és tot per aquest article. Si teniu qualsevol comentari, si us plau, publiqueu-lo a la secció de comentaris.