How to Change Color in Markdown Cells in IPythonJupyter Notebook

Table of Contents

1. Why Change the Color of Markdown Cells?
2. How to Change the Color of Markdown Cells
3. Conclusion

Why Change the Color of Markdown Cells?

Markdown cells are a great way to document your code and analysis in IPython/Jupyter Notebook. However, by default, markdown cells are displayed in a plain white background. This can make your documentation look bland and unappealing. Changing the color of your markdown cells can make your documentation stand out and be more visually appealing.

Additionally, changing the color of your markdown cells can help you organize your documentation. For example, you may want to use different colors to distinguish between sections of your documentation or to highlight important information.

How to Change the Color of Markdown Cells

Changing the color of markdown cells in IPython/Jupyter Notebook is a simple process. Here are the steps:

First, you need to create a new markdown cell. To do this, click on the “+” button in the toolbar or hit “B” on your keyboard to create a new cell below the current cell.

Once you have created a new markdown cell, you can change the color of the cell by adding a CSS style to the cell. To do this, you need to use the HTML <style> tag and the CSS background-color property.

Here is an example of how to change the color of a markdown cell to blue:

%%html
<style>
    .blue {
        background-color: #0074D9;
    }
</style>

<div class="blue">
    This markdown cell is blue.
</div>

In this example, we have defined a CSS style called “blue” that sets the background color of the cell to “#0074D9”, which is a shade of blue. We have then wrapped the content of the cell in a <div> element with the class “blue” to apply the style to the cell.

You can change the color of the markdown cell to any color you like by modifying the CSS background-color property. You can find the hex code for a color by searching for it online or using a color picker tool.

If you want to apply the style to multiple markdown cells, you can define the style in a code cell and then reference it in your markdown cells. Here is an example:

%%html
<style>
    .blue {
        background-color: #0074D9;
    }
    .green {
        background-color: #2ECC40;
    }
</style>

In this example, we have defined two CSS styles, “blue” and “green”, that set the background color of the cell to blue and green, respectively. We have used the %%html magic command to execute the HTML code in the code cell.

To apply the styles to a markdown cell, simply add the class name to the <div> element, like this:

%%html
<div class="blue">
    This markdown cell is blue.
</div>

<div class="green">
    This markdown cell is green.
</div>

Conclusion

Changing the color of markdown cells in IPython/Jupyter Notebook is a simple way to make your documentation more visually appealing and organized. By using CSS styles, you can change the background color of markdown cells to any color you like. You can also define styles in a code cell and reference them in your markdown cells. With these tips, you can create documentation that is not only informative but also visually appealing.

SHARE:

About Saturn Cloud

Saturn Cloud is your all-in-one solution for data science & ML development, deployment, and data pipelines in the cloud. Spin up a notebook with 4TB of RAM, add a GPU, connect to a distributed cluster of workers, and more. Request a demo today to learn more.