Pink my Pad Foire aux questions
Bienvenue sur la FAQ
Principes
- poser votre question technique ou éditoriale sur cette page, la réponse sera partagée pour tout le monde.
- tenter de répondre aux questions posées
Questions
- Comment supprimer les ” = ” dans notre Pink My Pad lorsque l’on souhaite surligner des mots à partir de HedgeDoc ?
- …
Ressources
- Tutoriel Markdown (10min) : markdowntutorial.com/fr/
- Documentation Pink my pad : pinkmypad.net
- Visualiser le code html produit par du markdown : https://codebeautify.org/markdown-to-html
Comment ajouter une image ?
Depuis l’url de l’image
Voici la syntaxe en Markdown:
Soit par exemple:
Depuis son ordinateur
Vous pouvez aussi copier-coller une image de votre ordinateur directement dans le pad (CTRL+C CTRL+V)
Depuis une capture d’écran
ici j’ai fait une capture d’un bouton et j’ai simplement collé
(CTRL+V) l’image dans le pad : 
Comment modifier la couleur d’un bloc HTML ?
#html
Il est possible en markdown de créer un élément div avec
des classes et/ou un identifiant.
- La syntaxe pour baliser un élément
divest:::avant et après son contenu. - La syntaxe pour ajouter des classes et/ou identifiant est :
{.maclasse #identifiant}
Soit la syntaxe complète :
::: {.info #myonlyblock}
Le contenu de votre block.
:::ce qui produira dans Pinkmypad le code HTML suivant:
<div class="info" id="myonlyblock">
<p>Le contenu de votre block.</p>
</div>Vous pouvez ensuite ajouter les règles CSS de votre choix, par exemple :
div.info { color: blue; background-color:lightgrey ;}L’ajout de classe ou d’identifiant fonctionne pour la plupart des
blocs et éléments HTML : <section>,
<blockquote>, <span>, mais aussi
des liens.
Par exemple pour une section :
## Ma section de niveau 2 {.info}donnera
<section id="ma-section-de-niveau-2" class="level2">
<h2>Ma section de niveau 2</h2>
</section>Ou pour baliser un élément dans un paragraphe :
Voici un paragraphe avec [un passage spécial]{.info} !donnera :
<p>Voici un paragraphe
avec <span class="info">un passage spécial</span> !
</p>Pour aller plus loin dans la personnalisation : Documentation > Ajouter des règles CSS
Comment ajouter une couleur à un titre ?
Pour ajouter une couleur à un titre, deux possibilités :
- utiliser l’identifiant du titre qui est créé automatiquement, et ajouter un règle CSS à cet identifiant
- ajouter une classe au titre et ajouter une règle CSS à cette classe.
1. Utiliser l’identifiant
Lorsque Pinkmypad convertit un titre du markdown au HTML, il crée automatiquement un identifiant.
## Mon titre
Le contenu de votre section.ce qui produira dans Pinkmypad le code HTML suivant:
<section class="level-2" id="mon-titre">
<h2>Mon titre</h2>
<p>Le contenu de votre section.</p>
</section>Donc il est maintenant possible d’ajouter une règle CSS à cet identifiant :
#mon-titre {font-color: #C576F6;}2. ajouter une classe au titre
Pour ajouter au classe à un titre (ou à la section correspondante), on utilise la syntaxe suivante :
## Mon titre de section {.maclass}On peut d’ailleurs ajouter plusieurs classes
## Mon titre de section {.maclass .uneautreclass}Comment manipuler la taille d’une image?
Pour manipuler la taille d’une image (ou d’autres aspects), on ajoute des éléments de style directement après l’image avec la syntaxe Markdown suivante :
{style="width: 50%; border: 1px solid black;"}On peut aussi ajouter une classe ou un identifiant à l’image :
{.monimage #thisone}et ajouter une règle CSS à cette classe ou identifiant :
img.monimage {width: 50%;} /* s'appliquera à tous les éléments <img> de classe "monimage" */
img#thisone {border: 1px solid black;} /* s'appliquer à l'élément <img> dont l'identifiant est "thisone" */Par ailleurs, Pinkmypad accepte aussi une syntaxe simplifiée s’il ne
s’agit que de gérer la taille de l’image, par exemple :
{width=50%}
Comment remplacer le surlignage == de Hedgedoc pour
Pinkmypad ?
Le surlignage dans Hedgedoc se fait avec la syntaxe Markdown suivante
==mots surlignés==. Mais cette syntaxe n’existe pas dans
Pinkmypad/Pandoc.
Si le surlignage est nécessaire pour votre document Pinkmypad, il
faut utiliser une classe particulière .mark qui appliquera
une règle CSS spécifique. Par exemple en Markdown :
Voici un [mot surligné]{.mark}.Soit le résultat :
Voici un mot surligné.
Ce qui donnera en HTML :
<p>Voici un <span class="mark">mot surligné</span>.</p>Une règle CSS existe par défaut, mais vous pouvez sur-ajouter la règle CSS, par exemple :
span.mark {background-color: ivory;} /* ajoute la couleur de fond "ivoire" au contenu du span */Dans ce cas, vous n’avez plus besoin des signes ==.
Comment faire un zoom sur une image
Les images peuvent apparaître un peu petite selon la largeur de vos sections. Un zoom peut faciliter leur lecture.
Il suffit d’ajouter les deux règles CSS suivantes :
img {transition: transform .1s;}
img:hover{
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}Comment faire une liste de tâches en markdown
- [ ] tâche à faire
- [x] tâche effectuée
- [x] sous-tâche 1
- [x] sous-tâche 2
- [ ] ~~tâche annulée~~donnera :
- tâche à faire
- tâche effectuée
- sous-tâche 1
- sous-tâche 2
tâche annulée
Comment masquer/afficher du contenu
L’élément HTML <details> permet de créer un module
qui peut être masqué ou affiché. Il sera masqué par défaut. Il n’existe
pas de syntaxe markdown pour baliser cet élément
<details>. On doit donc l’utiliser directement en
HTML:
exemple :
<details>
<p>Mon contenu à masquer</p>
</details>donnera :
Mon contenu à masquer
On peut remplacer le terme “Details” par un contenu de notre choix
grâce à la balise <summary> :
<details>
<summary>Cliquez moi</summary>
Mon contenu à masquer
</details>donnera :
Cliquez moi
Mon contenu à masquer
Pour avoir l’élément ouvert par défaut, utilisez l’attribut
open : <details open>
Attention, dans cette FAQ, la règle CSS
details {background-color : aliceblue;} a été ajoutée.
Comment ajouter un attribut à un hyperlien ?
Comme pour les autres éléments HTML, on peut utiliser la syntaxe
suivante pour ajouter attributs et identifiant :
{.maclasse .autreclasse #identifiant}.
Par exemple en markdown :
Voici un [lien avec un attribut](https://pinkmypad.net){.red}
et un [lien sans attribut](https://pinkmypad.net).donnera :
Voici un lien avec un attribut et un lien sans attribut.
On voit que la règle CSS a.red {color: red;} est bien
prise en compte.
Comment faire une note de bas de page
2 façons de faire une note de bas de page :
Classique : on sépare le texte annoté et la note elle-même. Celle-ci peut être placée n’importe où dans votre document, elle apparaitra toujours en fin de document une fois convertie en HTML.
Bonjour, voici une phrase avec une note1.
Source markdown :
Bonjour, voici une phrase avec une note[^coucou].
[^coucou]: Voici ma note de bas de pageIntégrée : la note est intégrée dans le texte et
marquée par crochets. Ce peut être pratique lorsque l’on rédige et qu’on
souhaite préciser un point dans le flux de l’écriture. Notez ici où se
place l’accent circonflexe ^.
Bonjour, voici une phrase avec une note intégrée2 directement dans le texte.
Bonjour, voici une phrase avec une note
intégrée^[Ici la note de bas de page] directement
dans le texte.Comment on change la police de caractère
Pour importer une police de caractère, vous pouvez utiliser la fonction ‘@import’ en css en déclarant l’url de votre police de caractère.
Par exemple, dans le yaml de votre pad, la CSS pourrait démarrer ainsi :
header-includes: |
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:wght@300;400;600;700&display=swap');
body { font-family: 'Montserrat'; }
h2 {font-weight: 700;}
...
</style>Ici, la police “Montserrat” de Google a été utilisée. D’autres polices sont disponibles depuis Google Fonts.
Comment ajouter un lien à un document externe, comme un PDF ?
Si le document est déjà déposé sur un serveur, et
disponible en ligne, par exemple https://site.com/mon.pdf,
alors il suffit de faire un lien tout simple :
[Voir mon pdf (PDF)](https://site.com/mon.pdf)
Si le document n’existe pas en ligne, je vous suggère le déposer sur un drive ou une dropbox, ou tout espace de partage de fichier (Paris 8 fournit plusieurs outils, dont un nextcloud), puis de partager le fichier et d’utiliser le lien de partage.
Il est possible d’intégrer un PDF (ou une autre page
pinkmypad) à l’intérieur d’une page avec la balise HTML
<iframe>. Par exemple :
<iframe src="https://site.com/mon.pdf" height="200" width="300"></iframe>Exemple avec une page pinkmypad :
Comment tagger une section dans Pinkmypad ?
#tag, #markdown
Il suffit d’ajouter un
#avant un terme : #infobésité, #surveillanceVous pouvez aussi catégoriser les tags, en ajoutant une catégorie en préfixe, par exemple: #date:26sept, #glossaire:sensibilisation, etc.
Les tags vont s’afficher dans le volet de navigation. Un clic sur un tag permet de filtrer les sections marquées par ce tag. Cliquer sur le tag à nouveau pour annuler le filtre.
Voir aussi la documentation : Ajouter des tags.