Aller au contenu

Vers la simplification de la contribution : le choix du Markdown#

📆 Date de publication initiale : 14 septembre 2020

Mots-clés : Python | Markdown | Beautifulsoup

Introduction#

Dans le cadre de la série d'articles sur la renaissance de Geotribu (lire la petite histoire de Geotribu), on a vu comment utiliser le web-scraping pour récupérer les anciens contenus depuis une sauvegarde locale ou l'Internet Archive.

Après cela, on a donc un beau cocktail Web on The Beach : HTML + CSS + JavaScript 🍸.

cocktail Gatsby

C'est bien beau mais, à part réinstaller un Drupal avec le bon modèle de BDD, on en tirera pas grand chose. Et puis ce qui nous intéresse vraiment, le nectar de Geotribu c'est le contenu rédactionnel : le texte, les images, les bouts de code, les vidéos, etc. Or, la structure, les scripts et les mécanismes de rendu (CSS...) sont encore trop intimement liés.

Dans cet article, on va voir pourquoi et comment on a choisi de passer sur une rédaction en Markdown. Au passage, on se refait un coup de web-scraping histoire d'enfoncer le clou 🔨.


Markdown, lingua franca du contenu éditorial en ligne#

logo markdown

Inspiré par le plain-text email (texte brut dans un courriel en bon français) ou encore le ReStructuredText (RST), la syntaxe Markdown est conçue pour être facile à lire, à écrire et à convertir, tout en prenant soin de ne pas casser les balises du HTML.

Cette dernière caractéristique est essentielle puisque cela a facilité l'intégration de la syntaxe dans de nombreux formulaires webs ou services. Très utilisée par les développeurs pour les documentations, elle est désormais très intégrée dans les milieux professionnels et y compris grand public : Slack, WordPress, etc. Certains services, tels Markdown Here, allant jusqu'à proposer de l'utiliser pour améliorer la rédaction des emails. Du côté universitaire, la syntaxe est également très répandue :

  • d'une part en étant quasiment un pré-requis pour les notebooks Jupyter
  • d'autre part car elle permet d'intégrer LateX et les syntaxes scientifiques. Exemple : https://upmath.me/.

Bref, au revoir BBCode, DokuWiki, WikiTexte, etc. Bonjour Markdown :

markdown exemple

Une syntaxe, des rendus#

A l'instar de n'importe quelle langue, qui plus est non standardisée, le rendu HTML du Markdown dépend de l'implémentation qui en est faite : technologie, finalité et philosophie du processus de conversion, etc. Ainsi, il y aura des différences à l'affichage ou au traitement.

Tip

Pour ne pas dupliquer ici du contenu existant, je vous renvoie vers l'article Comprendre et tester le moteur de rendu du site.


Du HTML au Markdown#

mouton

Revenons à nos géo-moutons.

Une fois le HTML et les ressources liées (images...) récupérés de Geotribu, j'ai opté pour un stockage sous forme de Markdown. Pour cela, j'ai utilisé le package markdownify qui permet de transformer du HTML en Markdown.

Vu qu'on a déjà passé un article sur le projet Scrapy utilisé pour récupérer les anciens contenus depuis l'Internet Archive, je ne vais pas de nouveau détailler le pipeline mais plutôt démontrer comment appliquer la même mécanique facilement :

  1. aspirer un site web avec du web-scraping
  2. traiter le HTML pour décortiquer le contenu :
    • extraire le texte et les styles du HTML → transformer en Markdown
    • extraire les medias statiques (images, etc.) pour les stocker dans un espace tiers (CDN)

La conversion par l'exemple : rendre lisible un article du CNIG#

L'usage de markdownify est simple. Pour s'en rendre compte, testons cela rapidement avec un petit objectif pour l'occasion : transformer en markdown le dernier article du site du CNIG pour le lire sans saigner des yeux.

Au passage, on en profite pour essayer deux autres bibliothèques pour ce genre de cas de figure :

  • Beautifulsoup : pour le parsing du HTML
  • urllib3 : pour facilement faire des requêtes HTTP ; requests ou httpx étant surdimensionnés pour notre besoin, mais avec la flemme de gérer les détails (décodage, etc.)

Structure#

En regardant les sources de l'article, on sait que le contenu intéressant est dans la div de class post-content :

Source HTML CNIG

Prérequis#

Avant de commencer, on installe ce qu'il nous manque :

1
python -m pip install beautifulsoup4==4.9.* markdownify==0.5.2 urllib3==1.25.*

Scraping et conversion à la volée#

Puis cela tient en quelques lignes dûment commentées :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#! python3

# -- Imports

# Bibliothèque standard
from pathlib import Path

# Packages tiers
import urllib3
from bs4 import BeautifulSoup
from markdownify import markdownify

# -- Variables

in_url = "http://cnig.gouv.fr/?p=23807"
out_filepath = Path("./cnig_23807.md")

# -- Programme principal

# d'abord on télécharge la page
http = urllib3.PoolManager()
page = http.request('GET', in_url)

# on parse le html
soup = BeautifulSoup(page.data, "html.parser")

# on extrait ce qu'il y a dans la classe post-content
post_content = soup.find("div", {"class": "post-content"})

# on transforme en markdown en spécifiant le style de titre avec des '#'
out_md = markdownify(post_content, heading_style="ATX", autolinks=False)

# on écrit notre fichier
with out_filepath.open("w", encoding="UTF8") as fifi:
    fifi.write(out_md)

Le résultat, ainsi que le code, sont disponibles dans ce gist.


Conclusion#

Evidemment, le résultat est loin d'être parfait et cela demande quelques ajustements et améliorations : déterminer le nom du fichier selon le titre de la page, nettoyer les espacements avant les paragraphes, etc. D'ailleurs, ce nettoyage manuel est toujours en cours pour une partie des contenus de Geotribu.

Cela démontre bien à la fois la faisabilité et les limitations du traitement automatisé, qu'on peut résumer ainsi :

graph TD; A[Site archivé]-->B[Scraping]; B-->C[HTML]; B-->D[Images]; C-->E[Markdown]; D-->F[CDN];

Suite : déployer le site de Geotribu sur son ordinateur


Auteur#

Julien Moura#

Portrait Julien Moura

Géographe "sigiste" de formation, j'ai d'abord travaillé sur différentes thématiques et types de structures : la gestion des déchets en milieu urbain à Madagascar, le foncier d'intérêt général auprès de l'EPF de La Réunion, l'organisation et la résilience urbaine face aux risques naturels à Lima pour l'IRD.

C'est en m'intéressant à la gouvernance et à l'ouverture des données géographiques que je travaille à Isogeo quelques années. L'occasion d'asseoir mes compétences en développement et gestion de produit informatique. En 2020, je deviens indépendant (In Geo Veritas) puis rejoins les rangs d'Oslandia.

Féru des dynamiques de contributions, je participe activement à Geotribu depuis fin 2011 et, comme ça me manquait trop, j'ai décidé de lancer sa renaissance en 2020.


Dernière mise à jour: 4 janvier 2021
Contributions à cette page : Julien Moura

Commentaires