bunige-slides/demo.md

155 lines
3.1 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

---
title: Ma présentation BUNIGE
subtitle: Une démo
date: le 9 février 2024
place: Ici
id: 20240925143527
author:
- name: Présentateur/trice
email: Présentateur-trice@unige.ch
licence:
- type: CC-BY-SA 4.0
url: https://creativecommons.org/licenses/by-sa/4.0/
source: https://example.org
bibliography: static/references.json
csl-style: static/heg-iso-690.csl
link-citations: true
---
## Plan
1. [Partie 1](#partie-1).
1. [Partie 2](#partie-2).
# Partie 1
---
## [`reveal-js`]{.bunige-code-inline} et [`pandoc`]{.bunige-code-inline}
- Rédige tes *slides* en markdown.
- Converti ton markdown en un fichier HTML suivant le modèle de
[`reveal-js`]{.bunige-code-inline}.
- Mais avec une version proche de la charte graphique de l'UNIGE.
- Un exemple est donnée dans le fichier
[`./bunige-demo.md`]{.bunige-code-inline}.
---
- Un lien: <https://example.org>.
- Texte préformaté: [`preformated`]{.bunige-code-inline}
---
## Des classes en markdown?
Pour ajouter une classe à un élément en ligne en
[`pandoc`]{.bunige-code-inline} markdown, voici comment faire:
```{.markdown}
Un peu de [texte]{.class} en ligne.
```
Ce qui donne:
```{.html}
<p>Un peu de <span class="class">texte</span> en ligne.
```
---
Un joli texte avant une belle image. Machin
![Légende de l'image](https://www.unige.ch/biblio/files/cache/d7d5b0a60baf07a4ad8534ad20b9839c_f9197.jpg)
---
## Des colonnes
Pour les colonnes, il y a les classes \
[`bunige-columns`]{.bunige-code-inline} pour le contenant principal, et \
[`bunige-column`]{.bunige-code-inline} pour chaque colonne.
::: {.bunige-columns}
::: {.bunige-column}
![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)
:::
::: {.bunige-columnf
![Logo Reveal.js](https://revealjs.com/images/logo/reveal-black-text.svg)
:::
:::
---
## Des colonnes, en mieux
- [`bunige-columns-center`]{.bunige-code-inline} pour centrer verticalement le
contenu.
- [`bunige-no-border`]{.bunige-code-inline} pour supprimer les bordures des
images dans la colonne.
::: {.bunige-columns .bunige-columns-center}
::: {.bunige-column .bunige-no-border}
![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)
:::
::: {.bunige-column .bunige-no-border}
![Pandoc](https://pandoc.org/pandoc-cartoon.svgz)
:::
::: {.bunige-column .bunige-no-border}
![Logo Reveal.js](https://revealjs.com/images/logo/reveal-black-text.svg)
:::
:::
# Partie 2
---
Un exemple de code:
```{.html .number-lines startFrom="70"}
<code class="bunige-code-inline">Texte préformaté.</code>
<figure>
<img src="./img.jpeg" alt="alternate text">
<figcaption>Figure caption.</figcaption>
</figure>
```
## Image de fond {background-image="https://www.unige.ch/biblio/files/cache/d7d5b0a60baf07a4ad8534ad20b9839c_f9197.jpg" data-background-opacity="0.5"}
Avec un degré de transparence de [`0.5`]{.bunige-code-inline}
---
## Citation
Selon Pochet, … [@pochetMarkdownVous2023].
Alors qu'Ovadia, … [@ovadiaMarkdownLibrariansAcademics2014].
---
::: {.r-fit-text .bunige-color}
Merci!
:::
---
## Références {#references}