Ask Your Question
1

Changing fonts in mark down cells.

asked 2020-04-30 08:54:03 +0100

Cyrille gravatar image

updated 2020-05-01 23:59:45 +0100

Is there a way to change the fonts in markdown cells. For instance to use computer modern fonts.

edit retag flag offensive close merge delete

Comments

Hello, @Cyrille! Could you send an example with a markdown cell? I don't know markdown, but having an example, I could experiment in order to obtain a solution.

dsejas gravatar imagedsejas ( 2020-05-01 05:39:55 +0100 )edit

For instance I use %%html <style> body { font-family: "Palatino Linotype", cursive, sans-serif; background-color: rgb(252,251,251); } .prompt { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; min-width: 6em; } .input-prompt { color: rgb(108, 119, 188); } .output-prompt { color: rgb(20, 129, 106); } code, kbd, pre, samp, .CodeMirror { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; }

In the first cell, it's nice but I have noticed that I lost mathjax since $\int_a^b \sin(x)dx$ is displayed literally

</style>

Cyrille gravatar imageCyrille ( 2020-05-01 19:04:16 +0100 )edit

take a look here, probably it is the answer that you wants, however Im not sure if it would work for sage under windows, try it

Masacroso gravatar imageMasacroso ( 2020-05-02 19:36:44 +0100 )edit

2 Answers

Sort by ยป oldest newest most voted
1

answered 2020-05-02 07:01:59 +0100

dsejas gravatar image

updated 2020-05-02 20:46:04 +0100

Hello, @Cyrille! I am not completely sure that I understood what you intend to do, but I hope this solves your problem. I am using the configurations you wrote in your comment.

First, put the following in a Jupyter cell:

html("""
<style>
    body { font-family: "Palatino Linotype", cursive, sans-serif; background-color: rgb(252,251,251); }
    .prompt { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; min-width: 6em; }
    .input-prompt { color: rgb(108, 119, 188); }
    .output-prompt { color: rgb(20, 129, 106); }
    code, kbd, pre, samp, .CodeMirror { font-family: "Palatino Linotype", cursive, sans-serif; font-size: 15px; }
</style>""")

The first line indicates that this cell will execute html code. Then, the second line is the code from your comment, but you should have the Palatino Linotype fonts installed on your computer. This should change all the fonts.

Many parts of the Jupyter notebook have different styles, which will overwrite your font settings. For example, the code html tag uses monospace fonts; that is why you should change some tags and classes settings also. (I suspect you are using this complicated style because you inspected the tags and classes of the Jupyter notebook. As far as I can see, these are all the configurations you will require; but if you were to need to change the font for something else, I assume you will be able to discover the corresponding tag or class.) Another important comment is that you could the body tag with *---personally, I can't see the difference, but it is my understanding that* is more general.

After this, you can write something like

%%latex
The formula
$$\int_a^b\sin(x)\;dx=-\cos(b)+\cos(a)$$
is completely correct.

as your second cell, and you will notice that the font is consistent. (This should solve the problem with MathJax you mentioned in your comment.) Since the Jupyter notebooks are html, you can inspect the code with the developer tools of your web browser (for example, pressing <f12> in Firefox) to verify that the correct font has been used.

Sage code cells do not require any special magic comments; just write what you need to execute:

integrate(x^2, x)

That being said, if you share your Jupyter notebook with somebody that doesn't have the fonts you used intalled on their system, the web browser will use some default font. You can prevent this from happening by using a web font service like Google Fonts. For instance, here I am importing a font and using it for the complete notebook:

html("""
<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
    body { font-family: "Roboto Slab", serif; background-color: rgb(252,251,251); }
    .prompt { font-family: "Roboto Slab", serif; font-size: 15px; min-width: 6em; }
    .input-prompt { color: rgb(108, 119, 188); }
    .output-prompt { color: rgb(20, 129, 106); }
    code, kbd, pre, samp, .CodeMirror { font-family: "Roboto Slab", serif; font-size: 15px; }
</style>""")

You can also download the fonts you require, put the in a folder called, for example, "fonts" and share it together with your notebook. In that case, you should write something like

html("""
<style>
    @font-face { font-family: "Roboto Slab"; src: url("fonts/RobotoSlab-VariableFont_wght.ttf"); }
    body { font-family: "Roboto Slab", serif; background-color: rgb(252,251,251); }
    .prompt { font-family: "Roboto Slab", serif; font-size: 15px; min-width: 6em; }
    input-prompt { color: rgb(108, 119, 188); }
    output-prompt { color: rgb(20, 129, 106); }
    code, kbd, pre, samp, .CodeMirror { font-family: "Roboto Slab", serif; font-size: 15px; }
</style>""")

I should point out that not all the fonts obey the cursive or the sans-serif settings (for example, "Roboto Slab"). However, remember that normal text should be written in roman font, while math should be written in cursive. I don't recommend using cursive for the complete notebook.

If you prefer, instead of using Sage's html function, you can use IPython's HTML function. You should write the following in some cell before using it:

from IPython.display import HTML

I hope this helps!

edit flag offensive delete link more

Comments

Of course this help. Now is there a way to hide this cell with a button ?

Cyrille gravatar imageCyrille ( 2020-05-02 12:33:41 +0100 )edit

@Cyrille about the button you can try something like this. If Im not wrong you can use python code inside sagemath cells, so it could work

Masacroso gravatar imageMasacroso ( 2020-05-02 19:47:26 +0100 )edit

Hello, @Cyrille! Please, see my answer to this question. It is a partial solution, but I think it will be helpful.

dsejas gravatar imagedsejas ( 2020-05-02 21:08:48 +0100 )edit
1

answered 2020-04-30 22:53:46 +0100

nbruin gravatar image

updated 2020-05-01 18:43:27 +0100

According to https://jupyter-notebook.readthedocs.... markdown is a superset of HTML. Since you can change fonts in HTML, it would follow that you can change fonts in markdown cells too. I suspect it's going to be quite painful to do, and would result in worksheets that don't fare very well under other export methods.

In fact, one of the best ways to get things in Computer Modern would be by exporting your sheet to LaTeX (and probably to PDF from there)

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

1 follower

Stats

Asked: 2020-04-30 08:54:03 +0100

Seen: 1,756 times

Last updated: May 02 '20