Prendre des notes et rédiger en Markdown

Obsidian – Zettlr – ♥ Pandoc ♥ – (et Zotero)

UPPA – Service Commun de la Documentation
<-- Formation des usagers -->

Julien Rabaud (Service d’appui à la recherche)
julien.rabaud@univ-pau.fr | @ujubib
– Mars 2021 –

+++ Liens envoyés avant la présentation +++
+++ Autres liens +++

Déroulé

  • Généralités, histoire, définitions
  • Markdown, syntaxe et saveurs
  • Prendre des notes en Markdown
  • Rédiger en Markdown
  • Et Zotero dans tout ça…
  • La magie Pandoc
  • Extensions (diaporama, diagrammes, mindmap)

Généralités, définitions

Fichiers binaires, fichiers textes

  • Fichiers binaires : nécessitent un logiciel spécifique pour être lus et édités :

    • .docx, .odt, .pdf
  • Fichiers textes : lisibles et modifiables dans un simple éditeur de texte :

    • .md, .html, .tex, .rst

Markdown

Markdown est un langage de balisage léger créé en 2004 par John Gruber avec l’aide d’Aaron Swartz. Il a été créé dans le but d’offrir une syntaxe facile à lire et à écrire. Un document balisé par Markdown peut être lu en l’état sans donner l’impression d’avoir été balisé ou formaté par des instructions particulières.

Wikipedia (fr) : Markdown


> Le site de John Gruber

> Le billet du regretté Aaron Swartz


#CultureNum : documentaire The Internet’s Own Boy: The Story of Aaron Swartz
(sous-titres en plusieurs langues disponibles)

Définitions

  • Structuration
  • Balisage
  • Feuille de style

Markdown, syntaxes et saveurs

Saveurs

  • CommonMark (ppdc)
  • Github Flavored Markdown (GFM)
  • MultiMarkdown (MacOS, révision)
  • Pandoc’s Markdown
  • Rmarkdown (.rmd)

Guides et tutoriels

Markdown Guide

Le plus clair, complet(*) et synthétique. Contient :

(*) Ne traite pas des références bibliographiques, spécificité de Pandoc.
Voir Manuel Pandoc, Citations

Syntaxe inline

markdown html affichage
*italique* ou _italique_ <em>italique</em> italique
**gras** <strong>gras<strong> gras
***gras italique*** <strong><em>gras italique</em></strong> gras italique
~~barré~~ <s>barré</s> barré
XIX^e^ XIX<sup>e</sup> XIXe
H~2~O H<sub>2</sub>O H2O
[texte](url) <a href="url">texte</a> texte
[texte]{.style} <span class="style">texte</span> texte

Images

![caption](img/UPPA_logo-rose.png){width=160px}

caption

<img src="img/UPPA_logo-rose.png" alt="caption" width=160px/>

Principes et outils pour prendre des notes en Markdown

Principes

Pas du markdown standard mais adoptés par tous ces outils (+ Zettlr)

  • #tags
  • [[wikilinks]]
  • - [ ] To Do lists
  • Templates (dailynote, note de lecture…)

Outils

Extensions pour VS Code

  • Markdown Memo
    • + Markdown Link Updater
    • + Markdown Links (Vue en graphe)
  • Dendron
    • + Dendron Markdown Links
    • + Dendron Markdown Preview enhanced
    • + Markdown Link Updater
    • + …

Obsidian.md

Interface générale

Obsidian.md

graphview

Obsidian.md

paramètres

Obsidian.md - plugins

themes

Obsidian.md - plugins

csv

Obsidian.md - plugins

todo

Obsidian.md - plugins

citations

Obsidian.md - plugins

mindmap

Obsidian.md - plugins

etc.

Rédiger en Markdown

éditeurs spécialisés (Recommandés)

typora

Thème : Newsprint ; Modes Focus & Typewriter

Mode Code Source [commenté]

Thème : Night ; Mode Focus

Résultat dans Word (via Pandoc)

Liste d’éditeurs Markdown de Bureau

Liste d’éditeurs Markdown En ligne

éditeurs généralistes

  • VS Code avec quelques extensions :
    • Markdown Extension Pack :
      • Markdown All in One
      • Markdown PDF
      • Mardown Image
      • markdownlint
      • Markdown Preview Github Style (désinstallée)
      • Grammarly (unofficial) (english only)
    • Pandoc Markdown Preview
    • Markdown Footnote
    • (Markdown Fiction Writer)

Et Zotero dans tout ça…

Extensions Zotero : Better BibTeX for Zotero

Documentation pour Markdown/Pandoc

1- Exporte une collection Zotero dans un fichier .json ou .bib et garde le fichier synchronisé avec la collection.


Mettre toute ses références dans une collection.
Puis clic-droit : Exporter la collection

Choisir le format Better CSL JSON ou Better BibTeX...
Et cocher Garder à jour

Exporter dans le dossier data du répertoire d'écriture

2- Ajoute un convertisseur pour le Quick Copy (ctrl+shift+c) qui met dans le presse-papier [@clédelaréf]


Choisir Better BibTeX [@citekeys] Quick Copy comme format de sortie par défaut

Paramétrage des préférences de BetterBibTeX

Extensions Zotero : Mdnotes for Zotero

Exporte en markdown (vers un dossier, pour Obsidian ou Zettlr)

  • les métadonnées de la référence
  • vos notes (qui peuvent avoir été extraites des pdf par ZotFile)


Zotero > Outils > Mdnotes preferences

Clic-droit (sur une référence) > Mdnotes > Create full export note

Résultat dans Obsidian

Extensions Zotero pour éditeurs

La magie Pandoc

Ressource indispensable : Pandoc User’s Guide

Pour se familiariser avec les commandes : Page d’exemples

Convertir une page web en fichier word (ou markdown)

pandoc -r html https://fr.wikipedia.org/wiki/Aaron_Swartz -o AaronSwartz.docx

pandoc -r html https://fr.wikipedia.org/wiki/Aaron_Swartz -o AaronSwartz.md

markdown vers word, avec modèle et bibliographie

pandoc 
  -s
  --reference-doc styleBraud.docx
  -C
  --bibliography=data/BiblioInventaire.json 
  --csl=data/gallia-prehistoire.csl
  -o mémoire.docx 
  mémoire.md

markdown vers html

avec bibliographie et sommaire (cliquables), template, css et javascript (ex: Inventaire Blot)

pandoc 
  -s 
  --toc 
  --template=data/templateHtml.html 
  --include-in-header=data/css_mémoire.css 
  --include-in-header=data/js_mémoire.js 
  -C 
  --bibliography=data/BiblioInventaire.json 
  --csl=data/gallia-prehistoire.csl 
  --metadata link-citations=true 
  -o mémoire.html 
  mémoire.md

Une bonne porte d’entrée vers

pandoc -f markdown -t latex -o mémoire.tex mémoire.md

puis ouvrir avec un éditeur TeX (Overleaf par exemple).

Extensions

Diaporama, diagrammes, Mindmap

Produire un diaporama : Reveal.js

ou Beamer (LaTeX, pdf), Slideous (html), Slidy (W3C, html), DZSlides (html), S5 (html)

Via Pandoc (comme Zettlr) ou extension VS Code : vscode-reveal

Dessiner des Schémas et graphiques : Mermaid.js

Flowchart, Sequence diagram, Class Diagram, State Diagram, Entity Relationship Diagram, User Journey, Gantt, Pie Chart

Dessiner des graphiques : Draw.io Integration dans VS Code (support de mermaid)

gifDémo

Vue MindMap : Markmap.js

extension Obsidian : Obsidian Mind Map | extension VS Code : markmap-vscode

Merci de votre attention

Contact