How to apply color in Markdown

Question

I want to use Markdown to store textual information  But quick googling says Markdown does not support color  Also StackOverflow does not support color  Same as in case of GitHub markdown   Is there any flavor of markdown that allows colored text

User · Answer

I have started using Markdown to post some of my documents to an internal web site for in-house users. It is an easy way to have a document shared but not able to be edited by the viewer.

So, this marking of text in color is “Great”. I have use several like this and works wonderful.

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

Turns into This is Blue italic.

And

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

Turns into This is Red Bold.

I love the flexibility and ease of use.

User · Answer

TL DR Markdown doesn t support color but you can inline HTML inside Markdown  e g    lt span style  quot color blue quot  gt some  blue  text lt  span gt    Longer answer As the original official syntax rules state  emphasis added    Markdown   s syntax is intended for one purpose  to be used as a format for writing for the web  Markdown is not a replacement for HTML  or even close to it  Its syntax is very small  corresponding only to a very small subset of HTML tags  The idea is not to create a syntax that makes it easier to insert HTML tags  In my opinion  HTML tags are already easy to insert  The idea for Markdown is to make it easy to read  write  and edit prose  HTML is a publishing format  Markdown is a writing format  Thus  Markdown   s formatting syntax only addresses issues that can be conveyed in plain text  For any markup that is not covered by Markdown   s syntax  you simply use HTML itself   As it is not a  quot publishing format  quot  providing a way to color your text is out-of-scope for Markdown  That said  it is not impossible as you can include raw HTML  and HTML is a publishing format   For example  the following Markdown text  as suggested by  scoa in a comment   Some Markdown text with  lt span style  quot color blue quot  gt some  blue  text lt  span gt    Would result in the following HTML   lt p gt Some Markdown text with  lt span style  quot color blue quot  gt some  lt em gt blue lt  em gt  text lt  span gt   lt  p gt   Now  StackOverflow  and probably GitHub  will strip the raw HTML out  as a security measure  so you lose the color here  but it should work on any standard Markdown implementation  Another possibility is to use the non-standard Attribute Lists originally introduced by the Markuru implementation of Markdown and later adopted by a few others  there may be more  or slightly different implementations of the same idea  like div and span attributes in pandoc   In that case  you could assign a class to a paragraph or inline element  and then use CSS to define a color for a class  However  you absolutely must be using one of the few implementations which actually support the non-standard feature and your documents are no longer portable to other systems

User · Answer

When you want to use pure Markdown  without nested HTML   you can use Emojis to draw attention to some fragment of the file  i e    WARNING    IMPORTANT  or NEW

User · Answer

Run the following in zeppelin paragraph  md       lt span style  quot color red quot  gt text lt  span gt

User · Answer

I ve had success with   lt span class  someclass  gt  lt  span gt    Caveat   the class must already exist on the site

User · Answer

This works in the note-taking Joplin    lt span style  color red  gt text in red lt  span gt

User · Answer

I like the idea of redefining existing tags if they re unused due to the fact that the text is cleaner  at the expense of existing tags   The inline styling works but creates a lot of noise when reading the raw text  Using VSCode I ve found that custom single-letter tags  supported by a small  lt style gt  section at the top  works well with a minimum of noise  especially for spot colour  e g   lt style gt  r   color  Red   o   color  Orange   g   color  Green    lt  style gt     TODOs   -  lt r gt TODO  lt  r gt  Important thing to do -  lt o gt TODO  lt  o gt  Less important thing to do -  lt g gt DONE  lt  g gt  Breath deeply and improve karma  My use-case is orgmode-ish in-app note taking during development but I guess it might work elsewhere

User · Answer

In Jekyll I was able to add some color or other styles to a bold element  should work with all other elements as well      I started the  styling  with    and end it    There is no space allowed between element and curly bracket      My Bold Text  in red color      style  color  red  opacity  0 80       Will be translated to html    lt strong style  color  red  opacity  0 80   gt My Bold Text  in red color  lt  strong gt

User · Answer

While Markdown doesn t support color  if you don t need too many  you could always sacrifice some of the supported styles and redefine the related tag using CSS to make it color  and also remove the formatting  or not   Example      resets s   text-decoration none      strike-through em   font-style  normal  font-weight  bold      italic emphasis      colors s   color  green   em   color  blue     See also  How to restyle em tag to be bold instead of italic  Then in your markdown text    This is green    this is blue

User · Answer

Short story  links  Make use of something like   x000D   x000D  a href  red         color  red      pointer-events  none      cursor  default      text-decoration  none    x000D   lt a href  red  gt Look  ma  Red  lt  a gt  x000D   x000D   x000D    HTML above for demonstration purposes  And in your md source   Look  ma  Red   red

User · Answer

Seems that kramdown supports colors in some form   Kramdown allows inline html   This is  lt span style  color  red  gt written in red lt  span gt     Also it has another syntax for including css classes inline   This is  red    style  color  red      This page further explains how GitLab utilizes more compact way to apply css classes in Kramdown      Applying blue class to text   This is a paragraph that for some reason we want blue      blue        Applying blue class to headings        A blue heading     blue        Applying two classes   A blue and bold paragraph      blue  bold        Applying ids        A blue heading     blue  blue-h        This produces    lt h4 class  blue  id  blue-h  gt A blue heading lt  h4 gt     There is a lot of other stuff explained at above link  You may need to check   Also  as other answer said  Kramdown is also the default markdown renderer behind Jekyll  So if you are authoring anything on github pages  above functionality might be available out of the box

User · Answer

This should be shorter    lt font color  red  gt test blue color font lt  font gt

User · Answer

you can probably use the latex style     color color-code  your-text-here     To keep the whitespace between words  you also need to include the tilde

[markdown] How to apply color in Markdown?

Examples related to markdown