Le Bloc Note pour rapporter¶

Dans un notebook jupyter on peut rédiger des commentaires en langage naturel, intégrer des liens hypertextes et des images dans des cellules de type Markdown.

Ce document est un notebook jupyter, expérimenter les cellules suivantes pour bien vous familiariser avec cet environnement, puis découvrez également d'autres fonctionnalités.

Markdown est un langage de description à balisage plus léger que HTML et donc plus rapide pour rédiger et publier un document sur le Web.
Aussi, il est de plus en plus utilisé : incontournable sur GitHub, les forums d'OpenClassroom, de Stack Overflow...

L'idée est de pouvoir mettre en forme du texte sans avoir besoin de recourir à la souris : en même temps que l'on écrit du contenu on indique par des symboles codifiés comment il faut l'afficher...

A faire vous-même

Pour afficher le résultat du code Markdown proposé, basculer le type de la cellule de Code vers Markdown, puis appuyer sur le bouton ou sur les touches <Maj+Entree> .

Les titres :¶

In [ ]:

# Titre de niveau 1
## Titre de niveau 2
### Titre de niveau 3
#### Titre de niveau 4
##### Titre de niveau 5

Le corps de texte :¶

In [ ]:

Sed quid est quod in hac causa maxime homines admirentur et reprehendant meum consilium, cum ego idem antea multa decreverim, que magis ad hominis dignitatem quam ad rei publicae necessitatem pertinerent ?
Supplicationem quindecim dierum decrevi sententia mea.
Rei publicae satis erat tot dierum quot C. Mario ; dis immortalibus non erat exigua eadem gratulatio quae ex maximis bellis.
Ergo ille cumulus dierum hominis est dignitati tributus.
Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Retour à la ligne et paragraphes¶

A faire vous-même

Dans le lorem ipsum ci-dessus, insérer deux espaces à la fin d'une phrase pour forcer le retour à la ligne et insérer une ligne vide pour former des paragraphes.

Italique¶

In [ ]:

_Texte_ avec *emphase* en Italique

Gras¶

In [ ]:

__Texte__ plus **important** en Gras

Gras et italique combinés¶

In [ ]:

**_Texte_** à la fois en **gras** et en *italique*

Barré¶

In [ ]:

Texte barré ~~à supprimer~~

A faire vous-même

Dans le lorem ipsum ci-dessus, formater certains éléments pour les afficher soit en italique, en gras ou ~~barré~~.
Remarque : pour souligner un élément il faudra utiliser un code HTML.

Les listes :¶

Non ordonnée¶

In [ ]:

* Un élement de ma liste ;
* Un autre élément de ma liste ;
    * Un élément de ma sous-liste ;
    * Un autre élément de ma sous-liste ;
* Encore un autre élément de ma liste.

Remarque : On peut aussi utiliser un + ou - à la place de l'*.

Ordonnée¶

In [ ]:

Le premier élement de ma liste ;
Le second élément de ma liste ;
Le premier élément de ma sous-liste ;
Le second élément de ma sous-liste ;
Le troisième élément de ma liste.

Les citations :¶

In [ ]:

> une citation est un paragraphe ouvert par un chevron fermant

Les traits horizontaux de séparation¶

In [ ]:

***

In [ ]:

---

Tableau :¶

In [ ]:

| Tables   |      Are      | Cool |
|----------|:-------------:|-----:|
| col 1 is |  left-aligned | 1600 |
| col 2 is |    centered   |   12 |
| col 3 is | right-aligned |    1 |

A faire vous-même

On peut avantageusement utiliser un générateur de tableau comme : https://www.tablesgenerator.com/markdown_tables

Image :¶

In [ ]:

![Turing's Device](http://www.google.com/logos/2012/turing-doodle-static.jpg "Alan Turing's 100th Birthday")

Pour afficher une image, il faut commencer par un point d’exclamation. Puis indiquer le texte alternatif entre crochets. Ce dernier sera affiché si l’image n’est pas chargée et lu par les moteurs de recherche. Terminer par l’URL de l’image entre parenthèses. Cette URL peut être un lien absolu vers le web ou un chemin relatif de ce type : /dossier_images/nom_de_mon_image.jpg. Après le lien vers l’image, il est possible d’ajouter un titre lu par les navigateurs textuels et affiché au survol de l’image par les autres.

![Logo du Lycee Notre Dame Du Mur](https://ericecmorlaix.github.io/img/ECAM-Lycee-Notre-Dame-Du-Mur.png "Logo du Lycee Notre Dame Du Mur de Morlaix" =200x100)

Remarque 1 :

https://ericecmorlaix.github.io est un dépot GitHub qui contient toutes mes images publiées...

Remarque 2 :

Il n'est pas possible de gérer simplement la taille d'affichage d'une image en Markdown. Il faut soit dimensionner correctement l'image en amont, soit utiliser un code HTML adapté.

Pour compléter concernant les images, il est aussi possible d’insérer une image dans une cellule Markdown par le menu Edit>Insert Image ou tout simplement en glissant/déposant le fichier image depuis votre explorateur vers la cellule Markdown du Notebook.

La syntaxe générée automatiquement est alors de la forme ![JupyterNoteBook.png](attachment:JupyterNoteBook.png)

Inutile d’ajouter le fichier image dans le dossier du Notebook car il lui est alors « attaché ».

En ouvrant ce fichier .ipynb dans un éditeur de texte comme Sublime3, on obserse le code de l'image attachée dans le code :

{
 "cells": [
  {
   "attachments": {
    "JupyterNoteBook.png": {
     "image/png": "iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAIAAAAVFBUnAAAAAXNSR0Img................."
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Mémo concernant les images dans un Jupyter NoteBook :\n",
    "\n",
    "![JupyterNoteBook.png](attachment:JupyterNoteBook.png)\n"
   ]
  },````

  > **/!\ ATTENTION** car la taille d'un carnet jupyter avec des images intégrées explose...

In [ ]:

Insérer une image dans cette cellule...

Lien hypertexte :¶

Isolé :¶

In [ ]:

http://ecmorlaix.fr/

Inclu dans un paragraphe :¶

In [ ]:

Le portail de l'[ECA.M](http://ecmorlaix.fr/ "Lien vers le portail des Etablissement Catholiques Associés de Morlaix")

Sur une image :¶

In [ ]:

[![Logo de l'ECA.M](https://ericecmorlaix.github.io/img/ECAM-Logo.png)](http://ecmorlaix.fr/ "Lien vers le portail des Etablissement Catholiques Associés de Morlaix")

Il est également possible de faire des liens par références pour rendre le code Markdown plus lisible :

In [ ]:

Je reçoit 10 fois plus de trafic de [Google] [1] que de [Yahoo] [2] ou [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

Code :¶

Elément de code en ligne¶

In [ ]:

Texte avec un `élément de code`.

Bloc de code¶

In [ ]:

```python
# Voici un bout de code en Python
from numpy import *
from numpy.random import *
int(rint(rand()*5+1))
```

Ressources :¶

https://blog.wax-o.com/2014/04/tutoriel-un-guide-pour-bien-commencer-avec-markdown/
https://fr.wikipedia.org/wiki/Markdown
https://openclassrooms.com/courses/redigez-en-markdown
Traduction française de la syntaxe complète de Markdown : https://michelf.ca/projets/php-markdown/syntaxe/
Un éditeur de Markdown en ligne : https://stackedit.io/
Une extension de navigateur pour rédiger des mails : https://markdown-here.com/

A vous de jouer :¶

A faire vous-même

Saisir votre texte balisé en code Markdown dans la cellule suivante, jupyter affichera le résultat mis en forme automatiquement...

In [ ]:

Félicitations ! Vous êtes parvenu au bout des activités de ce bloc note.
Vous êtes maintenant capable de rédiger en Markdown dans l'environnement interactif jupyter notebook.

Pour explorer plus avant d'autres fonctionnalités de jupyter notebook repassez par le Sommaire.

Ce document est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.

Pour toute question, suggestion ou commentaire : eric.madec@ecmorlaix.fr

In [ ]: