Google logo
Coucou mes amis du blog de BlindHelp!
Ceux qui travaillent dans l'accessibilité, nous savons l'importance qu'ont les contenu généré de manière accessible et avec une structure sémantique correcte. Ils apprécient également ce type de contenu, les utilisateurs qui utilisent certain produits d'assistance technique ou qui pour une raison quelconque ont des besoins spéciaux pour accéder au contenu Web.
Avec l'accroissement rapide des informations publiées sur le Web à l'aide d'outils tels que les gestionnaires de contenu, Il est nécessaire de sauver l'idée centrale qui a motivé cet article: Générer du contenu Web, correctement mis en forme.
Un contenu correctement mis en forme permettra aux utilisateurs des produits d'assistance technique ou avec des besoins en particulier d'avoir l'accès à l'information pour qu'ils puissent comprendre et y accéder avec le moindre effort possible. Si bien que dans les textes imprimés à l'encre et papier Nous cherchons à donner des styles et structure pour faciliter la compréhension, même si vous n'avez pas un handicap, de même cela devrait être aussi fait sur le web.
Dans les textes imprimés, l'affichage de différents styles (titres, sous-titres, puces ou numérotation de listes, etc.) donne sens à ce qui est lu. Sur le web, l'utilisation d'une mise en fforme approprié (titres, listes, liens, etc.) ont la même fonction.
L'évidence est déterminée parce que beaucoup de produits d'assistance technique y compris les lecteurs d'écran, identifient ces étiquettes et c'est grâce à eux que l'utilisateur parvient à identifier Quel type de contenu représente le texte.
Si seulement les styles sont utilisés indiquant certaines caractéristiques grâce à la couleur, l'emphase, l'italique ou le souligné, un utilisateur aveugle, par exemple, il n'aurait pas une notion précise où il commence un paragraphe et où il termine l'autre. La même chose pourrait arriver à une personne âgée ou à une personne avec déficit de l'attention ou un trouble d'apprentissage et même une personne sans handicap, habitués à des textes qui possèdent la structure et pour quelque raison devrait accéder à ce contenu en utilisant un navigateur qui affiche uniquement le texte.
La bonne chose, en vertu de l'avis de qui écrit, consiste à utiliser l'HTML (Hypertext markup language) qui est le langage de balisage hypertexte sur le Web. Toutefois, pas tous les personnes qui créent des contenus sur le Web connaissent ce langage et plus normalement, ils utilisent des gestionnaires de contenu pour publier, est il est moins probable qu'ils apprennent la mise en forme quand il l'utilisent.
Certaines personnes qui ont lu probablement pensent que il n'y a pas besoin de l'apprendre, parce que beaucoup de ces gestionnaires comprennent des fonctions qui vous permettent de générer le contenu mis en forme. Ceci est une demi-vérité, parce que s'il est vrai que des nombreux gestionnaires de contenu incluent ces fonctions, le HTML généré à la fin n'est guère optimale ni approprié dans la majorité des cas.
Une alternative pour générer un contenue Web correctement mis en forme sans connaître l'HTML consiste à utiliser MarkDown.
Markdown, est un langage de balisage léger et standardisée, développé par
John Gruber
en 2004 avec la collaboration de
Aaron Swartz
Ce langage est très souple et facile d'éditer avec n'importe quel éditeur de texte Même si certains ont été créés spécifiquement pour ce langage.
Ce langage n'a pas évolué depuis. Même si de nombreuses extensions et “extras” sont venues se greffer au projet originel. Le projet initial avec sa documentation est sur
Daring Fireball.
Les fichiers sont généralement enregistrés avec l’extension .md (ou .markdown ) pour indiquer aux interpréteur la nature du texte qu’il vont lire ; mais ça n’a rien d’obligatoire. Comme le résultat sera exporté en HTML, vous pouvez tout à fait introduire directement des balises HTML dans votre texte ; mais celui-ci deviendra moins lisible et ne pourra plus être édité par quelqu’un ne maîtrisant pas le HTML. Attention, le formatage markdown ne sera pas appliqué à l’intérieur de ces balises.
Pour exporté le fichier MD en HTML, vous pouvez utiliser le
convertisseur Pandoc
Le principal avantage est qu'il a une courbe d'apprentissage très petite, En plus de que le contnu qui est générés est très facile à lire, la plupart des gestionnaires de contenu prennent en charge Markdown, soit par des plug-ins ou par des fonctions spécifiques Par exemple En wordpress cela s'active dans la configuración d'écriture selon des amis.
Il y a aussi comme cela a déjà été mentionné des éditeurs spécifiques pour ce langage. Certains permettent d'exporter le contenu généré au format HTML, PDF et même Certains permettent d'ajouter des CSS.
malheureusement bon nombre de ces éditeurs ne sont pas entièrement accessibles au moins quand vous êtes un utilisateur de lecteur d'écran.
Il existe de nombreux éditeurs hors ligne.
Pour les plates-formes Windows, un éditeur qu'il soit accessible est
"MarkDown# Editor".
Ce tutoriel est rédigé avec celuici!
Il y a aussi l'application:
"Write Monkey",
un peu austère à mon goût, mais très fonctionnel et gratuit.
Il est aussi accessible mais Je préfère le premier c'est une question de goût ! lol!
Pour Windows également il y a,
"Markdown Pad", gratuit.
Pas tester si celui-ci est accessible!
Pour les plates-formes Mac OSx il existe
"Mou".
Pour les plates-formes Linux, il existe
"ReText".
J'ignore si celui-ci est accessible pour les DV sous Linux!
Il reste possible d’ouvrir et d’éditer des fichiers markdown avec n’importe quel éditeur de code ou éditeur textuel (le notepad (Bloc-notes de Windows ) ou le TextEdit livré avec votre système d’exploitation). Mais vous êtes alors privé de la coloration syntaxique et de la prévisualisation en temps réel de ce que vous êtes en train d’écrire.
J'ai oublié aussi vous pouvez utiliser l'application:
"Notepad++" pour Windows.
avec un
thème nommé markdown_npp dans sa version modifiée
basé sur le thème original de Thomas Smits.
Ce projet fournit un fichier userDefineLang.xml très simple pour Notepad++ qui effectue quelques coloration syntaxique de base pour les textes de markdown. Il s'agit d'une version d'un thème markdown pour Notepad++ fait par un gars dans sa version modifiée, si vous souhaitez télécharger cette version au format zip, cliquez sur le lien ci-dessus.
Si vous souhaitez enregistrer uniquement le fichier cliquez sur le lien ci-dessous.
Instructions d'installation (tiré du site Web de
Notepad++):
Définissez votre langage... dans le menu LangageImporterOuvrir.Markdown dans le menu LangageNote: traduit de l'anglais, vous pouvez consulter le fichier README.md qui se trouve dans le fichier zip.
Licence originale du projet de Thomas Smits:
Copyright (c) 2010 Thomas Smits
Permission est accordée, gratuitement, à toute personne obtenant une copie de ce logiciel et les fichiers de documentation associée (le "logiciel"), pour faire face dans le logiciel sans restriction, y compris sans limitation, les droits d'utiliser, copier, modifier, fusionner, publier, distribuer, concéder en sous-licence, et/ou vendre des copies du logiciel et de permettre aux personnes à qui le logiciel est fourni pour ce faire, les conditions suivantes:
L'avis de copyright ci-dessus et cette notification de permission doivent figurer dans toutes les copies ou les parties importantes du logiciel.
LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE,
EXPRESSE OU IMPLICITE,
Y COMPRIS MAIS NON LIMITÉ AUX GARANTIES DE QUALITÉ MARCHANDE, D'ADÉQUATION POUR UN USAGE PARTICULIER ET DE NON-CONTREFAÇON.
EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DE DROITS D'AUTEUR EST RESPONSABLE POUR TOUTE RÉCLAMATION, DOMMAGE OU AUTRE RESPONSABILITÉ, SI DANS UNE ACTION CONTRACTUELLE, DÉLICTUELLE OU AUTRE, RÉSULTANT D'OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU AUTRES TRANSACTIONS DANS LE LOGICIEL.
Pour découvrir markdown et voir un peu ce qu’il peut faire, vous pouvez essayer un des nombreux éditeurs en ligne comme "Markable",
l’éditeur original de Gruber,
"Dingus"
ou encore le très puissant
"StackEdit"
que vous pouvez synchroniser avec Google docs.
Ci-dessous j'indique comment générer le contenu mis en forme en utilisant la syntaxe de Markdown.
Les titres HTML se produisent en plaçant un certain nombre de dièses(signe) # avant le texte correspondant au niveau du titre souhaité (HTML offre jusqu'à six niveaux).
Vous tapez:
# Ceci est un H1## Ceci est un H2### Ceci est un H3#### Ceci est un H4##### Ceci est un H5###### Ceci est un H6
(mais n’allez pas au delà de 7).
Vous obtenez le Résultat affiché dans le navigateur comme sui:
(mais n’allez pas au delà de 7).
Vous pouvez enfermer chaque titre entre dièses (signe) #, pour des raisons purement esthétiques, parce qu'il n'est pas nécessaire du tout de le faire, c'est-à-dire, vous pouvez faire
ceci:
### Ceci est un H3 ###
Pour les titres des deux premiers niveaux il existe également une autre façon de faire la même chose, qui serait la suivante:
Ceci est un H1=============
Ceci est un H2-------------
C'est-à-dire, pour les titres principaux vous souligner le texte avec le signe égal. Pour les titres de deuxième niveau vous utilisés les tirets pour souligner. C'est indifférent le nombre de signes égal ou tirets que vous utilisé, avec un c'est suffisant.
Note: Vous pouvez aussi dans un titre inclure un lien:
Vous taper:
### Titre de niveau 3 incluant [un lien](#)Vous obtenez le Résultat affiché dans le navigateur comme sui:
Les paragraphes sont indiqués avec une ou plusieurs lignes de séparation (en appuyant sur la touche entrée).
Pour afficher un paragraphe, sautez deux ligne et taper votre texte. Un seul saut de ligne correspond à un retour chariot et pas à un changement de paragraphe.
Effectuer un saut de ligne simple dans votre texte markdown n’aura aucun effet quand vous l'exporter en HTML.
Sauf si vous terminez votre ligne par un double espace (ou plus que ça).
Un retour chariot sera alors exporté.
Vous taper:
Ligne sans espace à la fin
Ligne avec 2 espaces à la fin
Troisième ligneVous obtenez le Résultat affiché dans le navigateur comme sui:
Ligne sans espace à la fin Ligne avec 2 espaces à la fin
Troisième ligne
Terminer une ligne avec deux ou plusieurs espaces:
La première ligne se termine par trois espace après la virgule, la deuxième ligne fini par un point final.
Par exemple vous taper:
Les roses sont rouges,
les violettes sont bleues.Vous obtenez le Résultat affiché dans le navigateur comme sui:
Les roses sont rouges,
les violettes sont bleues.
En résumer:
Pour effectuer un saut de ligne à l'intérieur d'un paragraphe il faut introduire 2 ou davantage de caractères espaces à la fin de la ligne (avant le saut à la ligne).
Pour formater une partie de votre texte comme emphase, entourez le par des astérisques ou des souligné.
Entourer par un seule signe astérisque il indique italique (emphase faible : *;)
et par un double signe astérisque il indique gras (emphase forte: **;).
Il est possible de combiner les deux. Pour indiquer les deux sont utilisés 3 astérisques. Peuvent également être utilisés les soulignés, de la même manière, mais les deux ne doivent pas être mélangés. Un double tildes vous permettent de barrer le texte.
Texte dont certains éléments sont formatés pour être en italique, en gras ou barrés.
Par exemple, vous taper:*Ceci est un texte en italique***et ceci est en gras**
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Ceci est un texte en italique
et ceci est en gras
Pour afficher un bloc de citation, commencez le paragraphe par un signe supérieur. Si votre bloc contient plusieurs lignes, vous pouvez faire des sauts de lignes à la main et toutes les ouvrir par un signe supérieur, mais ce n’est pas nécessaire. Ces bloc peuvent contenir d’autres éléments markdown comme des titres ou des listes.
Par exemple vous taper:
> #### En-têtes dans les blocs de citation>> * Vous pouvez citer une liste.> * Etc.
Vous obtenez le Résultat affiché dans le navigateur comme sui:
En-têtes dans les blocs de citation
- Vous pouvez citer une liste.
- Etc.
Exemple d'une citation:
Vous taper:
> une citation est un paragraphe ouvert par un signe supérieur
Vous obtenez le Résultat affiché dans le navigateur comme sui:
une citation est un paragraphe ouvert par un signe supérieur
utilisez le caractère supérieur > avant le bloc de texte.
Vous taper:
Ceci est une ligne normale
> Ceci fait partie d'un bloc de citation.> Ceci fait partie du même bloc de citation.
Ceci continue le bloc, même s'il n'y a pas de symbole 'supérieur'.
La ligne vide termine le bloc.
Ceci est une ligne normale
> Ceci fait partie d'un bloc de citation.> Ceci fait partie du même bloc de citation.>> > Ceci est un autre bloc de citation imbriqué.> > Ceci fait partie du bloc imbriqué.>> Ceci fait partie du bloc de citation de premier niveau.
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Ceci est une ligne normale
Ceci fait partie d'un bloc de citation.
Ceci fait partie du même bloc de citation.
Ceci continue le bloc, même s'il n'y a pas de symbole 'supérieur'.
La ligne vide termine le bloc.
Ceci est une ligne normale
Ceci fait partie d'un bloc de citation.
Ceci fait partie du même bloc de citation.Ceci est un autre bloc de citation imbriqué.
Ceci fait partie du bloc imbriqué.Ceci fait partie du bloc de citation de premier niveau.
Pour afficher une liste, commencez la ligne par un astérisque signe "*", un tiret signe "-" ou un plus signe "+".
Vous taper:
* élément1* élément 2* élément 3
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Vous taper:
+ élément a+ élément b+ élément c
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Vous taper:
- premier élément- deuxième élément- troisième élément
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Voici une liste non ordonnée, avec paragraphes:
Un élément de liste.
Avec plusieurs paragraphes.
Barre
Vous pouvez les imbriquer:
Pour afficher une liste ordonnée, sans paragraphes commencez la ligne par un nombre suivit d’un point. Pour que votre markdown soit plus lisible, je vous conseille d’ordonner proprement votre liste. Mais ce n’est pas nécessaire pour le rendu HTML.
C’est le navigateur qui se charge d’ajouter les nombre pour ordonner la liste.
Par exemple, vous taper:
1. Élément A1234. Élément B3. Élément C4. Élément D
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Voici une autre liste pour le fun!
Vous taper:
1. Foo
2. Bar`
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Pour afficher un bloc de code préformaté, sautez deux lignes comme pour un paragraphe, puis indentez chaque ligne par au moins 4 espaces ou une tabulation. Dans le navigateur, la touche tabulation vous fait changer de champ et il n’est généralement pas possible de l’utiliser. Le bloc se terminera dès qu’il arrivera sur une ligne non indentée.
Ceci est un paragraphe normal.
bloc de code.
Ceci est un paragraphe préformaté
bloc de code.Pour afficher du code dans une ligne, il faut l’entourer par des guillemets simples inversés : accent grave (`).
`code`
`<code>` enveloppant tout le contenu de ce que l'on veut ajouter sont délimitées par des guillemets simples inversés.
Vous pouvez inclure des guillemets simples inversés littéraux
comme `` `ceci` ``.
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Vous pouvez inclure des guillemets simples inversés littéraux
comme `ceci`.
Aussi appelé séparateur.
Pour afficher un filet de séparation, entrez <hr/>; dans votre texte ou au moins 3 astérisques "*" ou tirets "-" ou souligné "_" sur une ligne entourée de sauts de lignes. Il est possible de les séparer par des espaces pour des raisons purement esthétiques.
Donc, n'oubliez pas de taper trois ou plusieurs tirets ou astérisques ou soulignés.
Vous pouvez également les séparer par des espaces (un espace entre chaque tiret / astérisque / souligné ou 4 espaces entre chaque tiret / astérisque / souligné) pour des raisons purement esthétiques, par exemple.
Vous taper:***---___ * * *- - -_ _ _ * * *- - -_ _ _
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Remarque: Toutes ces méthodes ci-dessus donneront exactement le même résultat.
Il y a deux façons d'indiquer un lien. Le premier s'il fait partie d'un texte, et lorsque vous voulez faire une référence.
Dans le premier cas, le texte à afficher est alors indiqué entre crochets suivit de l’adresse du lien entre parenthèses. Dans les parenthèses, à la suite du lien, on peut indiquer un titre entre guillemets. Ce titre sera affiché lors du survol du lien dans le navigateur. Il sera également lu par les lecteurs d'écrans utilisé par les déficients visuels.
Exemple:
Vous tapez:[Télécharger le Récapitulatif des Syntaxe Markdown en format MD](https://cld.pt/dl/download/8eac8395-c40d-4c3a-91bf-0d2f48ba31b2/recapitulatifsyntaxemarkdown.md?download=true "Ouvrir le téléchargement dans une nouvelle fenêtre")
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Télécharger le Récapitulatif des Syntaxe Markdown en format MD
Voici un autre exemple:
Vous tapez:
[Google](http://www.google.com "Lien vers Google")
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Dans le second cas, l’adresse du lien se trouve à la fin du document ou où vous avez besoins de le placer et sera précédé d'un texte où vous écrivez une balise (étiquette) entre crochets,
celle-ci (contient le numéro de lien de référence comme valeur [1] [2] et ainsi de suite), cette même balise (étiquette) est suivi par ":" deux points suivi d'un espace, ensuite il vient
l’adresse du lien déjà mentionné au début, le tout en une même ligne.
Logiquement, vous devez placer cette même balise (étiquette) qui est entre crochets au début du document ou où dans un endroit de votre convenance, cette même balise (étiquette),
sera précédé d'un texte où vous écrivez une autre balise (étiquette) , encore une fois entre crochets, mais cette fois, vous écrirez le nom auquel se réfère le lien, les deux balises
(étiquettes) seront placés ensemble sur une même ligne, n'oubliez pas que cette ligne sera toujours placé au début du document contrairement à la deuxième ligne que nous avons
mentionné ci-dessus, elle sera toujours placée à la fin du document, mais pas avant la première ligne.
Exemple:
Vous tapez:
[Le blog de BlindHelp][1]
[1]: http://blindhelp.blogspot.fr/ "Le blog de BlindHelp"
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Vous pouvez le faire aussi de manière automatique en encadrant un lien par les signe inférieur et supérieur:
Vous tapez:
<http://www.google.com>
Il est alors cliquable et affiche l’url indiquée entre le signe inférieur et supérieur.
Vous obtenez le Résultat affiché dans le navigateur comme sui:
pour définir des adresses emails cliquables, il n'est pas nécessaire de les préfixer par mailto:
Remarque: si vous examinez le code HTML, vous constaterez que les liens de type <adresse_email> sont automatiquement encodés (et même associés par Pandoc à du JavaScript) et sont de ce fait relativement résistant aux robots de spam !
En résumer, pour définir un lien
Inline (technique HTML classique du lien "au fil du texte"):
Vous Taper:
Par [exemple](http://url.com/ "Titre")
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Par exemple
En résumer, pour les liens avec des
Étiquettes de style de référence (les titres sont facultatifs):
Vous Taper:
Par [exemple][ID]. Ensuite, n'importe où
sinon dans la doc, définissez le lien:
[ID]: http://exemple.com/ "Titre"
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Par exemple. Ensuite, n'importe où
sinon dans la doc, définissez le lien:
Lorsque je parle d'étiquette il s'agit de label de type urlId
L'URL peut optionnellement être écrite entre < >
sachez aussi que le label urlId n'est pas case-sensitive et peut contenir des espaces !
Les images sont indiquées de façon similaire aux liens seulement qu'ils sont précédés du symbole "!" point d'exclamation!
Donc, pour afficher une image, commencez par un point d’exclamation. Puis indiquez le texte alternatif entre crochets. Ce dernier sera affiché si l’image n’est pas chargé et lu par les moteurs de recherche. Terminez par l’URL de l’image entre parenthèses. Cette URL peut être un lien vers le web ou un chemin local de ce type :
/dossier_images/nom_de_mon_image.jpg. Après le lien vers l’image, il est possible d’ajouter un titre lu par les navigateurs et il sera affiché au survol de l’image par les lecteurs d'écrans utilisé par les déficients visuels.
Exemple d'image par référence Inline (les titres sont facultatifs)
Vous taper:
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Google logo
Voici encore quelques exemples:
Vous tapez:
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Vous tapez:
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Vous tapez:
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Exemple d'image référencée:
Vous tapez:![Google logo][Google] ensuite
[Google]: https://www.google.fr/images/srpr/logo11w.png "Google logo"
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Exemple d'images associées vers des liens
Vous taper:
[](http://www.mabmackay.ca/librairies/images/image_dimensions.php?i=1696&x=100)
Vous obtenez le Résultat affiché dans le navigateur comme sui:
En résumer, pour les images
par référence Inline (les titres sont facultatifs) :
Vous taper:
En résumer, pour les images
de style de référence:
Vous taper:
![texte alternatif][ID]
[ID]: /url/vers/img.jpg "Titre"
N'oubliez pas que :
urlId, imgId) ne sont pas case-sensitive et peuvent contenir des espacesURL peut optionnellement être définie entre < >titre optionnel des liens et des images peut être défini entre guillemets, apostrophes ou parenthèsesLes tableaux n’existent pas dans la spécification Markdown originale, mais ils sont présent dans la plupart des implémentations récentes. Et il ont vraiment une utilité très forte dans certains cas.
L’idée globale est de “dessiner” des colonnes en les entourant avec des barres verticales (|). Le nombre de colonnes est défini dans la première ligne du tableau et vous devez pour chaque ligne avoir le même nombre de colonnes, même si certaines sont vides.
La première ligne sera votre en-tête. La seconde ligne sépare cet en-tête du corps du tableau et définit l’alignement du texte dans les colonnes. Elle ne contient que des tirets (-) et des deux points (:) sont utilisés pour définir cet alignement. Pas de deux points (:) ou juste un à gauche signifie que le texte sera aligné à gauche. Si la ligne de tiret (-) est entourée de 2 points (:), le texte sera centré et si un seul deux points (:) est présent à droite de la ligne, le texte sera aligné à droite.
Par exemple, vous taper:
| Entête 1 | En-tête 2 | En-tête 3 |
| ------------- |:-------------: | --------: |
| Ligne 1 | 1 | Valeur |
| Ligne 2 | 2 | Valeur |
| Ligne 3 | 3 | Valeur |
Vous obtenez le Résultat affiché dans le navigateur comme sui:
| Entête 1 | En-tête 2 | En-tête 3 |
|---|---|---|
| Ligne 1 | 1 | Valeur |
| Ligne 2 | 2 | Valeur |
| Ligne 3 | 3 | Valeur |
Vous pouvez avoir un tableau très propre comme dans l’exemple précédent pour mieux lire en mode édition. Mais ce n’est pas obligatoire. Les bares verticales (|) en début et en fin de ligne sont optionnels. Il est possible d’imbriquer des éléments d’emphase ou de code dans les tableaux. Il n’y a besoin que d’un seul tiret (-) par colonne pour la séparation entre l’en-tête et le corps du tableau.
Vous taper:
En-tête 1 | En-tête 2 | En-tête 3
- |:-: | -:
Ligne 1 | 1 | Valeur
Ligne 2 | 2 | Valeur
Vous obtenez le Résultat affiché dans le navigateur comme sui:
| En-tête 1 | En-tête 2 | En-tête 3 |
|---|---|---|
Ligne 1 |
1 | Valeur |
| Ligne 2 | 2 | Valeur |
Comme on le voit, ça fonctionne encore une fois exporté, mais toute la lisibilité est perdue dans le Markdown.
Voici un autre exemple d'un tableau:
Par exemple, vous taper:
Cellule d'en-tête A | Cellule d'en-tête B
- | -
Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
Vous obtenez le Résultat affiché dans le navigateur comme sui:
| Cellule d'en-tête A | Cellule d'en-tête B |
|---|---|
| Cellule 1 | Cellule 2 |
| Cellule 3 | Cellule 4 |
Remarque, si vous devez utiliser les symboles employer par Markdown, vous devez échapper ces symboles en les précédant avec le caractère "\" barre oblique inversée.
Les caractères spéciaux ayant un sens en HTML et en Markdown doivent être échappés. Pour les esperluètes c'est-à-dire "et comercial" (&), le signe (<) ou le signe (>) et autres caractères HTML, Markdown se charge de les convertir en entités HTML lors de l’export. Mais si vous souhaitez utiliser dans votre texte des astérisques, accolades, dièses… à une position indiquant à Markdown que vous désirer un formatage particulier, vous devez les échapper en les faisant précéder d’un antislash c'est-à-dire une barre oblique inversé (\). Sinon Markdown les masquera et appliquera le formatage correspondant. Les caractères suivants sont à échapper :\ * ` - _ [] () {} # + . ! < > @ ~
Voici les mêmes signes écrit En toutes lettres pour faciliter la lecture à mes amis DV :
barre oblique inversé, astérisque, accent grave, tiret, souligné, crochet gauche, crochet droit, parenthèse gauche, parenthèse droite, accolade gauche, accolade droite, dièse, plus, point,
point d'exclamation, inférieur, supérieur, arobase, tilde
Une petite chose peut se révéler agaçante : deux blocs consécutifs se verront fusionnés. Ce sera le cas de deux blocs de citation ou de code par exemple. Et ce quel que soit le nombre de lignes que vous sauterez. Une solution simple est d’ajouter des commentaires html entre deux blocs. La syntaxe des commentaire est la suivante : ;. Le texte sera ignoré par le navigateur. Votre commentaire peut tout à fait être vide.
Vous taper:
> Citation 1
> Citation 2
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Citation 1
Citation 2
Vous taper:
> Citation 1
<!-- -->
> Citation 2
Vous obtenez le Résultat affiché dans le navigateur comme sui:
Citation 1 Citation 2
Comme indiqué plus haut il y a un logiciel appelé "MarkDown# Editor" qui est accessible avec nos lecteurs d'écran.
Voici les informations à ce sujet.
Lien pour son téléchargement:
MarkDownSharpEditor setup
Nom du fichier:
mked1230.exe.
Auteur:
Hibara, Mitsuhiro
Tokyo, Japan
Une fois lancé le fichier d'installation, la langue sera en anglais par défaut
mais la langue de l'interface du programme sera en japonais.
Pas de panique !
Une fois ouvert le programme par défaut la langue qui s'affiche est le Japonais
Pour le changer en anglais c'est très simple:
Allez sur le bureau et cliquez sur le raccourci appelé :
MarkDown# Editor
Une fois ouvert le programme
Faire trois fois flèche vers la droite pour être dans le troisième menu il s'affiche la lettre V.
Faire deux flèches vers le haut pour être dans le premier sous-menu
Faire une flèche vers la droite, la première langue est le Japonais (ceci n'est pas verbaliser) lorsque cette langue est changée en anglais ceci est affiché comme Japanese.
Faire une flèche vers le haut, Vous y trouverez la langue English (ceci est verbaliser).
Cliquez sur Entrée pour cocher.
Une fois fait cela il s'affiche une boîte de dialogue, cliquez sur le bouton OUI pour effectuer les modifications.
Relancer le programme MarkDown# Editor depuis son raccourci sur le bureau.
Maintenant, le programme sera en anglais !
Lorsque vous cliquez sur un fichier (Markdown extension.md) le programme MarkDown# Editor il s'ouvre par défaut.
Profites-en!
Note: Il me semble qu'il existe un référentiel (repository) en
GitHub:
Nous vous recommandons plutôt d'utiliser le
convertisseur Pandoc
qui offre bien plus de possibilités que le convertisseur Markdown original,.
Si vous tenez cependant à tester le convertisseur Markdown original, sachez qu'il s'agit d'un simple script Perl sous license BSD téléchargeable via un lien au haut de la
home-page du site Markdown. Il est donc nécessaire de disposer d'un interpréteur
Perl
sur votre machine (ce qui est par défaut le cas sous Linux et Mac OS X, mais pas sous Windows où vous pouvez utiliser le
Strawberry Perl
ou
l'ActivePerl).
La conversion d'un fichier Markdown en HTML s'effectue alors avec la commande :perl Markdown.pl fichier.md > fichier.html
L'utilisation du convertisseur Pandoc est très bien expliquer en français
sur cette page:
Les explications originales relatives à l'installation de Pandoc sont accessibles sur le site Pandoc
Installation de Pandoc page en anglais:
Téléchargez la dernière version de l'installeur pandoc-<version>-windows.msi depuis
ce lien.
Au moment où je vous écris ce tutoriel, la dernière version disponible de Pandoc pour Windows est : Source du téléchargement- Page en anglais:
Release pandoc 1.17.0.2 jgm/pandoc · GitHub
et exécutez-le avec des droits d'administration. L'installation s'effectue automatiquement dans le compte de l'utilisateur courant (dossier C:\Users\<username>\AppData\Local\Pandoc). La variable PATH de l'utilisateur est complétée de façon que la commande pandoc soit accessible depuis n'importe quel répertoire (dans une fenêtre "Invite de commande"). Finalement le menu Démarrer de l'utilisateur est complété par un raccourci vers le "Pandoc User's Guide".
A tout moment vous pouvez consulter la documentation en anglais de Pandoc nommée:
Pandoc User’s Guide
sous Windows.
A savoir au préalable que Pandoc est un outil qui s'utilise en ligne de commande, donc a priori plutôt dans une fenêtre terminal !
Sinon, Si vous souhaitez ouvrir une ligne de commande directement dans le répertoire où se trouve votre fichier, vous pouvez installer le magique petit logiciel ContextPlus que Vous pouvez le trouver
par ici:
Comment ça marche t-il?
Une fois installé celuici...
Avec l'explorateur, Nous nous positionnons sur le fichier que on veux traiter, et
dans le menu contextuel ContextPlus nous fournit une option
ouvrir une invite de commande.
Il permet aussi quelques autres trucs, en voici le descriptif:
ContextPlus ajoute quatre options au menu contextuel : ouverture de tout
fichier avec le Bloc-Notes, copie dans le presse-papiers du chemin du
fichier, suppression définitive de fichier pour en effacer toute trace,
et ouverture d'une invite de commandes avec le dossier comme racine.
Bref, une fois qu'on l'a installé, on ne peut plus s'en passer!J'oubliez Pour fermer l'invite de commande, vous pouvez aussi taper exit puis presser
entrer.
Mille merci à notre ami Michel Such pour sa trouvaille!!!
J'imagine que vous avez installés Pandoc et ContextPlus.
Maintenant suivez le petit guide rapide fait par notre ami Daniel P:
J'ai installé Pandoc et ContextPlus.
- J'ai récupéré un fichier readme.md dans un module. Je le copie là où j'en aurai besoin, et je le modifie.
- Je sélectionne le fichier, menu contextuel. Grâce à ContextPlus, j'ai la ligne "Invite de commande", que j'active.
- Je tape la ligne "pandoc -s readme.md -o readme.html. Entrée. Le fichier readme.html est créé dans le même dossier que readme.md.
Note ne pas ajouter le guillemets du début ni le point final lors de la frappe.
Attention, la fenêtre d'invite de commandes ne se ferme pas par Alt +F4.
On peux faire Alt + espace, puis F.
Pour UTF (Anglais: UCS Transformation Formats)
Format de conversion des normes ISO 10646 et Unicode permettant de convertir les codes Unicode 16 bits en un nombre variable de mots de 8 bits.
Autre définition d'UTF-8:
UTF-8, qui signifie "UCS transformation format 8 bits" est un codage de caractères informatiques permettant de coder l'ensemble des caractères internationaux, comme par exemple les accents, les majuscules, etc.
UTF-8
Informations en anglais:
UTF-8 - Wikipédia
Informations en français:
UTF-8 - Wikipédia
Pandoc travaille exclusivement avec l'encodage de caractères UTF-8!
Important : Pandoc utilise exclusivement l'encodage de caractères UTF-8 en entrée et sortie. Si vous obtenez des erreurs lors d'une conversion, le plus vraisemblable est que votre fichier Markdown d'entrée est encodé en ISO-8859-* (ISO-Latin). Commencez donc par le re-sauvegarder en UTF-8.
Aller dans le menu Encodage
Vous pouvez choisir entre:
Encoder en UTF-8
Il doit être cocher.
ou:
Encoder en UTF-8 (sans BOM)
Il doit être cocher.
Vous pouvez choisir entre:
Convertir en UTF-8
ou:
Convertir en UTF-8 (sans BOM)
L'indicateur d'ordre des octets ou BOM (pour l'anglais byte order mark) est une donnée qui indique l'utilisation d'un encodage unicode ainsi que l'ordre des octets, généralement situé au début de certains fichiers texte.
Byte order mark ou Indicateur d'ordre des octets
Informations en anglais:
Byte order mark - Wikipédia
Informations en français:
Indicateur d'ordre des octets - Wikipédia
Autre définition de BOM:
Le BOM c'est un caractère unicode placé tout au début de votre fichier (invisible bien entendu), qui indique que votre fichier est encodé en UTF-X (8,16 ou 32).
Pour plus d'informations consulter cette page:
Indicateur d'ordre des octets — Wikipédia
En premier lieu Pandoc permet, au moyen des options -N et --toc présentées plus bas, de numéroter automatiquement les titres du document ainsi que collecter ceux-ci pour établir une table des matières avec liens hypertextes vers les chapitres.
Il est possible d'associer aux titres des attributs de type classes ou identifiants (ID) ainsi que des paires clé=valeur. On définit ces propriétés entre {accolade gauche accolade droite} directement à la suite du titre (sur la même ligne) ainsi:## Texte du titre { #myId .myClass attribut="valeur" }
S'agissant d'une conversion en HTML, l'identifiant #myId ajoute un id="myId" à la balise <h*> du titre, ce qui donne la possibilité de définir ailleurs dans le document un lien
vers ce titre avec [lien]#myId (générant <a href="#myId">lien</a>).
Si l'on fait numéroter les titres avec l'option pandoc -N, on peut ajouter l'attribut tiret - ou la classe .unnumbered aux titres que l'on ne souhaite pas faire numéroter.
### Titre avec Id et non numéroté {.unnumbered #premTitre}
### Titre _stylé_ non numéroté {style="background: #eee;" -}
Lien vers le [premier](#premTitre) de ces 2 titresLien vers le premier de ces 2 titres
Notez finalement que Pandoc exige que chaque titre soit précédé d'une ligne vide, ce qui n'est pas obligatoire dans la syntaxe de base Markdown.
Voici une des extensions offertes par Pandoc, appelé:-s --mathjax
Pandoc utilise en ligne le script MathJax en insérant un lien dans le header HTML.
Note: Pour utiliser ce script par Pandoc (dont il faut utiliser une version ≥ 1.11.1).
Le présent article a été convertie en HTML avec la commande :pandoc -s --number-sections --toc-depth=6 --mathjax -o readme.html readme.md
Remarque:
Cet article ne contient pas une table des matières, parce que certains des titres sont affectés dans des exemples.
Si vous souhaitez que ceux-ci soient inclus dans une table des matières avec la Numérotation des titres...
taper la commande:pandoc -s -N --toc --mathjax -o readme.html readme.md
Cette table des matières s'affichera après la balise <body>
-N ou --number-sections
Numérote automatiquement les titres et sous-titres <h*>.
Utiliser l'option:--number-offset=numero(s)
pour faire débuter la numérotation au(x) numero(s) +1 spécifié(s)
--toc ou --table-of-contents
Incorpore une table des matières des titres.
Sont collectés les titres du nombre de niveauxlevels
spécifié par l'option supplémentaire --toc-depth=levels.
En l'absence de cette option, seuls les titres des 3 premiers niveaux sont collectés (en HTML: <h1>, <h2>, <h3>). Dans le cas d'une conversion en HTML, la table des matières est placée juste après la balise <body>. Cette option n'a pas d'effet si l'on produit des docbooks ou des slide shows.
Rappelons encore (ce qui est dis à-propos des commandes ci-dessus lors de la conversion de Markdown vers HTML à l'aide de Pandoc:
1. Numérotation des titres, table des matières
Utiliser la commande:-N ou --number-sections
Numérote automatiquement les titres et sous-titres
Vous tapper:pandoc -s -N --toc -o readme.html readme.md
ou:pandoc -s --number-sections --toc -o readme.html readme.md
Utiliser l'option:--number-offset=
Après le signe égal il faut taper des numéro(s)
pour fair débuter la numérotation au(x) numéro(s) +1 spécifié(s)
Par exemple si vous taper =1
Le titre comense par le numéro 2 et ainsi de suite...
Par exemple si vous taper=6
Le titre comense par le numéro 7 et ainsi de suite...
Si vous taper =0 les titres sont numérotés corrélativement,
c'est à dire ils vont commencer par le titre un et ainsi de suite
pour échapper à la numérotation des titres, aprés le {# nom du titre #
Vous devriez mettre après le titre suivi d'un espace la classe suivante:{.unnumbered #titre-non-numéroté}
entre accolades après le signe dièse comme référence, j'ai mis le nom du titre affecté
Vous taper:# Titre non numéroté {.unnumbered#titre-non-numéroté}
Au lieu d'utiliser la classe .unnumbered Vous pouvez utiliser un tiret "-",
Le tiret il peut être coller juste avant la dernière accolade, auparavant, vous tapez un espace.
Entre accolades après le signe dièse comme référence, j'ai mis le nom du titre affecté
Vous taper:
# Titre non numéroté {#titre-non-numéroté -}
Vous obtenez le Résultat affiché dans le navigateur comme sui:
au début du fichier vous pouvez placer les suivantes sintaxe:
Copier au-dessous de cette ligne les codes suivants:---author: BlindHelp <remyruiz@gmail.com>title: Sintaxe Markdowndate: 22/04/2016lang: french...
Fin des codes.
Au début du fichier vous pouvez aussi placer les suivantes sintaxe:
Copier au-dessous de cette ligne les codes suivants:% Syntaxe Markdown% Auteur: BlindHelp <remyruiz@gmail.com>% Dernière mise à jour le 22 Avril 2016.
---
Fin des codes.
Les sintaxe figurant dans la première partie lorsque le fichier est converti en HTML ils sont annoncés par le lecteur d'écran at pour le signe@, arrobas ; et la séparation de la date par slash barre oblique, symbole /
Vous pouvez le trouver au début du document Une fois converti en HTML sous forme de titre:
Titre niveau 1
pour le titre.
Titre niveau 2
pour l'auteur.
Titre niveau 3
pour la date.
Les sintaxe figurant dans la deuxième partie lorsque le fichier est converti en HTML ils sont annoncés normalement par le lecteur d'écran.
Vous pouvez le trouver au début du document Une fois converti en HTML sous forme de titre:
Titre niveau 1
pour le titre.
Titre niveau 2
pour l'auteur.
Titre niveau 3
pour la date.
Home Page Markdown
(page en anglais).
Syntaxe Markdown de base
(page en anglais).
Vous pouvez aussi consulter une page dédié à la syntaxe de Markdown en
français)
faite par Michel Fortin.
Sur Wikipedia:
vous pouvez aussi consulter un article dédié à
Markdown
(page en anglais).
avec brève description de la syntaxe
extensions
à Markdown
(page en anglais).
puis vous pouvez lire un autre article sur:
Wikipedia
qui parle du Langage de balisage léger
(page en anglais).
Voici un autre article sur Markdown par Nicolas Borboën dans la revue
Flash Informatique EPFL 1/2013
(page en français).
Voici un autre article sur Pandoc par Jean-Daniel Bonjour dans la revue
Flash Informatique EPFL 4/2013
(page en français).
78 tools for writing and previewing markdown
(page en anglais).
Élaboration et conversion de documents avec Markdown et Pandoc
faite par Jean-Daniel Bonjour
(page en français).
Le tuto est très bien expliqué sur ce site.
Pandoc User’s Guide (Online ):
Voici la page de:
John MacFarlane
le développeur de "Pandoc" qui explique tout sur Pandoc
(page en anglais).
Site officiel Pandoc
Home Page Pandoc
(page en anglais).
puis les
extensions
apportées au langage Markdown .
(page en anglais).
Exemples de fichiers et conversions
(page en anglais).
ConvertisseurPandoc
en ligne
(limité à 1000 caractères)
(page en anglais).
Voici quelques éditeurs en ligne:
Markable
(page en anglais).
Daring Fireball: Markdown Web Dingus
(page en anglais).
(ou en
français
faite par Michel Fortin).
StackEdit
que vous pouvez synchroniser avec Google docs.
(page en anglais).
Dillinger
(page en anglais).
Hashify |
(page en anglais).
InstantMark |
(page en anglais).
JonCombe |
(page en anglais).
Pioul |
(page en anglais).
Showdown
(page en anglais).
Voici quelques éditeurs hors ligne:
Pour Windows:
Télécharger MarkDown# Editor
(page en japonais).
Télécharger Write Monkey
(page en anglais).
Télécharger Markdown Pad
(page en anglais).
Télécharger Mou, pour Mac OS, gratuit.
(page en anglais).
Télécharger ReText pour Linux
(page en anglais).
Télécharger Notepad++
Pour Windows.
(page en français).
Sans oubliez le
thème nommé markdown_npp dans sa version modifiée
basé sur le thème original de Thomas Smits.
vous le trouverez sur le:
groups.google
Le langage de balisage léger Markdown a été conçue pour être aussi facile à lire et à écrire que possible. D'importants outils (IPython Notebook...) et de nombreux sites Internet
GitHub,
StackExchange,
Reddit,
Tumblr...)
l'utilisent comme syntaxe d'édition. Mais en raison du caractère non formel de la définition originale de cette syntaxe par Gruber, de certaines ambiguïtés et du besoin d'évolution de ce format, un projet de standardisation débute en 2014 sous la dénomination
Projet CommonMark de standardisation de la syntaxe Markdown:
Site Web
(page en anglais).
spécification
(page en anglais).
Voici une documentation fait par mes soins à télécharger:
Télécharger le Récapitulatif des Syntaxe Markdown en format MD
Sur ce, je vous souhaite une bonne découverte du langage Markdown!
Amusez-vous bien!
Nous espérons vous revoir bientôt sur le
Blog de BlindHelp!