Comment appliquer la couleur dans Markdown?

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?

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.

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.

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_

Cela devrait être plus court:

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

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

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.

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>

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

Cela fonctionne dans le Joplin de prise de notes:

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

J'ai eu du succès avec

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

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