Jupyter Book#

Jupyter Book

Examples

  • list
  • list (pick from website)

Complete tuto

Getting Started#

Prerequisties#

  • Anaconda

Note

Insert link toward Anaconda tutorial

Installation#

using the command line copy and paste the following command

pip install -U jupyter-book

Build your first book#

Before you build your first book, make you are located in the folder within which you want your book to be placed using the command cd

jb create mybookname/

Description#

The perfect tool to Build beautiful, publication-quality books and documents from computational content

How it works#

take a collection of markdown files and trasnform them into a static web site (link HTML Course)

Warning

Try to understand how the build work.

  • Can get a bit messy !

Sphinx#

How they relate to one another.

Functionality#

Citation#

reference files using references.bib

{cite}`Deguin2018`

Note

Create specific naming convention for the different .bib file

Formatting#

The formatting is taken care of by Sphinx

Admonitions#

How to#

Admonition can be added easily. Jupyter Book has a few:

```{note}
note
```

# Markdown friendly 

:::{admonition} title
note supporting **Markdown**
:::
Examples#

Warning

warning

To add

note that support Markdown syntax

… and you can create your owns

Get creative#

Note

add explosion html in title

Cards#

Teaching#

Create your own admonition#

Jupyter Book allow you to create your own admonition (which is pretty cool)

This is the **title**

This is the *content*

This is how it comes out, direct from the provided example, but with a bit of code in the custom.css file in the _static folder :

<div class="admonition_dialogue" name="html-admonition" style="background: lightgreen; padding: 10px">
<p class="title_dial"> <img src="Docs/Svg_icons/dark-dialogue-bubble-svgrepo-com.svg" class="picto" alt=">">This is the **title** <img src="Docs/Svg_icons/Docs/Svg_icons/flag-for-flag-france-svgrepo-com.svg" class="picto"></p>
This is the *content*
</div>

modify class name …

add image via html - link towards html teaching

>This is the **title**

This is the *content*

Some **content**

A *title*

Paragraph 1

Paragraph 2

Dialogue flag alt > - flag alt >

French Dialogue admonition Baby :)

Explain how I tried a solution with what I know (ie html), and a quick (how to walk around the problem) think through help to resolve the issue

Insert your own Javascript#

Link to picture example.

  • Insert your .js script file into the static folder

Other#

Multiple book embeded#

Architecture

Github Repo

Demo