Comment utiliser Markdown dans le développement Web

Sep 16, 2025

Comment

[dix] [dix] [dix]

[dix]

En tant que développeurs Web et créateurs de contenu, nous passons généralement beaucoup de temps à écrire du texte qui est enveloppé à l'intérieur. Html code. Et si nous vous disions qu'il y a une meilleure façon de le faire avec Markdown? Une manière dans laquelle vous avez pu se concentrer sur l'écriture et non le code?

[dix]

Markdown est un langage de balisage clair et léger développé en 2004 par John Gruber et Aaron Swartz. Créé à l'origine pour effectuer une écriture XHTML / HTML plus facile en convertissant des fichiers texte en ligne en HTML ou XHTML valide structurellement, le marquage peut être utilisé pour presque tout type d'écriture: manuscrits, didacticiels, notes, contenu Web et plus.

Bien que relativement simple, le marquage peut être un peu intimidant lorsque vous démarrez d'abord. Mais une fois que vous avez eu la suspension, vous réaliserez rapidement combien de temps a été utilisé pour formater votre code au lieu de taper votre contenu.

01. Choisissez un éditeur de marquage

Lorsque vous travaillez avec Markdown pour le Web, il est important de comprendre la syntaxe de base et les limitations que vous pouvez affronter. Avant de commencer, vous avez besoin d'un type d'éditeur et d'un interprète pour votre site. Alternativement, vous pouvez convertir le marquage avant de publier.

You'll need some kind of editor to get started — Vous aurez besoin d'une sorte d'éditeur pour commencer

Il y a plusieurs éditeurs à partir duquel vous pouvez choisir. Par mot est génial car il offre une large gamme d'options d'exportation, notamment HTML et PDF. Une autre excellente alternative est Empiler - Un éditeur de marquage en ligne gratuit. Bien sûr, tout éditeur de texte brut fonctionnera.

[dix]

Jetpack is handy for use with WordPress — Jetpack est pratique pour une utilisation avec WordPress

Si vous ne prévoyez pas de convertir votre marquage en HTML, vous pouvez obtenir un plugin (ou un interrupteur) pour votre site. Pour WordPress, Jetpack Ayant un excellent support pour Markdown, ce qui vous permet d'utiliser Markdown directement à l'intérieur des postes et des commentaires - tant que vous permettez cette option.

Comme n'importe quel langage de balisage, Markdown a sa propre syntaxe. Remarque: Il existe un certain nombre de saveurs différentes ou de variétés de marquage. Dans cet article, nous ne couvrirons que la syntaxe communément partagée.

02. Configurez les en-têtes

En HTML, il y a six styles de rubrique: h1 , h2 , h3 , h4 , h5 et h6 . Pour les recréer dans Markdown, utilisez une série de symboles HASHTAG ( # ) - Correspondant au numéro de la rubrique - suivi du texte de la rubrique. Par exemple, pour créer un & lt; h1 & gt; tag, utilisez un hashtag # ; pour un & lt; h2 & gt; tag, utiliser deux hashtags ## ; et ainsi de suite.

Entrée de marquage:

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

Sortie HTML:

 & lt; H1 & GT; Rubrique 1 & LT; / H1 & GT;
& lt; H2 & GT; Heading 2 & LT; / H2 & GT;
& lt; h3 & gt; Heading 3 & lt; / h3 & gt;
& lt; H4 & GT; Rubrique 4 & LT; / H4 & GT;
& lt; H5 & GT; Rubrique 5 & LT; / H5 & GT;
& lt; H6 & GT; Heading 6 & LT; / H6 & GT;

03. Marquez les paragraphes

Les paragraphes sont représentés par le & lt; p & gt; tag dans html. En marquage, ils sont séparés par une ou plusieurs lignes vides. Comme HTML, WhitSpace est ignoré. Donc, si vous ajoutez 20 lignes vierges, vous n'aurez toujours qu'un paragraphe.

Entrée de marquage:

 Le renard brun rapide saute sur le chien paresseux.
Le chien paresseux s'en fiche, car il est un chien paresseux.

Sortie HTML:

 & lt; p & gt; le renard brun rapide saute sur le chien paresseux. & Lt; / p & gt;
& lt; p & gt; le chien paresseux ne se soucie pas, car il est un chien paresseux. & lt; / p & gt;

04. Style Les pauses de la ligne

Pauses de ligne, qui sont représentées en HTML avec le & lt; BR & GT; Les balises sont ajoutées en utilisant une seule pause de ligne, avec deux espaces à la fin de la ligne précédente.

Entrée de marquage:

 Le renard brun rapide
saute sur le chien paresseux.

Sortie HTML:

 & lt; P & GT; Le renard brun rapide et le lt; BR & GT; saute sur le chien paresseux. & Lt; / p & gt;

05. Marquez l'accent

Il y a deux façons d'accentuer votre texte: italique ( & lt; em & gt; en HTML) ou audacieux ( & lt; fort & gt; en HTML).

Dans Markdown, vous accomplissez cela en utilisant un ou deux astérisques ( * ). Vous pouvez également utiliser des traits de soulignement (_), mais je m'envoie d'astérisques, car il existe d'autres saveurs de marquage qui utilisent des soulignements pour d'autres choses.

Entrée de marquage:

 * Texte italique *
** Texte audacieux **

Sortie HTML:

 & lt; EM & GT; Texte italique & LT; / em & gt;
& lt; forte & gt; Texte audacieux et lt; / fort & gt;

[dix]

Remarque: vous pouvez également créer un texte en gras-italique en utilisant trois astérisques: *** Texte gras et italique *** .

06. Créer des règles horizontales

Créer une règle horizontale (ou & lt; h & gt; Dans HTML), utilisez une série de trois traits d'union ou plus ( --- ), astérisques ( *** ) ou des signes égaux ( ==== ). C'est votre choix lequel vous préférez, mais assurez-vous simplement d'inclure une ligne vide au-dessus et ci-dessous.

Entrée de marquage:

 Apprendre quelque chose de nouveau est toujours très amusant.

---

C'est sûr!

Sortie HTML:

 & lt; p & gt; apprendre quelque chose de nouveau est toujours beaucoup amusant. & Lt; / p & gt;
& lt; h & gt;
& lt; p & gt; c'est sûr! & lt; / p & gt;

07. Ajouter des images et des liens

En HTML, une image est ajoutée en utilisant le & lt; img & gt; tag et liens sont ajoutés en utilisant le & lt; a & gt; étiqueter.

Dans Markdown, les images commencent par un point d'exclamation ( ! ), suivi des crochets ( [] ) Pour le "texte alt", et des parenthèses ( () ) pour le chemin de l'image. Vous pouvez également inclure un titre facultatif à l'intérieur de citations doubles ( "" ).

Avec des liens, c'est presque la même chose, sauf qu'il n'y a pas de point d'exclamation.

Entrée de marquage:

! [Texte alt] (/ chemin / sur / image.jpg "titre facultatif")
[Texte de liaison] (http://example.com "titre facultatif")

Remarque: vous pouvez également utiliser des liens de référence et des images, mais cela n'est pas couvert ici.

Sortie HTML:

 & lt; img src = "/ chemin / à / image.jpg" alt = "text alt" title = "titre facultatif" / & gt;
& lt; un href = "http://example.com" title = "titre facultatif" & gt; link text & lt; / a & gt;

08. Faire des listes

Il existe deux types de listes dans HTML: commandé ( & lt; ol & gt; ) et non ordonné ( & lt; ul & gt; ). Avec Markdown, utilisez des chiffres pour les listes commandées et des astérisques ( * ) ou des traits d'union ( - ) pour les listes non ordonnées.

Entrée de marquage:

 1. Objet 1
2. Point 2
* Premier article
* Deuxième article
- premier article
- Deuxième article

Sortie HTML:

 & lt; OL & GT;
& lt; li & gt; article 1 & lt; / li & gt;
& lt; li & gt; item 2 & lt; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& lt; li & gt; premier article & lt; / li & gt;
& lt; li & gt; deuxième article & lt; / li & gt;
& lt; / ul & gt;
& lt; ul & gt;
& lt; li & gt; premier article & lt; / li & gt;
& lt; li & gt; deuxième article & lt; / li & gt;
& lt; / ul & gt;

09. Ajouter un code d'inline et des blocs de code

Lorsque vous travaillez avec le code dans HTML, vous pouvez l'inclure comme un élément en ligne utilisant le & lt; code & gt; Mots clés; ou comme un bloc de texte pré-formaté utilisant le & lt; pré & gt; & lt; code & gt; combinaison.

Dans Markdown, ces éléments sont délimités à l'aide d'un seul backtitude de backtitude de chaque côté ( ` ); ou en utilisant un style clôturé, qui comprend trois backtstics au-dessus et au-dessous du bloc de code ( `` ` ).

Entrée de marquage:

 La variable `NumberOfpoints` est titulaire du score du joueur.
Si joueur.wins {
Nombre de points + = 1
}

Sortie HTML:

 The & LT; Code & GT; Nombre de points & LT; / Code & GT; La variable contient le score du joueur.
& lt; pré & gt; & lt; code & gt;
Si joueur.wins {
Nombre de points + = 1
}
& lt; / pré & gt; & lt; / code & gt;

10. Style Up BlockQuotes

BlockQuotes sont ajoutés en HTML à l'aide de la & lt; blockquote & gt; étiqueter. Dans Markdown, utilisez le symbole supérieur à ( & gt; ) avant la ligne.

Entrée de marquage:

 & gt; Ceci est mon blockquote.
& gt;
& gt; Cela fait partie du même blockquote.
& gt; Ceci est un nouveau blockquote.

Sortie HTML:

& lt; blockquote & gt;
& lt; p & gt; ceci est mon blockquote. & lt; / p & gt;
& lt; BR & GT;
& lt; p & gt; cela fait partie du même BlockQuote. & lt; / p & gt;
& lt; / blockQuote & gt;
& lt; blockquote & gt;
& lt; p & gt; ceci est un nouveau blockquote. & lt; / p & gt;
& lt; / blockQuote & gt;

11. Intégrer en ligne HTML

Il y a des moments où vous devez créer un élément HTML qui n'est pas pris en charge;Par exemple, vous aurez peut-être besoin d'un & lt; table & gt; ou & lt; div & gt; étiqueter.

Si tel est le cas, vous pouvez mélanger le marquage et le HTML, mais il existe certaines restrictions.Par exemple, vous ne pouvez pas inclure le marquage dans les balises HTML au niveau des blocs.

Lire la suite:

20 modules nœud.js que vous devez savoir
12 questions javascript communes répondues
9 des meilleures ressources pour l'apprentissage HTML et CSS

[dix] [dix]

[dix]

Comment utiliser Markdown dans le développement Web

01. Choisissez un éditeur de marquage

02. Configurez les en-têtes

03. Marquez les paragraphes

04. Style Les pauses de la ligne

05. Marquez l'accent

06. Créer des règles horizontales

07. Ajouter des images et des liens

08. Faire des listes

09. Ajouter un code d'inline et des blocs de code

10. Style Up BlockQuotes

11. Intégrer en ligne HTML

Comment - Most Popular Articles

Comment créer une herbe 3D

Créer un effet d'aberration chromatique

Commencez avec l'impression monotype

Colourise Greyscale Travail dans Photoshop

Comment peindre des réflexions convaincantes

Stitch and Composit 360 Footage

Faire une double exposition dans Photoshop

Créer des tableaux interactifs dans Ionic 2

Catégories