How to change color in markdown cells ipython/jupyter notebook?

Question

I'm only looking to format a specific string within a cell. I change that cell's format to "Markdown" but I'm not sure how to change text color of a single word.

I don't want to change the look of the whole notebook (via a CSS file).

Jakob · Accepted Answer · 2015-01-01T01:07:42.133

174

You can simply use raw html tags like

foo <font color='red'>bar</font> foo

Be aware that this will not survive a conversion of the notebook to latex.

As there are some complaints about the deprecation of the proposed solution. They are totally valid and Scott has already answered the question with a more recent, i.e. CSS based approach. Nevertheless, this answer shows some general approach to use html tags within IPython to style markdown cell content beyond the available pure markdown capabilities.

edited Jan 01 '15 at 01:07

answered Nov 02 '13 at 21:05

Jakob

16,619
4
64
86

1

@jayarjo In IPython 2.1 this still works flawlessly! Can you give more information on what you have tried? – Jakob Jul 29 '14 at 21:19
Works for me with Jupyter NB version 4.3.1 – Austin May 13 '17 at 02:56
The "font" tag is now deprecated. You can use the "span" tag with the style attribute instead. – Paul Sep 26 '20 at 19:44

score 72 · Answer 2 · answered Mar 11 '14 at 18:12

72

Similarly to Jakob's answer, you can use HTML tags. Just a note that the color attribute of font (<font color=...>) is deprecated in HTML5. The following syntax would be HTML5-compliant:

This <span style="color:red">word</span> is not black.

Same caution that Jakob made probably still applies:

Be aware that this will not survive a conversion of the notebook to latex.

answered Mar 11 '14 at 18:12

Scott H

1,964
18
22

@jayarjo I just tried my solution in IPython 1.1.0, and it worked fine for me. Can you provide more information on what you tried and how your environment is set up? Remember to change the cell type to Markdown, which can be done through the Cell > Cell Type menu. – Scott H Jul 31 '14 at 17:39
I'm trying this on github. – jayarjo Aug 09 '14 at 10:32
@jayarjo, this question was specifically about coloring text in IPython notebooks, which allow markdown text. For the behavior of color in GitHub markdown files, see the following question specifically on that issue. The short answer is that there doesn't seem to currently be a way to specify color for text in GitHub markdown documents. http://stackoverflow.com/questions/11509830/how-to-add-color-to-githubs-readme-md-file – Scott H Aug 29 '14 at 15:35
@ScottH: I do not understand what you mean by 'conversion of the notebook to latex'. I am able to convert part of the text in span to latex and jupyter renders the latex in red. – Shishir Pandey Aug 11 '15 at 15:59
@ShishirPandey: What I was referring to with "conversion of the notebook to latex" is that you can normally convert a notebook to LaTex (a typesetting language) using `ipython nbconvert --to latex mynotebook.ipynb`. Alternatively, in an open notebook you can go to File > Download as... > PDF via LaTex. But I believe that color specification via html/css style may not be translated correctly into the LaTex. I don't have LaTex installed at the moment, so I can't re-verify, but I think that's the case. – Scott H Aug 11 '15 at 17:40
It applies the color. But it removes the markdown syntax between the labels. For example all words with `code` are displayed the same as the rest of the code... Any ideas? – Martin Dec 02 '18 at 23:05

score 24 · Answer 3 · answered Dec 12 '18 at 22:24

24

An alternative way to do that, is to enter a LaTeX environment within the notebook and change color from there (which is great if you are more fluent in LaTeX than in HTML). Example:

$\color{red}{\text{ciao}}$

would display ciao in red.

answered Dec 12 '18 at 22:24

Llewlyn

1,143
1
9
10

It's worth noting that if you plan to export a notebook to Latex or PDF or process it with pandoc, etc, that this solution will pass through the latex successfully where the raw HTML solutions are more likely to either be stripped by pandoc when converting to latex or result in latex errors. – flutefreak7 Mar 19 '21 at 18:25

score 16 · Answer 4 · answered Apr 27 '15 at 02:59

16

For example, if you want to make the color of "text" green, just type:

<font color='green'>text</font>

answered Apr 27 '15 at 02:59

Chen Rui

347
2
5

score 2 · Answer 5 · answered Feb 25 '19 at 02:02

If none of the above suggestions works for you, try using the style attribute.

**Notes**
<p style="color:red;">ERROR: Setting focus didn't work for me when I tried from jupyter. However it worked well when I ran it from the terminal</p>

This gives me the following result

score 1 · Answer 6 · answered Feb 24 '19 at 00:28

1

<p style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p>

or

Text <span style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p> Text

answered Feb 24 '19 at 00:28

Fatemeh Asgarinejad

462
6
13

score 1 · Answer 7 · answered Jul 04 '20 at 06:55

1

The text color can be changed using,

<span style='color:green'> message/text </span>

answered Jul 04 '20 at 06:55

Mohit Mehlawat

51
2

score 1 · Answer 8 · edited Oct 15 '20 at 13:39

1

<span style='color:blue '> your message/text </span>

So here it is a perfect html css style entry inside a notebook ipynb file.

Of course you can choose your favourite color here and then your text.

edited Oct 15 '20 at 13:39

xenlo

613
1
6
19

answered Oct 14 '20 at 12:13

Buddhadeb Mondal

43
5

How to change color in markdown cells ipython/jupyter notebook?

8 Answers8

Linked