First things first: Thank you so much for getting here (whatever is your referral URL)

Valerio 🤗

noTeXbook logo

This notebook introduces the $\text{no}\TeX\text{book}$ Jupyter Notebooks theme.

In the next two sections, we will start with a quick overview spoiler of the theme's main typesetting features, then we will dive into all of its very nuts and bolts, including Editor Colour Themes, ad-hoc formattings, monospace fonts, and much more.

$\text{no}\TeX\text{book}$ shall be thy name

When I had to come up with a name for the theme, I aimed almost immediately at finding a single word that would convey the idea of integration of the Jupyter notebooks with $\LaTeX$ I had in mind. Indeed, no$\TeX$book seemed quite an obvious choice: this name is a unique portmanteau1 that blends together the words noTeXbook, and noTeXbook, that is the original name of Donald E. Knuth's book on $\TeX$.

That was the omen! One!... Two!... Five! 2

The $\text{no}\TeX\text{book}$ theme wishes to pay a tribute of gratitude to two of the technologies I do use and love the most as a researcher and a data scientist.

**[1]**: `port·​man·​teau | \ pȯrt-ˈman-(ˌ)tō` **[2]**: [The Holy Hand Granade](https://www.youtube.com/watch?v=xOrgLj9lOwk) - Monthy Python and the Holy Grail

$\text{no}\TeX\text{book}$ Theme in a Nutshell

Moreover, the theme also includes a few tweaks to the general Notebook/Jupyterlab UI: the colours of all the icons and Kernel status indicators uses the theme's main palette, and a special emphasising effects is applied on active cell in either command or edit modes, as well as on multiple cells selections.


The $\text{no}\TeX\text{book}$ Theme

Table of Contents


Colour Palette

The theme main colour palette is based on these main 7 colours.

These colours can also be used in special formattings for text colouring using ad-hoc CSS classes (all following the same naming rule): .texbook-<COLOUR NAME>

$\rightarrow$ Turquoise; Azure; Blue; Dark Grey; Light Grey; Magenta; Red; Orange; Yellow $\leftarrow$

$\uparrow$ top


Fonts and Typeface

All the fonts used in the $\text{no}\TeX\text{book}$ theme typeface design are open source, freely available on public font repositories (e.g., Google Fonts, CDN Fonts, FontSquirrel), and released under the OFL (Open Font License), and alike. Original reference and download links are provided below.

$\text{no}\TeX\text{book}$ typeface

The main goal of the $\text{no}\TeX\text{book}$ theme is to allow Jupyter notebooks to render like a $\LaTeX$-generated article. Therefore, the (Markdown) text rendering adopts the good ol' Computer Modern font family for both serif and monospace text (i.e. CMUSerif and CMUTypewriter fonts, respectively).

In edit mode, the Hack font is used for Markdown editor, whereas Fira Code font is used for code editor. The former looks slightly better for text writing (imho), being also based on the Bitstream Vera and the DejaVu fonts. Fira Code on the other hand has been specifically designed for source code, combining a clean and elegant style with ligratures support3.

**[3]**: Support for ligatures in the Markdown editor would be quite pointless, as the cell will be ultimately rendered in Computer Modern font.

Notebook UI

The font used for everything else in the Notebook UI and look-and-feel (e.g. header, navbar, jupyter-server home page (notebook list) uses the Roboto Slab font.

Font References and Links

Font Format Reference License Download
Computer Modern OpenType (otf) tug.org SIL OFL Link
Hack TrueType (ttf) Github MIT Link
Fira Code OpenType (otf) Github SIL OFT Link
Roboto Slab OpenType (otf) Google Fonts Apache License, v2.0 Link

$\uparrow$ top


Markdown

(Miscellaneous of text formatting and emphasis - adapted from Markdown Cheatsheet) - License: CC-BY

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores, also for bold italic mono

Mono blocks are supported too.

Strikethrough uses two tildes, colored in red: Scratch this.

Headers

Part (h1)

Chapter (h2)

Section (h3)

Subsection (h4)

Subsubsection (h5)
Paragraph (h6)

Lists

  1. First ordered list item
  2. Another item with mono
    • Unordered sub-list.
  3. Actual numbers don't matter, just that it's a number
    1. Ordered sub-list
  4. And another item.

Tables

Tables Are Cool
col 3 is right-aligned \$1600
col 2 is centered \$12
zebra stripes are neat \$1

Blockquotes and Monospace Paragraphs

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

This paragraph will be using monospace font.

$\uparrow$ top

Code Highlighting

Special mention goes to code syntax highlighting support in Markdown cells: they will still be using the default CMUTypewriter monospace font, but they will also share the same colour scheme used for code cells (more on this in the Code Editor Section).

For example:

// Javascript Highlighting
var x = 3.14;    // A number with decimals
var y = 3;       // A number without decimals
# Python highlighting
import antigravity
from __future__ import barry_as_FLUFL  # PEP401
echo "Shell syntaxt highlighting"

$\uparrow$ top

Math

Math and $LaTeX$ text style integration is supported (via MathJax) both in inline and block modes.

Inline math: $ X^2 + 1 = 1 $ works fine.

Math block:

$$ X^2 + 1 = 1 $$

Some more Math examples taken from Latex/Advanced Mathematics:

$$ \begin{equation} f(x)=(x+a)(x+b) \end{equation} $$$$ \begin{equation} L' = {L}{\sqrt{1-\frac{v^2}{c^2}}} \end{equation} $$

Maxwell's equations: $$ \begin{equation} \left.\begin{aligned} B'&=-\partial \times E,\\ E'&=\partial \times B - 4\pi j, \end{aligned} \right\} \qquad \text{Maxwell's equations} \end{equation} $$

Factorials and Binomials: $$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$

fraction within a fraction $$ \frac{\frac{1}{x}+\frac{1}{y}}{y-z} $$

Limits: $$ \begin{equation} \lim_{a\to \infty} \tfrac{1}{a} \end{equation} $$

Math formulas with comments:

$$ [ y = a + f(\underbrace{b x}_{ \ge 0 \text{ by assumption}}) = a + f(\underbrace{b x}_{ \ge 0 \text{ by assumption}}) ] $$

gather: Consecutive equations without alignment $$ \begin{gather*} a_0=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\,\mathrm{d}x\\[6pt] \begin{split} a_n=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\cos nx\,\mathrm{d}x=\\ =\frac{1}{\pi}\int\limits_{-\pi}^{\pi}x^2\cos nx\,\mathrm{d}x \end{split}\\[6pt] \begin{split} b_n=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\sin nx\,\mathrm{d}x=\\ =\frac{1}{\pi}\int\limits_{-\pi}^{\pi}x^2\sin nx\,\mathrm{d}x \end{split}\\[6pt] \end{gather*} $$

alignat: Allows control of the horizontal space between equations. $$ \begin{alignat}{2} \sigma_1 &= x + y &\quad \sigma_2 &= \frac{x}{y} \\ \sigma_1' &= \frac{\partial x + y}{\partial x} & \sigma_2' &= \frac{\partial \frac{x}{y}}{\partial x} \end{alignat} $$

$\uparrow$ top

Extras

In addition to standard Markdown integration, the $\text{no}\TeX\text{book}$ theme provides extra CSS classes to allow for additional $\LaTeX$-ish formatting, and extra typesetting for notebooks:

  1. Footnotes
  2. Drop Cap
  3. Image Width
  4. Badges
  5. Inline Math
  6. Inline Mono

1. Footnotes

Any HTML link targeting a bookmark or an anchor including fn (as in footnote) in their name will be automatically interpreted as links to a footnote. For example:

[1](#fnlink)

The above link will be automatically rendered as superscript and within square-brackets1

To actually generate the footnote text, every HTML tag mapped to an id starting with fn (or alternatively using the fn class) will be automatically formatted as footnote text. Footnote symbol should be emphasised in bold:

<span id="fnlink"><b>[1]:</b> This is an example of a footnote</span>

[1]: This is an example of a footnote

2 Drop Cap

A special class to display a drop cap could not be missing in the $\text{no}\TeX\text{book}$ theme.

It is just required to use the drop CSS class:

<span class="drop">O</span>nce upone a time...

Once upone a time...

3. Image Width

As default, the max-width of images (and SVG) is automatically capped at the 70% to allow for a proper rendering of large images, whilst avoiding any potential overflow.

Nonetheless, there may be cases in which it would be required to control the max-width parameter in order to enlarge or shrink an image. Special CSS classes are available controlling the max-width attribute of displaying images.

All this classes share the same name prefix (i.e. .maxw) followed by the corresponding ma-width expressed as percentage value. The list of available CSS Classes is:

>>> [f"maxw{i}" for i in range(5, 101, 5)]
['maxw10', 'maxw15', 'maxw20', 'maxw25', 'maxw30', 'maxw35', 'maxw40', 'maxw45', 'maxw50', 
 'maxw55', 'maxw60', 'maxw65', 'maxw70', 'maxw75', 'maxw80', 'maxw85', 'maxw90', 'maxw95', 
 'maxw100']

Examples:

<!-- max-width: 10% -->
<img [...] class="maxw10" />

<!-- max-width: 35% -->
<img [...] class="maxw35" />

4. Badges

The theme also defines special classes to include badges.

This may turn out to be particularly useful in notebooks to include links to external services like Google Colab, MyBinder, or NBViewer,

In order to do so, the theme provides the CSS class .badges that can be used in a Markdown cell:

<div class="badges"> ... </div>

Here is an example:

[![Colab](https://colab.research.google.com/assets/colab-badge.svg)]() [![myBinder](https://mybinder.org/badge_logo.svg)]() [![nbviewer](https://raw.githubusercontent.com/jupyter/design/master/logos/Badges/nbviewer_badge.svg)]()

5. Inline Math

The inline-math CSS class forces to display inline Math blocks. This may be particularly useful in cases we do want to use the $\LaTeX$ Math-block environment to write equation, but we do not want to have it displayed in a separate paragraph:

$$ \sum_{i=1}^{N} x_i^2 $$

To do so, let's just wrap the equation with a span HTML tag with class .inline-math:

<span class="inline-math">... </span>

This equation will be displayed inline: $$ \sum_{i=1}^{N} x_i^2 $$

6. Inline Mono

The default monospace font used in Markdown Cell rendering is CMUTypewriter, that is the monospace font of the Computer Modern Family. However, the $\text{no}\TeX\text{book}$ theme also utilises two additional monospace fonts (for Code and Markdown editors), and sometimes it may also be required to use any of these fonts in rendered text.

To do so, the theme provides two special CSS classes, namely .codemono and .mdmono that will serve exactly this purpose.

The example below demonstrates how to force the rendering of the following inline mono using code editor font

<span class="codemono">`Code Monospace Font` with Ligatures **support** `--> >= !=`</span>

`Code Monospace Font` with Ligatures **support** `--> >= !=`

$\uparrow$ top


Code Sample

Here is how Python code looks like in $\text{no}\TeX\text{book}$ theme.

The following code excerpt has been taken from the PyTorch code base (source)

$\uparrow$ top

Code Editor

The CSS style for code and markdown editor integrated in $\text{no}\TeX\text{book}$ adopts a strategy that aims at flexibility and extensibility.

The main style file for code editors is editors.css. This file imports each theme for both code and markdown editors. The themes for the two editors are defined in two different files, to allow for maxmimum flexibility in the choice of the colours schemes to adopt.

In each theme file, the base colour palette is defined, along with the mapping of each of these colours to specific (editor) variables. These variables are then used to define the CSS style rules.

In this way, it is very easy to change or try multiple themes, or even defining custom new ones.

The default colour scheme used for code and markdown editor is based on the Material Design Light Theme. In addition, other editor themes are bundled with the $\text{no}\TeX\text{book}$ Jupyter theme, e.g. GitHub Light for code, Typora theme for markdown.

The base colour palettes for each of those themes are showed below.

(Code & Markdown) Material Design Light Theme (material)

The default colour palette used for both Code and Markdown editors is inspired by the Material Design Light Theme.

The colour palette is declined on 12 colours, reported below:

The Markdown editor uses only a subset of those colours. In particular:

(Code only) GitHub Theme (github)

This theme builds on the new code editor theme available on GitHub.

(Code only) GitHub Light Theme (github-light)

The GitHub Light theme is an alternative theme inspired by the (previous) GitHub light theme.

Reference: Github Syntax Highlighting

(Code only) Crisp Light Theme (crisp)

The colour palette of the Crisp Light editor theme is inspired by the Crisp light theme included in the Rainglow collection of VSCode Themes

Reference: https://github.com/rainglow/vscode/

(Markdown only) Typora Theme (typora)

This theme is inspired by the default (markdown) source code visualiser available built-in in Typora*

*: Typora is definitely my default editor for Markdown! Highly recommended $\rightarrow$ [typora.io](http://typora.io)

$\uparrow$ top

Dataframe

The look and feel of dataframes (tables) is slightly changed.

I've chosen a post-it note color for the table background so that dataframe output standsout, especially when scrolling through a long notebook.

Errors and Exceptions

$\uparrow$ top


Extensions

JupyterLab (and HTML export)

Jupyter Lab is fully supported!

Moreover: the latest versions of jupyter-nbconvert apply the lab template as default HTML template for export. This generates a DOM structure which is compliant with Jupyter Lab.

Here is an example of this notebook exported with lab template $\Rightarrow$ Jupyter Lab Light

custom.css Jupyter theme

The $\text{no}\TeX\text{book}$ theme is also available as a full-fledged custom Jupyter notebook theme (HTML/CSS). This is useful in case one would prefer to enable the theme as the global custom default Jupyter theme.

The noTeXbook theme package is available for download, along with its corresponding documentation.

The documentation also contains details on the original CSS design, and instructions on how to define your own CSS Editor Colour theme.

Google Colaboratory

The HTML of a Colaboratory notebook is nothing similar to the standard Jupyter notebook/lab HTML structure (so the custom-css cannot work). In addition, every single Colaboratory notebook cell generates a new HTML iframe, so making the texify IPython magic pretty much useless too.

Therefore, the only solution I could resort to was using the Stylus) browser extension. Unfortunately this is not as customisable and portable as the IPython magic, but hey?! Better than nothing 🤓

All the instructions on how to install $\text{no}\TeX\text{book}$ for Google Colaboratory Notebooks are available $\Rightarrow$ here) on the branch specifically dedicated to the Colab version of the theme.

Once you are done, try to open the sample notebook in Colab, and enjoy 🙌

Open In Colab

$\uparrow$ top


Credits

(Some links I found useful along the way):

Acknowledgments

Special thanks to cdesio, ninadicara, and alanderex for testing earlier versions of the theme!

$\uparrow$ top