Recherche de site Web

Comment travailler avec GitHub Flavored Markdown sous Linux


Markdown est un langage de formatage créé pour le Web. Le but du démarque est de nous faciliter la vie lorsque nous écrivons sur Internet. Au fil du temps, de nombreuses variantes de démarques ont été créées. Mais dans cet article, nous nous concentrerons principalement sur Github Flavored Markdown (GFM).

Github est basé sur CommonMark. De nombreuses fonctionnalités supplémentaires sont prises en charge dans GFM, telles que les tables, la clôture de code, etc. Allons-y et explorons la syntaxe de GFM et comment l'utiliser dans différents cas.

J'utilise VScode pour démontrer cela, mais vous pouvez choisir n'importe quel éditeur Linux qui vous convient. Certains éditeurs comme Atom et Vscode prennent en charge le markdown et pour certains éditeurs, nous devons installer un plugin markdown.

Pour travailler avec Markdown, le fichier doit être enregistré avec .md ou .markdown comme extension.

Comment ajouter des titres à l'éditeur Markdown

Il existe 6 niveaux de titres pris en charge dans la démarque. Pour créer un titre, utilisez le symbole Hash (#) suivi d'un espace et du nom du titre. Plus la valeur de hachage est élevée, plus la taille du titre est réduite.

REMARQUE : H1 et H2 auront un style souligné par défaut.

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

Parfois, vous souhaiterez peut-être aligner le cap vers le centre. Mais la triste histoire est que l'alignement n'est pas pris en charge par défaut dans la démarque. Par défaut, les titres sont affichés avec un alignement à gauche. Vous pouvez intégrer des balises HTML/CSS dans le markdown pour obtenir l'alignement.

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

Comment ajouter des commentaires à l'éditeur Markdown

Les commentaires sont un moyen de documenter certaines choses pour une meilleure compréhension du code/des documents. Cela ne sera pas rendu par le moteur de démarque.

<!--
Comment block
-->

Comment afficher du texte sur une seule ligne

Normalement, lorsque vous tapez quelque chose sur des lignes séparées, l'une après l'autre, le démarque le rendra sur une seule ligne.

Vous pouvez créer des sauts de ligne de deux manières.

  • Saut de ligne doux
  • Pause dure

Des sauts de ligne doux peuvent être créés en ajoutant deux espaces à la fin de la ligne. De cette façon, le démarque rendra chaque ligne comme des lignes distinctes.

Des sauts de ligne durs peuvent être créés en insérant une ligne vide entre chaque ligne.

Comment ajouter des lignes horizontales

La règle horizontale peut être créée en plaçant au moins trois astérisques (*), traits d'union(-) ou traits de soulignement(_). sur une seule ligne. Il est également possible d'ajouter de l'espace entre eux.

* * *
---
___

Comment mettre un texte en gras

Pour rendre un mot ou des lignes BOLD, entourez le mot ou les lignes entre des doubles astérisques (**) ou un double trait de soulignement (__).

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

__Making this sentence bold using double underscore.__

Comment mettre un texte en italique

Pour créer des mots ou des lignes ITALIQUES, entourez le mot ou les lignes entre des astérisques simples (*) ou un trait de soulignement unique (_).

*Making this line to be italicized using asterisks.*

_Making this line to be italicized using underscore._

Comment ajouter un barré aux lignes

Pour frapper quoi que ce soit, vous devez utiliser un double tilde. Entourez tout ce dont vous avez besoin de barrer entre les doubles tildes (~~).

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

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

Comment ajouter un blockquote

Utilisez Supérieur à un symbole (>) pour les citations de bloc.

> Single line blockquote.

Voyez comment la citation de bloc ci-dessous est rendue. Les deux lignes sont rendues sur la même ligne.

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

Vous pouvez utiliser le retour de ligne en laissant deux espaces à la fin de chaque ligne. De cette façon, chaque ligne ne sera pas rendue sur une seule ligne.

Laissez les lignes alternatives vides avec le préfixe supérieur à un symbole. De cette façon, vous pouvez créer un saut de ligne entre chaque ligne du même bloc.

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

Vous pouvez également créer des guillemets imbriqués en ajoutant deux symboles supérieurs à (>>).

Créer du code en ligne

Utilisez BACKTICK pour créer du code en ligne. L'exemple ci-dessous montre comment créer du code en ligne. Regardez les notes de mots et le fichier Lisez-moi qui ont été rendus sous forme de code en ligne.

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

Ajouter une mise en évidence de la syntaxe du bloc de code

Ajoutez des tabulations ou 4 espaces et placez votre code pour le restituer sous forme de bloc de code. Vous pouvez également placer votre code entre trois backticks pour que le bloc soit rendu sous forme de bloc de code. La caractéristique importante à noter ici est la coloration syntaxique. Normalement, lorsque vous placez le code dans le bloc, aucun jeu de couleurs ne lui est appliqué.

```
echo "Hello world"
```

Regardez maintenant le même exemple, la palette de couleurs est appliquée automatiquement. Ceci est possible en ajoutant le nom du langage de programmation après trois backticks qui appliqueront le jeu de couleurs au code.

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

Exemple de code Python.

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

Exemple de requête SQL.

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

Créer des listes ordonnées et non ordonnées

Les éléments peuvent être organisés en listes ordonnées et en listes non ordonnées en démarque. Pour créer une liste ordonnée, ajoutez des nombres suivis d'un point. La partie intéressante à noter ici est que le nombre n’a pas besoin d’être séquentiel. Le moteur Markdown est suffisamment intelligent pour comprendre qu'il s'agit d'une liste ordonnée même si nous effectuons un classement non séquentiel.

Dans l'exemple ci-dessous, vous pouvez voir que j'ai créé une liste ordonnée avec un ordre non séquentiel (10, 15, 150), mais le moteur de démarques la restitue dans le bon ordre. Vous pouvez également créer une liste imbriquée comme indiqué dans l'image.

Pour créer une liste non ordonnée, utilisez le signe plus (+), les astérisques (*) ou le tiret (-) suivi d'un espace et du contenu de la liste. Semblable à la liste ordonnée, vous pouvez également créer une liste imbriquée ici.

Créer une liste de tâches

Il s'agit d'une fonctionnalité particulière de GFM. Vous pouvez créer une liste de tâches comme indiqué dans l'image ci-dessous. Pour marquer la tâche comme terminée, vous devez ajouter 'x' entre accolades, comme indiqué dans l'image.

Ajouter des liens au texte

Pour ajouter un lien, suivez la syntaxe ci-dessous.

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

Décomposons la syntaxe en 3 parties.

  • Texte à afficher – Il s'agit du texte qui sera placé entre accolades ([Tecmint]).
  • Lien – vous placerez le lien réel entre parenthèses.
  • Titre – Lorsque vous passez votre souris sur le texte, une info-bulle pour le lien s'affiche. Le titre doit être placé entre guillemets, comme indiqué dans l'image.

Dans l'image ci-dessous, vous pouvez voir que « Tecmint » est mon texte affiché et lorsque je clique dessus, il me redirigera vers « linux-console.net ».

Vous pouvez également créer des liens en les plaçant entre crochets < >.

Ajouter des liens vers des images

La syntaxe de l'image ressemble à l'ajout de liens. Pour ajouter une image, suivez la syntaxe ci-dessous.

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

Décomposons la syntaxe en 3 parties.

  • Texte alternatif – Le texte alternatif sera placé entre crochets (![alt-text]). Si une image est cassée ou ne parvient pas à charger, ce texte sera affiché avec un symbole cassé.
  • Lien – À l’intérieur des parenthèses, vous placerez le lien réel vers l’image.
  • Titre – Lorsque vous passez votre souris sur l'image, le nom de l'image s'affiche. Le titre doit être placé entre guillemets, comme indiqué dans l'image.

Vous pouvez également créer un lien avec des images. Lorsqu'un utilisateur clique sur l'image, elle sera redirigée vers un lien externe. La syntaxe reste la même avec quelques modifications. Entourez la même syntaxe que celle utilisée pour insérer une image entre crochets suivie d'un lien à l'intérieur de la parenthèse.

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

Créer un tableau

Les Tableaux ne sont pas pris en charge dans la version originale de Markdown. C'est l'une des fonctionnalités spéciales de GFM. Voyons comment créer un tableau étape par étape.

La première partie consiste à créer des noms de colonnes. Les noms de colonnes peuvent être créés en les séparant par des barres (|).

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |

Sur la deuxième ligne, utilisez des tirets (-) en combinaison avec deux points (:). Les tirets indiquent au moteur de démarque que cela doit être rendu sous forme de tableau et les deux points décident si notre texte doit être aligné au centre, à gauche ou à droite.

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

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

A partir de la troisième ligne, vous pouvez commencer à créer des enregistrements. Les enregistrements doivent être séparés par un tube (|).

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

À partir de l'image ci-dessus, vous pouvez voir que le tableau est rendu correctement. La colonne 1 est alignée au centre, les colonnes 2 et 3 sont alignées à gauche et à droite. Si vous utilisez Vscode, vous pouvez utiliser « Markdown Table Prettifier » pour formater proprement le tableau.

Créer un émoji

GFM prend en charge une large gamme d'émojis. Jetez un œil à l’aide-mémoire emoji.

C'est tout pour cet article. Si vous avez des commentaires, veuillez les publier dans la section commentaires.