html inline style not applying in Jupyter notebook cells anymore

user_9524160 0
Viewed 2143

When passing style argument along with a <span> starting block, I changed font-size and font-family and all of that in my Jupyter notebook's individual cells. Like so-

<span style="font-family:Verdana">Irrelavant text.</span>

OR

# Model Building                        <span style="font-size:12px">[Jump to Beginning](#top)</span>

It was working just fine until about a week or so ago, when all of the style effects in my notebook just disappeared. The code is obviously still there in the markdown cells but it just doesn't show the intended result. The same notebook still works and loads the style when ran on Kaggle or JupyterLab. Did Jupyter notebooks stop supporting it or did I change something unintentionally? What could be a workaround or maybe even a fix for the issue without changing the code?

It used to look like this (avoid the black theme, screenshot is from JupyterLab)-

enter image description here

And now it looks like this-

enter image description here

As you can see, the font-size:12px has no effect anymore. Same goes for font-family and the likes.

Edit: Notebook

jupyter jupyter-notebook markdown css html
2 Answers

Inline styles in Markdown cells were temporarily removed in a security fix addressing a different sanitization issue earlier last month and restored in just released v6.4.4. Please update your notebook installation for the old styling in Markdown to work again.

JupyterLab 3.2.2, 3.2.3 and 3.2.4 are also affected by a similar issue. It was already fixed in PR #11510 and the fix was released in JupyterLab v3.2.5 on 10th December 2021.

user_66469120

I don't think this is the answer you wanted, but it works. It is scalable, too. I usually use Python with Atom, XCode, or RMarkdown in RStudio, so I am not all that familiar with the ins and outs of Jupyter's interface.

First, I noticed that I could see the text rendered as expected when I went to print preview. However, I thought that that was pretty useless. What are you going to do? Go to print preview every time you write something? What's the purpose of an interactive notebook at that point?

I digress.

Okay, so what I found that worked... in no way is this an idea that is originally mine...

Custom CSS

Adding a custom CSS file, but not the 'change it all' thing that the Jupyter help files suggest...

Step 1) Create a styles folder in the same directory as the ipynb file.

enter image description here

Step 2) Within the styles folder, create a CSS file.

enter image description here

Step 3) Within that CSS file, write the two tag styles and any others you desire.

enter image description here

Here's that code (pictures of code are annoying).

div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}

Within the ipynb File

Step 4) Next, add the div tags to your ipynb file in a Markdown cell:

<div class='verdana'>This should be Verdana font.</div>

The result after running the cell:

enter image description here

Step 5) Do the same thing with the bigger font. You highlighted the desire for font-size:20px; I inadvertently did font-size:20pt. Just change the pt to px.

Add the div tags to your ipynb file in a Markdown cell:

<div class="bigger">Font size 20px</div>

The result after running the cell:

enter image description here

Step 6) Somewhere in the notebook, you need to call the link to the CSS file. I just added it to the end:

from IPython.core.display import HTML
def css_styling():
    styles = open("./styles/custom.css", "r").read()
    return HTML(styles)
css_styling()

It can go at the end because the entire kernel executes initially (so it doesn't need to be before you call the tags.

FYI I did try to use magic, but it did not work for the font-family:

%%html
<style>
// add your CSS styling here
div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}
</style>
user_53290730
Related