Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the color of text in markdown cell in JupyterLab

I'm trying to change the color of the text in all markdown cells. Actually, I can change the color of font applying HTML code but I have to be doing it in each cell and I would like default color to be different from white. I've seen that you can edit the custom.css file of the theme I'm using to edit changes in the markdown cells but I can not find the line of the code to change the color of the text.

I have also tried to change the Notebook settings from the menu "Advanced Settings Editor" but in Markdown Cell Configuration I can not find any option related to changing the text color, only options such as "fontSize" or "fontFamily".

like image 459
Rodrigo López Avatar asked Apr 03 '19 04:04

Rodrigo López


2 Answers

You could do this:

<div class="alert-success">
This is a green colored box
</div>

<div class="alert-danger">
This is a red colored box
</div>

<div class="alert-warning">
This is a yellow colored box
</div>

<div class="alert-info">
This is a blue colored box
</div>

enter image description here

Source: IBM Knowledge Center: Markdown for Jupyter notebooks cheatsheet

like image 138
yoonghm Avatar answered Oct 17 '22 18:10

yoonghm


Finally i can to solve my problem. I was playing a bit with the .css file and finally figured out how to change the color of text. The path of file is "/home/sknt/anaconda3/share/jupyter/lab/themes/@jupyterlab/theme-dark-extension/index.css" [file name index.css] and I change the color of text in the section "#content font", specifically in "#Defaults use Material Design specification" changing the color code of "jp-content-font-color1.

However, this change also affects the output of the code cells and in the end it does not convince me. My final solution that work for me was create a custom file .css and use the following code to change the color of the text only in markdown cells:

from IPython.core.display import HTML
def css_style():
styles = open("[path to .css file]","r").read()
return HTML(styles)
css_style()

I hope that these solutions that worked for me help other people who may want to modify the appearance of their notebook. Thank's.

like image 5
Rodrigo López Avatar answered Oct 17 '22 17:10

Rodrigo López