Comment appliquer la couleur dans Markdown?


374

Je souhaite utiliser Markdown pour stocker des informations textuelles. Mais la recherche rapide sur Google indique que Markdown ne prend pas en charge la couleur. De plus, StackOverflow ne prend pas en charge la couleur. Comme en cas de démarque GitHub.

Y a-t-il une saveur de démarque qui autorise le texte en couleur?


1
quel est votre format de sortie? Markdown est généralement utilisé pour être transformé en html, qui prend en charge la couleur, et de nombreux analyseurs acceptent le code html
scoa

Voulez-vous dire que ces analyseurs ont une capacité intégrée de mettre du html de démarque à l'intérieur, dites '<span style = "color: red"> </style>'? Je n'ai pas entendu. Un lien / exemple?
Mahesha999

5
Je veux dire que vous pouvez les mélanger avec pandoc par exemple: <span style="color:red"> *some emphasized markdown text*</span>. Si vous posez des questions sur la gestion native des démarques de couleurs, je ne pense pas que cela existe
scoa

1
Cette réponse pourrait être d'une certaine utilité comme elle l'a été pour moi ...
Curiousity

Réponses:


374

Réponse courte

Markdown ne prend pas en charge la couleur!

TL; DR

Comme l' indiquent les règles de syntaxe originales / officielles (c'est moi qui souligne):

La syntaxe de Markdown est destinée à un seul but: être utilisé comme format d'écriture pour le Web.

Markdown n'est pas un remplacement pour HTML, ni même proche de lui. Sa syntaxe est très petite, ne correspondant qu'à un très petit sous-ensemble de balises HTML. L'idée n'est pas de créer une syntaxe qui facilite l'insertion de balises HTML. À mon avis, les balises HTML sont déjà faciles à insérer. L'idée de Markdown est de faciliter la lecture, l'écriture et l'édition de la prose. HTML est un format de publication; Markdown est un format d'écriture. Ainsi, la syntaxe de formatage de Markdown ne traite que les problèmes pouvant être transmis en texte brut .

Pour tout balisage qui n'est pas couvert par la syntaxe de Markdown, vous utilisez simplement HTML lui-même.

Comme il ne s'agit pas d'un «format de publication», fournir un moyen de colorer votre texte est hors de portée pour Markdown. Cela dit, ce n'est pas impossible car vous pouvez inclure du HTML brut (et le HTML est un format de publication). Par exemple, le texte Markdown suivant (comme suggéré par @scoa dans un commentaire):

Some Markdown text with <span style="color:blue">some *blue* text</span>.

Il en résulterait le code HTML suivant:

<p>Some Markdown text with <span style="color:blue">some <em>blue</em> text</span>.</p>

Maintenant, StackOverflow (et probablement GitHub) supprimera le code HTML brut (par mesure de sécurité) afin que vous perdiez la couleur ici, mais cela devrait fonctionner sur n'importe quelle implémentation Markdown standard.

Une autre possibilité consiste à utiliser les listes d'attributs non standard initialement introduites par l' implémentation Markuru de Markdown et adoptées par la suite par quelques autres (il peut y avoir plus, ou des implémentations légèrement différentes de la même idée, comme les attributs div et span dans pandoc ). Dans ce cas, vous pouvez affecter une classe à un paragraphe ou à un élément en ligne, puis utiliser CSS pour définir une couleur pour une classe. Cependant, vous devez absolument utiliser l'une des rares implémentations qui prennent réellement en charge la fonctionnalité non standard et vos documents ne sont plus portables sur d'autres systèmes.


2
Merci, il reste maintenant à expérimenter dans quelle mesure nous pouvons mélanger HTML et démarque. Mais je pense vraiment que tout format d'écriture devrait permettre à l'écrivain de transmettre sur quels mots il veut mettre l'accent. Bien que l'on puisse utiliser le gras et l'italique pour cela, mais pour expliquer des sujets trop complexes, l'accent par la coloration peut être utile. Ou tout simplement pour transmettre deux mots forment une paire parmi d'autres paires, en colorant des mots (disons dans la même phrase mais un peu éloignés l'un de l'autre) appartenant à la même paire avec la même couleur. Le point est que ce qui peut s'avérer utile est déterminé par la nature et la complexité du texte à écrire.
Mahesha999

semble que la capacité à exprimer sous forme de texte brut était primordiale pour la démarque ... c'est pourquoi tout cela
Mahesha999

10
Il me semble que vos attentes à l'égard de Markdown sont différentes de ce que voulait son créateur. Mais c'est juste mon opinion ...
Waylan

"La syntaxe de Markdown est destinée à un seul but: être utilisée comme format d'écriture pour le Web.". Et parfois, nous voulons écrire en couleur. C'est notre droit. AVERTISSEMENT: DANGER! c'est mieux en rouge. Et comment pouvez-vous expliquer qu'ils ont implémenté la coloration syntaxique pour les langues? La couleur est pour nous à utiliser, quand nous le voulons.
Marc Le Bihan

Comment faites-vous pour que votre <p> <style = "color: ..."> fonctionne lors de la conversion de démarque en pdf? Cela ne fonctionne pas alors. Des solutions de démarque standard pour les couleurs seraient mieux.
Marc Le Bihan

56

J'ai commencé à utiliser Markdown pour publier certains de mes documents sur un site Web interne pour les utilisateurs internes. C'est un moyen simple de partager un document mais de ne pas pouvoir le modifier par le visualiseur.

Ainsi, ce marquage de texte en couleur est «génial». J'en ai utilisé plusieurs comme ça et fonctionne à merveille.

<span style="color:blue">some *This is Blue italic.* text</span>

Se transforme en C'est l'italique bleu.

Et

<span style="color:red">some **This is Red Bold.** text</span>

Se transforme en c'est en gras rouge.

J'adore la flexibilité et la facilité d'utilisation.


7
Je suppose que cela devrait être un commentaire - cela ne répond pas vraiment à la question d'OP.
Marcus Mangelsdorf

15
Ce qui précède ne fait rien sauf le gras dans This is Red Bold.
mplungjan le

1
Non pas que ce qui précède était susceptible de fonctionner sur une page Web mais ... amusant ▼ ✡︎✶✸∍∀≤☂︎☯︎℥😇🥑🇬🇧
Robotbugs

4
Il semble que vous mélangez Markdown avec des balises HTML ici. L'élément span peut ajouter la couleur lorsqu'il est affiché dans votre navigateur Web, mais ce n'est pas Markdown .
Martin Gray

1
La plupart des gens qui essaient d'obtenir de la couleur sur la page se concentrent uniquement sur le rendu de la couleur dans un document de démarque; pas si le code lui-même est une démarque. Donc, je pense que c'est une bonne réponse.
Maiya

21

Bien que Markdown ne prenne pas en charge la couleur, si vous n'en avez pas besoin de trop, vous pouvez toujours sacrifier certains des styles pris en charge et redéfinir la balise associée à l'aide de CSS pour la colorer, et également supprimer la mise en forme, ou non.

Exemple:

// resets
s { text-decoration:none; } //strike-through
em { font-style: normal; font-weight: bold; } //italic emphasis


// colors
s { color: green }
em { color: blue }

Voir également: Comment redéfinir la balise em pour qu'elle soit en gras au lieu d'italique

Puis dans votre texte de démarque

~~This is green~~
_this is blue_

Intéressant mais pour se débarrasser de la grève, mais en coloriant le texte, les s {text-decoration:none; color: green}
choses

2
OMI, cette réponse est le plus dans un esprit de démarque tout en répondant à la question principale. Il honore l'idée de texte brut de démarque (qu'il est lisible en texte brut) et respecte les exigences de conversion lorsque le texte est analysé par un visualiseur de démarque. En ce sens, j'aurais souhaité qu'il y ait un peu de place (par exemple, les visualiseurs de démarques pour redéfinir les balises de démarques vers d'autres balises HTML ou pour leur affecter automatiquement des classes). Par exemple, j'aimerais *et _être différent, mais ils indiquent tous les deux <em>.
Melvin Roest

13

Cela devrait être plus court:

<font color='red'>test blue color font</font>

Ne fonctionne pas lors de la conversion en PDF
Marc Le Bihan

Je n'aime pas l'idée d'utiliser une balise HTML obsolète, mais si cela fonctionne, cela fonctionne ...
Alonso del Arte

7

vous pouvez probablement utiliser le style latex:

$\color{color-code}{your-text-here}$

Pour conserver l'espace entre les mots, vous devez également inclure le tilde ~.


2
C'est la seule solution qui a fonctionné pour moi.
Ébe Isaac

Dans la zone {votre-texte-ici}, vous devez utiliser le tilde ~au lieu d'espaces pour insérer des espaces.
Alex

@Alex: Ou faites $ \ color {color-code} {{\ rm votre texte ici}} $.
Peter K.

Ou faites $ \ color {color-code} {\ text {votre texte ici}} $.
Phro

4

Semble que kramdown prend en charge les couleurs sous une forme ou une autre.

Kramdown permet le HTML en ligne :

This is <span style="color: red">written in red</span>.

Il a également une autre syntaxe pour inclure les classes css en ligne :

This is *red*{: style="color: red"}.

Cette page explique en outre comment GitLab utilise un moyen plus compact pour appliquer des classes CSS dans Kramdown:

Appliquer la blueclasse au texte:

This is a paragraph that for some reason we want blue.
{: .blue}

Application de la blueclasse aux en-têtes:

#### A blue heading
{: .blue}

Appliquer deux classes:

A blue and bold paragraph.
{: .blue .bold}

Application des identifiants:

#### A blue heading
{: .blue #blue-h}

Cela produit:

<h4 class="blue" id="blue-h">A blue heading</h4>

Il y a beaucoup d'autres choses expliquées au lien ci-dessus . Vous devrez peut-être vérifier.

En outre, comme l'a dit une autre réponse, Kramdown est également le moteur de rendu par défaut derrière Jekyll . Donc, si vous créez quelque chose sur des pages github, les fonctionnalités ci-dessus peuvent être disponibles dès la sortie de la boîte.


3

Dans JekyllJ'ai pu ajouter de la couleur ou d'autres styles à un élément en gras (devrait également fonctionner avec tous les autres éléments).

J'ai commencé le "styling" avec {:et je l'ai terminé }. Il n'y a pas d'espace autorisé entre l'élément et le crochet!

**My Bold Text, in red color.**{: style="color: red; opacity: 0.80;" }

Sera traduit en html:

<strong style="color: red; opacity: 0.80;">My Bold Text, in red color.</strong>

3

Lorsque vous souhaitez utiliser du Markdown pur (sans HTML imbriqué), vous pouvez utiliser des emojis pour attirer l'attention sur un fragment du fichier, à savoir ⚠️ AVERTISSEMENT ⚠️, 🔴 IMPORTANT ❗🔴 ou 🔥 NOUVEAU 🔥.


2

Cela fonctionne dans le Joplin de prise de notes:

<span style="color:red">text in red</span>

Ne fonctionne pas lors de la conversion en PDF
Marc Le Bihan

0

J'ai eu du succès avec

<span class="someclass"></span>

Attention: la classe doit déjà exister sur le site.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.