Ricerca nel sito web

Come lavorare con GitHub Flavored Markdown in Linux


Markdown è un linguaggio di formattazione creato per il Web. Lo scopo del ribasso è semplificarci la vita quando scriviamo su Internet. Nel corso del tempo sono state create molte tipologie di ribasso. Ma in questo articolo, la nostra attenzione sarà principalmente su Github Flavored Markdown (GFM).

Github è basato su CommonMark. Ci sono molte funzionalità aggiuntive supportate in GFM come tabelle, recinzione del codice, ecc. Entriamo ed esploriamo la sintassi di GFM e come utilizzarla in diversi casi.

Sto usando VScode per dimostrarlo, ma puoi scegliere qualsiasi editor Linux adatto a te. Alcuni editor come Atom e Vscode sono dotati del supporto per il markdown e per alcuni editor è necessario installare un plug-in per il markdown.

Per lavorare con markdown, il file deve essere salvato con .md o .markdown come estensione.

Come aggiungere intestazioni all'editor Markdown

Ci sono 6 livelli di intestazione supportati nel markdown. Per creare un'intestazione utilizzare il simbolo Hash (#) seguito da uno spazio e dal nome dell'intestazione. Maggiore è il valore hash, minore è la dimensione dell'intestazione.

NOTA: H1 e H2 avranno uno stile sottolineato per impostazione predefinita.

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

A volte potresti voler allineare la rotta verso il centro. Ma la cosa triste è che l'allineamento non è supportato per impostazione predefinita nel markdown. Per impostazione predefinita, i titoli vengono visualizzati con l'allineamento a sinistra. Puoi incorporare tag HTML/CSS all'interno del markdown per ottenere l'allineamento.

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

Come aggiungere commenti all'editor Markdown

I commenti sono un modo per documentare determinate cose per una migliore comprensione del codice/documenti. Questo non verrà reso dal motore di markdown.

<!--
Comment block
-->

Come visualizzare il testo come una singola riga

Normalmente quando si digita qualcosa in righe separate una dopo l'altra il markdown lo renderà come una singola riga.

Puoi creare interruzioni di riga in due modi.

  • Interruzione di linea morbida
  • Rottura dura

È possibile creare interruzioni di riga morbide aggiungendo due spazi alla fine della riga. In questo modo il markdown renderà ogni riga come linee separate.

È possibile creare interruzioni di linea netta inserendo una riga vuota tra ciascuna riga.

Come aggiungere linee orizzontali

La regola orizzontale può essere creata inserendo tre o più asterischi (*), trattini(-) o trattini bassi(_) su un'unica riga. Va bene anche aggiungere spazio tra di loro.

* * *
---
___

Come rendere un testo in grassetto

Per rendere una parola o una riga BOLD, racchiudi la parola o le righe tra doppi asterischi (**) o doppio trattino basso (__).

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

__Making this sentence bold using double underscore.__

Come rendere un testo in corsivo

Per rendere le parole o le righe ITALICS, racchiudi la parola o le righe tra singoli asterischi (*) o un singolo trattino basso (_).

*Making this line to be italicized using asterisks.*

_Making this line to be italicized using underscore._

Come aggiungere una barrata alle righe

Per colpire qualsiasi cosa devi usare una doppia tilde. Circonda tutto ciò che devi barrare tra doppie tilde (~~).

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

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

Come aggiungere una citazione in blocco

Utilizza Maggiore di un simbolo (>) per le virgolette.

> Single line blockquote.

Guarda come viene resa la citazione del blocco seguente. Entrambe le linee vengono visualizzate nella stessa linea.

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

Puoi utilizzare il ritorno a capo lasciando due spazi alla fine di ogni riga. In questo modo ogni riga non verrà renderizzata in una singola riga.

Lasciare le righe alternative vuote precedute da un simbolo maggiore di. In questo modo puoi creare un'interruzione di riga tra ogni riga all'interno dello stesso blocco.

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

Puoi anche creare virgolette di blocco annidate aggiungendo due simboli maggiori di (>>).

Crea codice in linea

Utilizza BACKTICK per creare codice in linea. L'esempio seguente mostra come creare codice in linea. Guarda le note e il file Leggimi che sono stati resi come codice in linea.

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

Aggiungi l'evidenziazione della sintassi del blocco codice

Aggiungi tabulazioni o 4 spazi e posiziona il codice per visualizzarlo come un blocco di codice. In alternativa, posiziona il codice tra tre backtick per rendere il blocco come un blocco di codice. La caratteristica importante da notare qui è l'evidenziazione della sintassi. Normalmente quando si inserisce il codice all'interno del blocco non viene applicata alcuna combinazione di colori.

```
echo "Hello world"
```

Ora guarda lo stesso esempio, la combinazione di colori viene applicata automaticamente. Ciò è possibile aggiungendo il nome del linguaggio di programmazione dopo tre backtick che applicheranno la combinazione di colori al codice.

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

Esempio di codice Python.

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

Esempio di query SQL.

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

Crea elenchi ordinati e non ordinati

Gli articoli possono essere organizzati in elenchi ordinati ed elenchi non ordinati nel markdown. Per creare un elenco ordinato, aggiungi numeri seguiti da un punto. La parte interessante da notare qui è che il numero non deve essere necessariamente sequenziale. Il motore Markdown è abbastanza intelligente da capire che si tratta di un elenco ordinato anche se eseguiamo l'ordinamento non sequenziale.

Nell'esempio seguente, puoi vedere che ho creato un elenco ordinato con ordinamento non sequenziale (10, 15, 150) ma il motore di markdown lo visualizza nell'ordine corretto. Puoi anche creare un elenco nidificato come mostrato nell'immagine.

Per creare un elenco non ordinato utilizzare il segno più (+) asterischi (*) o il trattino (-) seguito da uno spazio e dal contenuto dell'elenco. Analogamente all'elenco ordinato, anche qui puoi creare un elenco nidificato.

Crea elenco attività

Questa è una caratteristica speciale di GFM. È possibile creare un elenco di attività come mostrato nell'immagine seguente. Per contrassegnare l'attività come completata, devi aggiungere 'x' tra parentesi quadre come mostrato nell'immagine.

Aggiungi collegamenti al testo

Per aggiungere un collegamento, seguire la sintassi seguente.

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

Suddividiamo la sintassi in 3 parti.

  • Testo da visualizzare – Questo è il testo che verrà inserito tra parentesi quadre ([Tecmint]).
  • Link: inserirai il collegamento effettivo all'interno della parentesi.
  • Titolo: quando passi il mouse sul testo verrà visualizzato un suggerimento per il collegamento. Il titolo deve essere racchiuso tra virgolette come mostrato nell'immagine.

Dall'immagine qui sotto puoi vedere che "Tecmint" è il mio testo visualizzato e quando faccio clic su di esso verrò reindirizzato a "linux-console.net".

Puoi anche creare collegamenti inserendoli tra parentesi angolari < >.

Aggiungi collegamenti alle immagini

La sintassi dell'immagine è simile all'aggiunta di collegamenti. Per aggiungere un'immagine, seguire la sintassi seguente.

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

Suddividiamo la sintassi in 3 parti.

  • Testo alternativo: il testo alternativo verrà inserito tra parentesi quadre (![alt-text]). Se un'immagine è rotta o non è possibile caricarla, questo testo verrà visualizzato insieme a un simbolo rotto.
  • Link: all'interno delle parentesi, inserirai il collegamento effettivo all'immagine.
  • Titolo: quando passi il mouse sull'immagine verrà visualizzato il nome dell'immagine. Il titolo deve essere racchiuso tra virgolette come mostrato nell'immagine.

Puoi anche creare un collegamento con immagini. Quando un utente fa clic sull'immagine, verrà reindirizzato a un collegamento esterno. La sintassi rimane la stessa con poche modifiche. Racchiudi la stessa sintassi che abbiamo utilizzato per inserire un'immagine tra parentesi quadre seguita da un collegamento all'interno della parentesi.

[![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 tabella

Le tabelle non sono supportate nella versione originale di markdown. È una delle funzionalità speciali fornite con GFM. Vediamo come costruire una tabella passo dopo passo.

La prima parte è creare i nomi delle colonne. I nomi delle colonne possono essere creati separandoli con barre verticali (|).

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |

Nella seconda riga, utilizza i trattini (-) in combinazione con i due punti (:). I trattini dicono al motore di markdown che questo deve essere rappresentato come una tabella e i due punti decidono se il nostro testo deve essere allineato al centro, a sinistra o a destra.

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

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

Dalla terza riga puoi iniziare a creare record. I record devono essere separati da una barra verticale (|).

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

Dall'immagine sopra, puoi vedere che la tabella è renderizzata correttamente. La colonna 1 è allineata al centro, le colonne 2 e 3 sono allineate a sinistra e a destra. Se utilizzi Vscode, puoi utilizzare "Markdown Table Prettifier" per formattare la tabella in modo ordinato.

Crea un'emoji

GFM supporta un'ampia gamma di emoji. Dai un'occhiata al cheat sheet delle emoji.

Per questo articolo è tutto. Se hai qualche feedback, pubblicalo nella sezione commenti.