Skip to content

Latest commit

 

History

History
340 lines (282 loc) · 12.9 KB

file.md

File metadata and controls

340 lines (282 loc) · 12.9 KB
Raw
print_background title puppeteer
true
Explication Markdown
format printBackground displayHeaderFooter margin headerTemplate footerTemplate
A4
true
true
top right bottom left
2cm
2cm
2cm
2cm
<style> #ph, #pf { width: 100%; font-size: 10pt; font-family: "Times New Roman", Times, serif; border: 0px solid #c3c3c3; margin: 0px 1cm 0px; } #ph { border-bottom-width: 1px; } #pf { border-top-width: 1px; } #ph > div, #pf > div { display: flex; justify-content: space-between; } </style> <div id="ph"> <div> <div>Nom prenom</div> <div>ABC</div> <div>Type</div> </div> <div> <div >Nom prenom</div> <div></div> <div>Type</div> </div> </div>
<div id="pf"> <div class="child"> <div>Gauche</div> <div> <span class="pageNumber"></span> sur <span class="totalPages"></span> </div> <div>Droite</div> </div> <div class="child"> <div>Gauche</div> <div>Centre</div> <div> <span class="pageNumber"></span> sur <span class="totalPages"></span> </div> </div> </div>

@import "style.less"

⚠️ ce document est adapté pour être exporté avec Markdown Preview Enhanced⚠️

Extensions VSCode

Les quels j'utilise en se moment :

  • Markdown All in One
  • Markdown Preview Enhanced
  • Paste Image

Je n'utilise plus :

  • Markdown PDF

Markdown all in one

  • https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
  • TDM
    • ctrl shift p : >Create table content
    • va générer la table des matières (sans le titre)
    • Ajouter la balise <!-- omit from toc --> au titre pour ne pas l'afficher dans la table des matières
  • De bon raccourcis claviers
  • Prise en charge de Latex (formules); mermaid; et bien d'autres
  • Prévisualisation ctrl K, V (Sa ouvre juste le prévisualiseur de base de VSC)
    • Pas d'émoji de type :code:
    • 2 ligne sans espace entre == à la suite du texte (fonctionnement normal de MD)
    • UI simple mais efficace, on vois quel ligne est éditée
  • Export HTML
    • ctrl shift p : >Print current document to HTML
    • Passable, mais sans plus (manque un peu de colorisation comparé à la prévisualisation)
    • 1ère ligne du fichier markdown : <!-- title: Guide Markdown --> permet de définir le titre de la page HTML, sinon prend le 1er titre
    • Ne supporte pas le front-matter (Markdown Preview Enhanced)

Markdown preview enhanced

  • https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
  • Toutes les options sont bien expliqué dans la doc : https://github.com/shd101wyy/markdown-preview-enhanced/tree/master/docs
  • Prévisualisation ctrl K, V
    • Rendu très bien
    • 2 ligne sans espace entre == comme si on avait un <br> (c'est une option) (fonctionnement normal de GitHub Flavored Markdown)
    • gère les notes de bas de page ([^1])
    • Checkbox modifiable dans la prévisu
    • gère la visualisation Latex
    • Exports :
      • Export "HTML", le rendu correspond à la prévisualisation (thème de base)
      • Export "Puppeteer" est très puissant, mais demande de la configuration dans le front-matter
        • Gère les #page
        • Malheureusement, le fichier CSS ne prend pas pour le "headerTemplate" et le "footerTemplate" (il faut configurer directement dans le front-formatter.
      • les autres exports sont moyen (demande des installations supplémentaires, non testé)
  • L'auto-génération de la TOC n'est pas fameuse // Mais en utilisant celle de Markdown All in One, le rendu est top

Markdown PDF

  • https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf
  • Pas testé plus que ça, car après configuration des précédentes extensions elle se suffisent. C'était l'extension que j'utilisais avant de tester les autres.
    • La configuration de l'entête et du pied de page se fait dans le fichier de configuration de l'extension (settings.json), ce qui n'est pas fameux pour des informations pour des fichiers spécifiques.
    • Pour afficher les #page c'est pas aisé

Paste image

Table des matières

1. Numéros de titres

Mise à jour des # titres auto avec Markdown All in One :
ctrl shift p : >add/update section numbers pour update ctrl shift p : >remove section numbers pour supprimer

1.1. Titre 2

1.1.1 Sous titre

1.1.1.1 beaucoup de 1

2. Titre 3

Styles

  • puces
  • 😄
    • 😎
  1. abc
  2. def
    • ghi
      • jkl

citation

  • tache
  • Faite
style code raccourci (Markdown all in one)
gras **gras** ctrl b
italique *italique* ctrl i
souligné <u>souligné</u>
barré ~~barré~~ alt s
code `code`
bloc de code (voir plus bas) ```type code ```
lien [lien](...) ctrl v un lien en sélectionnant du texte
image ![image](...)
note de bas de page12 [^1] [^nom]
$\LaTeX : \varphi(n) \rArr x$ $...$

bloc de code : multiline

a = "hello world" 
print(a) 
var a = "hello world, avec une très longue ligne de code qui dépasse la largeur de la fenêtre lors de l'exportation en PDF de ce document"
system.out.println(a)

Dans la preview, un slider s'affiche. Pour l'export avec Puppeteer (Markdown Preview Enhanced), le texte est tronqué si on ajoute pas cette option dans le css (ajout expliqué ici) :

@media print {
    pre[class*="language-"] {
        white-space: pre-wrap;
    }
}

le @media print permet de conserver le slider dans la preview

les blocs de code pour les types plantuml et mermaid ne peuvent être affichés tel quel, ils sont convertis en diagrammes, voir Diagrammes

Diagrammes

Si les blocs de code prennent le type plantuml ou mermaid, ils sont automatiquement interprétés et affichés.

Du moins pour l'extension Markdown Preview Enhanced.

PlantUML

@startuml
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml

@startuml
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml

Mermaid

stateDiagram
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

stateDiagram
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }
Loading

Nouvelle page (HTML / PDF)

Faire un saut de page au format pdf ou impression navigateur :

  • <div style="page-break-after: always;"></div>", // syntaxe pure HTML
  • <div class="page"></div> // Simplification dans notre css, l'extension markdown-pdf la contient de base

// même si page-break-after est marqué comme déprécié, puppeteer ne gère pas le break-after

Markdown Preview Enhanced

En 1ere ligne du fichier Markdown, possibilité d'utiliser le front-matter pour configurer le rendu HTML

---
config1: value1
config2: value2
---

Configuration possible (testé) :

config description valeur par défaut type
title titre de la page nom du fichier sans l'extension texte
print_background utiliser le style du prévisualiseur false booléen
puppeteer Configuration de l'export "Chrome (Pupeeteer)" - objet
puppeteer.format Taille de la feuille A4 A4, A3, Letter, etc
puppeteer.margin Marge de la page - objet
puppeteer.printBackground Afficher les couleurs de background false booléen
puppeteer.displayHeaderFooter Afficher les headers et footers false booléen
puppeteer.headerTemplate Template HTML du header - HTML
puppeteer.footerTemplate Template HTML du footer - HTML

CSS custom

C:\Users\[utilisateur]\.mume\style.less sera la feuille de style par défaut, mais il est possible d'en ajouter de cette manière (ici relatif à ce fichier md) : @import "css.less" .css est aussi valide, mais non visible dans la prévisu.

En cas de modification dans le fichier importé, il est nécessaire de recharger la prévisu pour prendre en compte les changements.

Divers

Ligne séparatrice : au moins 3 * ou - ou _ sur une ligne

Image

La taille des deux images ci-après est exactement la même ! Sauf l'une est horizontale et l'autre verticale (respectivement 2800x1600 et 1600x2800). La taille de l'image est adaptée à la largeur de la fenêtre de prévisualisation, ou la taille de l'export PDF.

Une large image :

Une longue image :

Pour redimensionner une image, passer par html plutôt que markdown : 

<img src="chemin" height="200">

Notes de bas de page

(Markdown Preview Enhanced) Même si elle sont créé avant, elle seront affiché en fin de document Nommé une note permet de la réutiliser plus facilement, mais son index sera visible dans l'output (HTML, prévisu)

Footnotes

  1. note de bas de page #1 ↩

  2. bloc de code avec plusieurs lignes ↩