Scripts de site Web

Premiers pas avec Markdown [Guide du débutant]

Dans mon travail, je dois souvent écrire du code, écrire la documentation qui accompagne ce code, créer des pages Web et travailler sur des projets de restauration de texte, et j'ai écrit plusieurs articles formels pendant que j'étais à l'école. Je peux aussi inclure des notes de cours ici; J'avais besoin de les écrire pour presque tous les cours.

J'utilise Markdown pour presque tout mon écriture et c'est un gain de temps important pour moi.

Dans cet article, je vais partager mon expérience avec Markdown. Vous apprendrez ce qui suit:

  • Qu'est-ce que Markdown?
  • Comment ça fonctionne ?
  • Syntaxe de base de Markdown et comment les utiliser

Qu'est-ce que Markdown?

Si vous êtes nouveau sur Markdown, il s'agit d'un outil de conversion de texte en HTML pour les rédacteurs Web. Les fichiers Markdown suivent une syntaxe spécifique qui est facile à lire et tout aussi facile à écrire. Ce sont des fichiers de texte brut qui peuvent donc être créés à l'aide de n'importe quel éditeur de texte sur n'importe quel ordinateur. Ces fichiers peuvent ensuite être transformés en pages Web - et les pages Web sont créées à l'aide d'un balisage appelé HTML.

Markdown n'est donc qu'un moyen de créer des pages Web sans avoir besoin (ni même savoir comment) écrire du code HTML. En fait, Markdown est un excellent moyen de formater du texte brut, même si vous n'avez pas à convertir en HTML. Quelqu'un m'a un jour décrit Markdown de cette façon:

«Ce n'est pas Ce que vous voyez est ce que vous obtenez, mais ce que tu vois est ce que tu veux dire ».

Markdown, cependant, est plus qu'un schéma de formatage simple, c'est aussi un outil logiciel qui convertit le formatage du texte brut en HTML.

C'est pourquoi la syntaxe est importante. Si vous voulez un titre sur votre page Web, Markdown en créera un basé sur le (s) caractère (s) que vous utilisez devant votre titre. Un échantillon d'une partie de la syntaxe de Markdown est montré dans cette capture d'écran:

fenêtre de retext montrant la syntaxe et l'aperçu 2
Conversion Markdown en HTML

Alors, comment puis-je faire cette conversion de texte brut en HTML?

Le Markdown de John Gruber est un script Perl qui s'exécute sur la ligne de commande. Fondamentalement, il lit le texte Markdown que vous créez et crée une page Web à partir de celui-ci.

J'éviterai la ligne de commande ici car il y a de nombreux éditeurs Markdown remarquables qui peut faire cette conversion pour vous. Non seulement cela, beaucoup de ces éditeurs vous permettront d'écrire votre texte et de vous montrer à quoi ressemblera la page Web (appelée rendu) en même temps.

Les éditeurs Markdown sont généralement configurés pour afficher deux cadres. Le cadre de gauche est l'endroit où vous écrivez votre texte et le cadre de droite vous montre à quoi ressemblera le texte formaté en HTML:

ghostwriter deux images 1
La plupart des éditeurs Markdown ont deux volets pour écrire et prévisualiser le texte

Lorsque vous avez terminé avec votre texte et que vous en êtes satisfait, enregistrez simplement le fichier Markdown. De cette façon, vous l'aurez toujours au cas où vous auriez besoin de le modifier ou de le réécrire plus tard. Une fois le fichier enregistré, vous pouvez demander à l'éditeur d'exporter le fichier de démarque au format HTML.

L'éditeur créera la page Web en utilisant votre Markdown comme référence. Votre fichier Markdown ne sera pas modifié pendant une exportation - vous l'aurez toujours - avec un fichier HTML (page Web) nouvellement créé que vous pouvez placer sur un serveur Web.

Notes: De nombreux éditeurs Markdown peuvent également exporter vos fichiers Markdown vers d'autres formats, tels que .doc, .docxainsi que .pdf. Vous pourrez en savoir plus sur ces configurations avancées et sur les logiciels supplémentaires dont vous pourriez avoir besoin plus tard.

Syntaxe de base de Markdown

Pour que le nouvel utilisateur de Markdown se mette rapidement à jour, je vais limiter cela pour couvrir la syntaxe que j'utilise le plus souvent. Celles-ci, je crois, seront les plus utiles - vous pouvez être productif maintenant tout en en apprenant plus sur ce que Markdown peut faire pour vous plus tard.

Ecrire des titres

J'utilise normalement # caractères pour désigner les en-têtes. Il y a six niveaux:

# Level 1 Heading
## Level 2 Heading
### Level 3 Heading
#### Level 4 Heading
##### Level 5 Heading
###### Level 6 Heading

Il existe un autre style de titre qui utilise des lignes sous le texte. J'utilise rarement ce type de titre car je suis limité à seulement deux. Une double ligne, qui est faite avec le = caractère, fait un H1 titre. Une seule ligne, faite avec le - caractère, fait un H2 titre:

Level 1 Heading
===============

Level 2 Heading
---------------
Titres et sous-titres Markdown

Paragraphes

Les paragraphes sont séparés par une ligne vide (assurez-vous qu'il y a une ligne vide entre les paragraphes). N'indentez pas du tout la première ligne. Indentation avec un <Tab> or <spaces> a un but différent dans Markdown.

Un paragraphe est un bloc de texte et ne doit pas être mis en retrait avec des espaces ou des tabulations. Il peut avoir une ou plusieurs lignes. Pour terminer un paragraphe et en commencer un nouveau, le <Enter> la touche est frappée deux fois; les paragraphes sont séparés par une ligne vide.

Exemple de paragraphe dans Markdown

Sauts de ligne

N'oubliez pas qu'avec les paragraphes, une ligne vide doit les séparer et cela se fait en appuyant deux fois sur le <Enter> clé. Markdown est strict à ce sujet.

Markdown ne prend pas en charge les paragraphes «encapsulés» ou «de longueur de ligne fixe». Autrement dit, frapper le <Enter> la touche une fois ne forcera pas le texte à une nouvelle ligne. Cela peut apparaître ainsi dans la fenêtre d'édition, mais le HTML ne l'affichera pas.

Pourtant, il y aura des moments où vous devrez peut-être diviser des paragraphes avec un moyen de rompre une ligne. Markdown a un moyen de le faire, mais cela peut sembler un peu étrange au début: un saut de ligne est effectué en terminant une ligne avec deux espaces ou plus, puis en appuyant sur le <Enter> clé une fois.

Sauts de ligne dans la syntaxe Markdown

Voici un exemple de travail d'un court verset. Chaque ligne a deux espaces à la fin. La dernière ligne, puisque c'est la fin du verset, n'a pas d'espaces supplémentaires. Puisque c'est la fin du verset (paragraphe), j'ai frappé le <Enter> touche deux fois:

BAA Baa mouton noir,
Avez-vous de la laine ?.
Oui Monsieur. Oui Monsieur.
Trois sacs pleins.

L'ajout de deux espaces à la fin d'une ligne, pour créer un saut de ligne, peut prendre un certain temps pour s'y habituer.

Saut de ligne réussi dans Markdown

Règles horizontales

Les règles horizontales sont idéales pour diviser le texte en sections.

Utilisez trois tirets ou plus -, souligne _, ou des astérisques * pour les règles horizontales, comme ceci:

`---`

`***`

`___`

Vous pouvez même mettre des espaces entre les caractères:

`- - -`

Je n'utilise pas très souvent les règles horizontales dans les articles ou les articles, mais elles me sont utiles dans les entrées de journal, les journaux système et les notes de cours.

Exemple de règles horizontales Markdown

Accent sur le texte en gras et en italique

Lorsque vous voulez qu'un mot ou une phrase se démarque et soit remarqué, vous pouvez le mettre en gras ou en italique. L'italique et le texte en gras peuvent être créés de deux manières. La première consiste à entourer le texte d'astérisques *, tandis que la seconde consiste à utiliser des traits de soulignement _.

Pour mettre en italique un mot ou une phrase, entourez le texte d'un trait de soulignement ou d'un astérisque. Pour mettre un mot ou une phrase en gras, entourez-le de deux traits de soulignement ou astérisques:

This is *italics* made with asterisks.

This is _italics_ made with underscores.

This is **bold** made with asterisks.

This is __bold__ made with underscores.

N'oubliez pas d'utiliser le même caractère. Un astérisque sur un côté d'un mot ou d'une phrase et un trait de soulignement sur le côté ne fonctionneront pas. Le même caractère doit figurer des deux côtés du mot ou de la phrase.

Ajout de gras et d'italique dans Markdown

Bloquer les citations

Les guillemets en bloc sont utilisés pour les citations directes. Si vous écriviez une entrée de blog et que vous vouliez répéter ce que Benjamin Franklin a dit, vous pouvez utiliser une citation en bloc.

Un crochet à angle droit est utilisé pour spécifier un guillemet de bloc:

> This is a block quote.

>> Use two right angle brackets if you want a block quote that is further indented.
Exemple de devis de blocage de Markdown

Ajout de liens dans Markdown

Les liens sont tout simplement cool. Il existe trois façons de créer des liens sur Markdown de base, mais je n'en couvrirai que deux ici: les liens réguliers et les liens automatiques.

Le troisième type de lien, appelé liens de référence, est pris en charge dans les versions de base de Markdown et plus avancées. Je veux commencer rapidement. Vous pouvez rechercher des liens de référence lorsque vous êtes prêt pour cela.

Des liens réguliers vous permettent de créer des liens vers divers sites Web. Le nom du site, ou une phrase que vous souhaitez utiliser, est placé entre crochets []. Le lien réel est entre parenthèses ().

Visit [It's FOSS](https://itsfoss.com) today!

Les liens automatiques sont réalisés avec des équerres <> entourant le lien. Le lien est une adresse réelle (une adresse Web ou une adresse e-mail). Le lien est épelé et, lorsqu'il est converti en HTML, le lien épelé devient un lien fonctionnel.

<http://automatic-link-to-url.com/>

<[email protected]>

Ceci est utile lorsque vous souhaitez épeler l'adresse dans votre texte:

Ajout de liens dans le démarquage

Ajout d'images dans Markdown

Les liens vers des images sont presque identiques aux liens vers des sites Web. La petite différence entre les liens de sites et les images, c'est que les liens d'images commencent par un bang (point d'exclamation) !

Le nom de l'image, ou une phrase descriptive de l'image, est placé entre crochets []. Le lien réel est entre parenthèses ().

Vous pouvez intégrer des images comme ceci:

![alternate text](./images/image.jpg)

Voici un exemple de lien d'image. C'est un exemple de lien, sans image, mais c'est un bon exemple de ce à quoi un lien réel pourrait ressembler:

![a picture of bill](./images/my_photo_of_me.jpg)
Ajout d'images dans Markdown

Liste

Les listes sont faites pour de nombreuses raisons. Ils peuvent être utilisés comme des éléments de «choses à faire», des éléments de rubrique dans un plan, des listes de pièces dans un projet d'assemblage, etc. Il existe deux principaux types de listes: non ordonnées et ordonnées.

Les listes non ordonnées ne sont pas numérotées; ce sont les «puces» que nous voyons dans de nombreux documents. Les listes ordonnées sont numérotées.

Pour créer une liste ordonnée (numérotée), commencez simplement chaque ligne par un nombre, comme ceci:

1. Item one.
2. Item two.
3. Item three.

Les listes non ordonnées ne sont pas numérotées, mais utilisent soit un astérisque *, un signe plus +, ou un signe moins - au début de chaque élément de la liste. Je préfère utiliser un astérisque ou un signe moins, mais vous avez le choix:

* Item one.
+ Item two.
- Item three.

Les sous-éléments peuvent être ajoutés à la fois aux listes ordonnées et non ordonnées par indentation, comme ceci:

1. Item 1
    1. Sub-item 1
    2. Sub-item 2
2. Item 2
3. Item 3
Listes ordonnées et non ordonnées dans Markdown

Aide-mémoire sur la syntaxe de Markdown

Pour votre information, voici une courte liste de la syntaxe Markdown qui a été couverte dans cette petite introduction.

Si vous décidez de l'adopter comme outil d'écriture, vous constaterez que Markdown a les moyens de simplifier encore plus l'écriture.

aide-mémoire sur la syntaxe de démarque

Téléchargez la feuille de triche Markdown au format PDF

Conclusion

Markdown peut faire plus que ce que j'ai décrit ici. Un pourcentage énorme de mon écriture peut être accompli avec la syntaxe Markdown que j'ai couverte ici - et ce sont les éléments que j'utilise le plus souvent, même dans des projets plus complexes.

Si tout cela semble trop simple, c'est vraiment aussi simple que cela. Markdown a été conçu simplement pour la tâche d'écriture, mais vous n'êtes pas obligé de me croire sur parole. Essaye le! Il n'est pas nécessaire d'installer un éditeur Markdown; vous pouvez le faire en ligne. Il y a plusieurs bons éditeurs Markdown en ligne. En voici trois que je préfère:

John Gruber Dingus, Editeur.mdainsi que Dillinger. Editor.md et Dillinger vous permettront de voir votre Markdown rendu au format HTML en temps réel. Dingus ne prévisualise pas en temps réel, mais il y a une feuille de triche sur la syntaxe Markdown sur la page pour référence.

Modification de Markdown dans le navigateur

Essayez certains des exemples de cet article sur l'un de ces éditeurs en ligne. Essayez également certaines de vos propres idées. Cela vous permettra de vous habituer à Markdown avant de vous engager éventuellement pour en savoir plus.

Et si vous souhaitez prendre en charge It's FOSS, vous pouvez acheter notre guide Markdown au format PDF et EPUB. Il couvre ce que vous venez d'apprendre avec un peu plus d'explications et d'exemples.

Obtenez le livre `` Utilisation de Makrdown '' et le support C'est FOSSArticle original